WSL2内にNode.jsが動作するDocker環境を用意した(Docker Compose)

これはなに？

前回の続きになります

Docker Compose のボリュームマウントを利用して、コンテナ内のフォルダーの内容を変更できるようにします

• マウントしない場合は、イメージにフォルダーの内容を保存しているため、変更するにはイメージの再作成が必要になります
• docker コマンドを直接使う場合であっても、コマンドラインオプションを付けることでボリュームマウントすることもできます

環境

• Windows11
  • WSL2
    • Ubuntu 20.04
  • Docker Desktop
• VS Code
  • Remote WSL

準備

必要なファイルを作成します

.dockerignore

ボリュームマウントするので不要になったファイル・フォルダを管理外として設定します

.dockerignore

node_modules

docker-compose.yml

以下に、部分ごとに説明します

docker-compose.yml

services:
  app:
    build: .
    ports:
      - 3000:3000
    working_dir: /app
    volumes:
      - ./:/app
      - app_node_modules:/app/node_modules

volumes:
  app_node_modules:

名前付きボリューム

    volumes:
      - ./:/app
      - app_node_modules:/app/node_modules

volumes:
  app_node_modules:

./と書くことで、コンテナのフォルダ(/app) にホスト側のフォルダーをマウントしています
ローカルのnode_modulesフォルダに実行環境が左右されてしまいます

それを防ぐために、名前付きボリュームのapp_node_modules で別に管理します

yarn.lockを更新

app_node_modules を /app/node_modules にマウントした状態でyarn installをしてコンテナから参照できるフォルダーの内容を更新します

$ docker compose run --rm app yarn install

コンテナ起動

実行されて Hello World!が表示されました

$ docker compose up 

[+] Running 1/0
 ✔ Container corp-test-app-1  Recreated
Attaching to app-1
app-1  | yarn run v1.22.22
app-1  | warning package.json: No license field
app-1  | $ node main.js
app-1  | Hello World!
app-1  | Done in 0.07s.
app-1 exited with code 0

最後に

誰かの参考になれば幸いです