Node.js+Expressな環境をDockerで構築する

はじめに

1年前にフロントエンド開発のためのセキュリティ入門知らなかったでは済まされない脆弱性対策の必須知識を買ったのだが、それを読んでおらず、最近になって読み始めた。
この中で、Node.js + Express でハンズオンの環境を構築しているので、書籍の通り構築してみる。
※ どこでも環境を作れるようにDockerで構築を試してみる。

環境

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
MacOS sonoma 14.2.1

Docker Desktop 4.28.0 (139021)

Server: Docker Desktop 4.28.0 (139021)
 Engine:
  Version:          25.0.3
  API version:      1.44 (minimum version 1.24)
  Go version:       go1.21.6
  Git commit:       f417435
  Built:            Tue Feb  6 21:14:25 2024
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.6.28
  GitCommit:        ae07eda36dd25f8a1b98dfbf587313b99c0190bb
 runc:
  Version:          1.1.12
  GitCommit:        v1.1.12-0-g51d5e94
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0

docker initを使って構築する

実は docker initを試してみるでも、docker initを使って、Node.js+Expressの環境を構築していた。

https://www.publickey1.jp/blog/24/dockerdocker_initdockerfilecompose.html によると、docker initは2024/01/25に正式リリースされたので、以前の記事の時点では実験的リリースだったようだ。
成果物に変わりがありそうなので、再度docker initで構築を試してみる。

ワークディレクトリの作成

今回は、~/workspace/nodejs-express-handsonというパスでディレクトリを作成し、そこで作業をする。

1
mkdir -p ~/workspace/nodejs-express-handson && cd $_

docker init の実行

docker initでの構築を実施してみる。

1
docker init

1
2
3
4
5
6
7
8
9
Welcome to the Docker Init CLI!

This utility will walk you through creating the following files with sensible defaults for your project:
  - .dockerignore
  - Dockerfile
  - compose.yaml
  - README.Docker.md

Let's get started!

プロジェクトにどのアプリケーションプラットフォームを使うのかを聞かれるので、Node を選択する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
? What application platform does your project use?  [Use arrows to move, type to filter]
  Go - suitable for a Go server application
  Python - suitable for a Python server application
> Node - suitable for a Node server application
  Rust - suitable for a Rust server application
  ASP.NET Core - suitable for an ASP.NET Core application
  PHP with Apache - suitable for a PHP web application
  Java - suitable for a Java application that uses Maven and packages as an uber jar
  Other - general purpose starting point for containerizing your application
  Don't see something you need? Let us know!
  Quit

Node のバージョンを聞かれる。 https://nodejs.org/en/about/previous-releasesを見ると、LTSかつ最新なものは20.11.1となるので、これにする。

1
? What version of Node do you want to use? (8.9.4)  20.11.1

パッケージマネージャは何を使うと聞かれる。 pnpm使ってみたいしこれにしよう。

1
2
3
4
? Which package manager do you want to use?  [Use arrows to move, type to filter]
  npm - (detected)
  yarn
> pnpm

pnpmのバージョン何にすると聞かれる。 https://github.com/pnpm/pnpm/releasesのGitHubのリポジトリのReleasesのページを見てみた。
v8.15.4が最新らしい。(v9.0.0もあるがアルファ版)

1
? What version of pnpm do you want to use? 8.15.4

どういうコマンドでアプリケーションが起動するか教えてと聞かれる。
前回は、node index.js みたいなコマンドだったので、それにしておこう。

1
? What command do you want to use to start the app? [tab for suggestions] node index.js

ポートは何番を使うかを聞かれる。
3000番としておく。

1
? What port does your server listen on? 3000

できた

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
✔ Your Docker files are ready!

Take a moment to review them and tailor them to your application.

WARNING: The following files required to run your application were not found. Be sure to create them before running your application:
  - package.json
  - pnpm-lock.yaml

When you're ready, start your application by running: docker compose up --build

Your application will be available at http://localhost:3000

Consult README.Docker.md for more information about using the generated files.

成果物を確認していこう、このあたりができている。

1
.dockerignore  Dockerfile  README.Docker.md  compose.yaml

環境の起動

1
docker compose up -d --build 

1
failed to solve: failed to compute cache key: failed to calculate checksum of ref 100ebf9f-d869-4ab8-a483-2915b8123053::ejlz08rw16fqm6bbzjdwc1yl2: "/package.json": not found

package.jsonがなくて怒られる。

package.jsonやその他ファイルがある前提でDockerfileが作成されるので初期構築が少し難しい。

そのため、修正を加えることにする。

docker init 成果物の修正とindex.jsの追加

Dockerfile

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# syntax=docker/dockerfile:1

# Comments are provided throughout this file to help you get started.
# If you need more help, visit the Dockerfile reference guide at
# https://docs.docker.com/go/dockerfile-reference/

# Want to help us make this template better? Share your feedback here: https://forms.gle/ybq9Krt8jtBL3iCk7

ARG NODE_VERSION=20.11.1
ARG PNPM_VERSION=8.15.4

FROM node:${NODE_VERSION}-alpine

# Use production node environment by default.
ENV NODE_ENV production

# Install pnpm.
RUN --mount=type=cache,target=/root/.npm \
    npm install -g pnpm@${PNPM_VERSION}

WORKDIR /usr/src/app

# Download dependencies as a separate step to take advantage of Docker's caching.
# Leverage a cache mount to /root/.local/share/pnpm/store to speed up subsequent builds.
# Leverage a bind mounts to package.json and pnpm-lock.yaml to avoid having to copy them into
# into this layer.
#RUN --mount=type=bind,source=package.json,target=package.json \
#    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
#    --mount=type=cache,target=/root/.local/share/pnpm/store \
#    pnpm install --prod --frozen-lockfile

# Run the application as a non-root user.
USER node

# Copy the rest of the source files into the image.
COPY . .

# Expose the port that the application listens on.
EXPOSE 3000

# Run the application.
CMD ["tail", "-f", "/dev/null"]
#CMD node index.js

としておく。

compose.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# Comments are provided throughout this file to help you get started.
# If you need more help, visit the Docker Compose reference guide at
# https://docs.docker.com/go/compose-spec-reference/

# Here the instructions define your application as a service called "server".
# This service is built from the Dockerfile in the current directory.
# You can add other services your application may depend on here, such as a
# database or a cache. For examples, see the Awesome Compose repository:
# https://github.com/docker/awesome-compose
services:
  server:
    build:
      context: .
    environment:
      NODE_ENV: production
    ports:
      - 3000:3000

# The commented out section below is an example of how to define a PostgreSQL
# database that your application can use. `depends_on` tells Docker Compose to
# start the database before your application. The `db-data` volume persists the
# database data between container restarts. The `db-password` secret is used
# to set the database password. You must create `db/password.txt` and add
# a password of your choosing to it before running `docker-compose up`.
#     depends_on:
#       db:
#         condition: service_healthy
#   db:
#     image: postgres
#     restart: always
#     user: postgres
#     secrets:
#       - db-password
#     volumes:
#       - db-data:/var/lib/postgresql/data
#     environment:
#       - POSTGRES_DB=example
#       - POSTGRES_PASSWORD_FILE=/run/secrets/db-password
#     expose:
#       - 5432
#     healthcheck:
#       test: [ "CMD", "pg_isready" ]
#       interval: 10s
#       timeout: 5s
#       retries: 5
# volumes:
#   db-data:
# secrets:
#   db-password:
#     file: db/password.txt

こっちは特に変更を入れていない。

index.jsの作成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const http = require('http');
const express = require('express');

const app = express();

app.get("/", function(req, res){
    return res.send("Hello World");
});

const server = http.createServer(app);
server.listen(3000);

修正後の作業

この状態で、docker compose up -d --buildとし、コンテナを起動。
エントリーポイントが CMD ["tail", "-f", "/dev/null"] の部分となっているので停止せずに動いている状態となる。

起動したら、下記でコンテナ内に入る。

1
docker compose exec --user=root server sh

その後、pnpm initを実行する。

1
pnpm init

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/usr/src/app # pnpm init
Wrote to /usr/src/app/package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
/usr/src/app # ls
README.Docker.md  index.js          package.json

その後、pnpm add expressでexpressも入れておこう。

1
pnpm add express

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/usr/src/app # pnpm install express
Packages: +64
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 64, reused 0, downloaded 64, added 64, done

dependencies:
+ express 4.18.3

devDependencies: skipped because NODE_ENV is set to production

Done in 2.6s

できたので、これをホスト側のPCに持ってくる。
docker cpを使う。

1
2
3
4
docker ps

CONTAINER ID   IMAGE                           COMMAND                   CREATED         STATUS         PORTS                    NAMES
986d5bc0a0f9   nodejs-express-handson-server   "docker-entrypoint.s…"   9 minutes ago   Up 9 minutes   0.0.0.0:3000->3000/tcp   nodejs-express-handson-server-1

CONTAINER IDが986d5bc0a0f9なので、

1
2
docker cp 986d5bc0a0f9:/usr/src/app/package.json .
docker cp 986d5bc0a0f9:/usr/src/app/pnpm-lock.yaml .

で持ってこられる。

Dockerfileを元に戻す

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# Comments are provided throughout this file to help you get started.
# If you need more help, visit the Dockerfile reference guide at
# https://docs.docker.com/go/dockerfile-reference/

# Want to help us make this template better? Share your feedback here: https://forms.gle/ybq9Krt8jtBL3iCk7

ARG NODE_VERSION=20.11.1
ARG PNPM_VERSION=8.15.4

FROM node:${NODE_VERSION}-alpine

# Use production node environment by default.
ENV NODE_ENV production

# Install pnpm.
RUN --mount=type=cache,target=/root/.npm \
    npm install -g pnpm@${PNPM_VERSION}

WORKDIR /usr/src/app

# Download dependencies as a separate step to take advantage of Docker's caching.
# Leverage a cache mount to /root/.local/share/pnpm/store to speed up subsequent builds.
# Leverage a bind mounts to package.json and pnpm-lock.yaml to avoid having to copy them into
# into this layer.
-#RUN --mount=type=bind,source=package.json,target=package.json \
-#    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
-#    --mount=type=cache,target=/root/.local/share/pnpm/store \
-#    pnpm install --prod --frozen-lockfile
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
+    --mount=type=cache,target=/root/.local/share/pnpm/store \
+    pnpm install --prod --frozen-lockfile

# Run the application as a non-root user.
USER node

# Copy the rest of the source files into the image.
COPY . .

# Expose the port that the application listens on.
EXPOSE 3000

# Run the application.
-CMD ["tail", "-f", "/dev/null"]
+CMD node index.js

起動

1
docker compose up -d --build

ちゃんと起動した〜

今回作成したもの

下記に成果物を入れておいた。
https://github.com/katsuobushiFPGA/nodejs-express-with-docker-handson

おわりに

書籍のハンズオンをこれからやっていきたい。
そして、フロントエンド技術を深く理解していきたい。
pnpmとか使ったことなかったので良い機会になるかも。

あと、docker initで生成した成果物は全部production環境で動作するようにできているみたいだ。
開発環境であれば、ソースコードをマウントしたりした方が開発効率は良いので、そうできるように環境ごとのymlを作ったり、うまいこと切り替える機構を使ってみるかな。
ということで、まだ改善の余地があり。
※現状だと、ソースコード直すたびにコンテナビルドが必要になる。