Docker + Nginx + Node.js で開発環境構築

業務でNext.jsに触れる機会があったのでDockerで開発環境構築をやってみたいと思ったので書いていきます。
実際にはMySQLも含みますがサーバーサイド側のため割愛します。

*ローカル開発環境構築の想定のため、セキュリティは本番環境を想定していません。

やりたいこと

docker-composeでNginxコンテナをリバースプロキシとしてNode.jsコンテナへリクエストを投げる環境の構築

環境構築

Docker for Macをインストール済みかつNext.jsでプロジェクト作成済みを想定

docker version

$docker --version
Docker version 20.10.6, build 370c289

ディレクトリ構造

├── docker-compose.yml
├── node
|   ├── Dockerfile 
├── nginx
   ├── default.conf 

docker-compose.yml

services:
  nginx:
    image: nginx:1.21-alpine
    container_name: next-nginx
    ports:
      - "80:80"
    depends_on:
      - node
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
  node:
    build: ./node
    container_name: node
    volumes:
      - {プロジェクトルーティング}/:/usr/src/app/

Dockerfile

curl使ってAPIとの連携確認できたら便利かなと思い入れています。

FROM node:16-alpine

RUN apk --no-cache add curl

WORKDIR /usr/src/app/

default.conf

server {
    listen 80;
    server_name node.docker.internal;

    root /var/www/public;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass 127.0.0.1:4000;
    }
}

/etc/hosts

127.0.0.1 node.docker.internal

docker-compose up

$docker-compose up -d --build // imageダウンロードとかbuildのログがいっぱいでてきます。
$docker-compose ps
    Name                   Command               State                           Ports
--------------------------------------------------------------------------------------------------------------
nginx      /docker-entrypoint.sh ngin ...          Up      0.0.0.0:80->80/tcp,:::80->80/tcp
node       docker-entrypoint.sh npm r ...          Up      3000/tcp, 5000/tcp,

うまく起動できたようなので次はnodeコンテナに入りnpm run devを実行します。

$docker-compose exec node sh
#npm run dev する際のポートを変更する
$vi package.json
  "scripts": {
    "dev": "next dev --port 4000", //← ここに--port 4000を追加
    "build": "next build",
    "start": "next start"
  },
$npm run dev

これでnode.docker.internal:80をたたくとプロジェクトが表示されていると思います。

現状の課題

nodeコンテナをcompose up -d -buildするとデフォルトで3000ポートが公開されていてnpm run devされていない状態でも閲覧可能でした。しかし、ファイルを編集してもnpm run devしていないので変更が反映されないので、default.confのproxy_passで4000ポートを指定し、npm run devするポートも4000に変更しました。
docker-compose up -d --buildした時点のnpm run devのポートが占領されてしまうため、docker-compose up -d --build後にpackage.jsonを編集する必要がありました。

この部分は最適解ではないと思うので、どうすれば対策できるか調べていこうと思います。
コメントでも是非教えて頂ければ幸いです。