🙌
【Nginx】nginxのproxy設定でNext.jsを配信する
dockerコンテナ上のnextアプリケーションを、同じくdockerコンテナ上のnginxのproxy設定を通して配信する方法を解説します。
nginx経由で配信するメリット
以下のようなものが挙げられます
- アクセス負耐性の向上
- 配信速度の向上
- ログの収集
- リバースプロキシ機能や、ロードバランサー機能の提供
(リバースプロキシ ~ 外部ネットワークから内部ネットワークへの接続を中継するプロキシサーバ)
実装
docker-compose.yml
dockerを利用し、nextとnginxのコンテナを立てます。
ersion: "3"
services:
next:
container_name: next_container
build:
context: ./Docker/next
volumes:
- ./flontend:/var/www/flontend
stdin_open: true
tty: true
ports:
- "3000:3000"
nginx:
image: nginx:latest
ports:
- "88:88"
volumes:
- ./Docker/nginx/nginx.conf:/etc/nginx/nginx.conf
- ../Docker/nginx/nginx.html:/usr/share/nginx/html
restart: always
nginx.conf
/Docker/nginx/nginx.confに下記の記述を追加します。
serverコンテキストを一つ作成し、listenで88番ポートを指定してnginxサーバを起動しています。
locationではリダイレクトの設定を行うことができます。
proxy_passでリバースプロキシを使用し、同じcompose.yml内で記述されているnext_container:3000をリダイレクト先に指定しています。
events {}
http {
server {
listen 88;
location / {
proxy_pass http://next_container:3000;
}
}
}
next serverの起動
nextのコンテナ内でサーバを起動します。
next_container:3000が起動し、nginxからの通信が通ります。
$ yarn dev
yarn run v1.22.19
$ next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 3.3s (311 modules)
nginxからnextの配信確認
nginxコンテナ内でnginxを起動します。
$ service nginx start
起動したら、nginxコンテナのipにアクセスしてnext.jsのページが表示されていることを確認します。
Discussion