JavaScript:node環境の構築

公開: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
    

0 件のコメント:

その他の記事