【Nginx】nginxのproxy設定でNext.jsを配信する

implの藤谷です。
dockerコンテナ上のnextアプリケーションを、同じくdockerコンテナ上のnginxのproxy設定を通して配信する方法を解説します。

nginx経由で配信するメリット

以下のようなものが挙げられます

• アクセス負荷の向上
• 配信速度の向上
• リバースプロキシ機能や、ロードバランサー機能の提供
  （リバースプロキシ ~ 外部ネットワークから内部ネットワークへの接続を中継するプロキシサーバ）

実装

docker-compose.yml

dockerを利用し、nextとnginxのコンテナを立てます。

version: "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のページが表示されていることを確認します。

終わりに

今回は以上となります。
ここまで読んで頂き、ありがとうございました。