公開：2026.05.03(日) 19:36
JavaScriptの開発環境をDockerで構築する
JavaScriptの学習をするため、Docker上にnode.js環境の構築をすることにした。
Docker環境
1. Windows+WSL+Ubuntu上にDockerを構築
2. 作業フォルダ作成
WSL上に "~/docker/node.js" フォルダを作成した。
mkdir -p ~/docker/node.js
cd ~/docker/node.js
3. compose.yamlファイル作成
VSCodeを起動
masauser@hppc:~/docker/node.js$ code .
compose.yaml
services:
app:
image: node:20-slim
volumes:
- .:/app
working_dir: /app
ports:
- "3000:3000"
tty: true
4. コンテナ起動
WSLターミナル、またはVSCodeのターミナル(CTRL+@)で以下コマンドを実行
docker compose up -d
実行結果：
masauser@hppc:~/docker/node.js$ docker compose up -d
[+] up 10/10
✔ Image node:20-slim Pulled 11.1s
✔ Network nodejs_default Created 0.1s
✔ Container nodejs-app-1 Started
5. 簡易サーバー起動
コンテナ上で簡易サーバーを起動
docker compose exec app npx serve .
実行結果：
masauser@hppc:~/docker/node.js$ docker compose exec app npx serve .
Need to install the following packages:
serve@14.2.6
Ok to proceed? (y) y
ERROR Cannot copy server address to clipboard: Couldn't find the `xsel` binary and fallback didn't work. On Debian/Ubuntu you can install xsel with: sudo apt install xsel.
┌────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://172.19.0.2:3000 │
│ │
└────────────────────────────────────────┘
HTTP 5/3/2026 11:52:10 AM 172.19.0.1 GET /
HTTP 5/3/2026 11:52:10 AM 172.19.0.1 Returned 200 in 22 ms
HTTP 5/3/2026 11:52:10 AM 172.19.0.1 GET /favicon.ico
HTTP 5/3/2026 11:52:10 AM 172.19.0.1 Returned 404 in 3 ms
HTTP 5/3/2026 11:52:14 AM 172.19.0.1 GET /
HTTP 5/3/2026 11:52:14 AM 172.19.0.1 Returned 200 in 1 ms
ERRORと表示されているがxselが入っていんた
6. 動作テスト
WSLの作業フォルダ上にindex.htmlを作成
VSCodeでは "!" + Enter(または "html:5" + Enter)でhtmlのテンプレートを作成
bodyに適当に文字列を入力しておく。
Windowsのブラウザで「http://localhost:3000」にアクセス、index.htmlの中身が表示されればOK
簡易サーバーは CTRL+D で終了させておく、
7. package.jsonの作成
"npm start" コマンドで簡易サーバーを起動できるようにpackage.jsonを作成する。
WSLにて以下コマンドを実行する。
docker compose exec app npm init -y
docker compose exec app npm install serve
実行結果：
masauser@hppc:~/docker/node.js$ docker compose exec app npm init -y
Wrote to /app/package.json:
{
"name": "app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
masauser@hppc:~/docker/node.js$ docker compose exec app npm install serve
added 85 packages, and audited 86 packages in 2s
26 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
package.jsonはWSL(Ubuntu)の作業用フォルダに作成されており、これを編集したいが書き込み権限が無く編集できない。
WSL(Ubuntu)の作業フォルダ上で以下コマンドを実行し権限を付与する。
sudo chown -R \$USER:$USER .
次にWSLで "code package.json" (またはWindowsのVSCodeからリモートエクスプローラー、もしくは Ubuntu上でvimで) scriptsの部分に "start: serve ." を付加する。
{
"name": "app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "serve ."
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"serve": "^14.2.6"
}
}
これで以下コマンドで簡易サーバーが起動できるようになる。
docker compose exec app npm start
8. コンテナを一般ユーザーで動かす
コンテナ内の動作はコンテナ内のrootユーザーによって動作するため、先ほどのpackage.jsonのようにホストから編集できないファイルが作成される場合がある。
"node:20-slim"イメージには nodeという名前の一般ユーザーが含まれており、このユーザーでコンテナを動かすことでこのトラブルを防ぐことができる。
"node"ユーザーでコンテナを動かすには compose.yaml に "user" 設定を追加する。
services:
app:
image: node:20-slim
user: "node" # ← これを追加（rootではなく標準ユーザーnodeで動かす）
volumes:
- .:/app
working_dir: /app
ports:
- "3000:3000"
tty: true
設定を反映するには、CTRL+C および compose down でコンテナをいったん停止し compose up で再起動する。
docker compose down
docker compose up -d
9. コンテナ起動時に簡易サーバーも起動させる
現在はコンテナ起動したとに docker compose exec app npm start を実行する必要がる。
コンテナ起動時に npm start を実行させるには compose.yaml に "command" の設定を追加する。
services:
app:
image: node:20-slim
user: "node"
volumes:
- .:/app
working_dir: /app
ports:
- "3000:3000"
# コンテナ起動時に自動で実行されるコマンド
command: npm start
tty: true
"docker compose down" → "docker compose up -d" でコンテナを再起動、
Windowsからブラウザで "localhost:3000" にアクセスできれば無事に起動できている。
WSL Docker Node.js JavaScript
