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:3000;
    }
}

/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

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