業務で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
これで127.0.0.1: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を編集する必要がありました。
この部分は最適解ではないと思うので、どうすれば対策できるか調べていこうと思います。
コメントでも是非教えて頂ければ幸いです。
↧