# 複数のNext.jsプロジェクトを別々のdockerコンテナで構築し、nginxリバースプロキシで振り分けるまでに詰まった事

同一ドメインのサブディレクトリにNext.js ウェブアプリをそれぞれ独立したdockerコンテナで起動し、更にNGINXで振り分けるまでに詰まった事を備忘録も兼ねて書き残しておきます。初めての人向けです。上級者には物足りない内容だと思います。予めご了承ください。

# 今回やった事

図のとおり、独自ドメインのルートディレクトリhttps://domain.com/を入力するとlocalhotst:3000へ、https://domain.com/app2を入力した場合はlocalhost:3001へ転送されるように設定する。主にNGINX絡みですので、Next.js 以外にも通じると思います。

# next.config.jsへの追記

コチラのサイトを参考にnext.config.jsにassetPrefixとrewritesを追記する。後述する静的ファイル以外はこれで特に問題無かった。

# 127.0.0.1の罠

dockerコンテナ越しで通信する場合、同一ホスト内でも127.0.0.1では繋がらない場合があります。api等を使うときは下記のように172ポートも開ける必要があるかもしれません。

apiに繋がらないとgetStaticProps等を使ったプロジェクトではビルドエラーになります。apiに繋がらない時はcors設定もですが、vpc、ファイアウォールも疑ってみましょう。

# nginx.confの正規表現

NGINXからのリバプロの場合、静的ファイルの設定をしないとページに.jsや.cssが当たりません。

NGINX設定ファイルの一例です。()内の拡張子のファイルが呼び出されるとproxy_passのアドレスに転送されます。webp等、他の拡張子のファイルを扱う予定があるなら適宜追記してください。

以下はダメな例です。自分はこれでハマりました。

順序が逆ですが、NGINXのconfファイルは基本的に上から順に評価されるので、同じプレフィックス（~*の部分）では先に上の部分が実行され、この書き方だと全ての静的ファイルがlocalhost:3000に転送され、下段の/app2/は永久に適用されません。

慣れてる人からすれば当たり前な事ですが、NGINXのconfファイルを記述するときはlocationブロックの記載する順番にも注意しましょう。

# ちなみに正規表現の超おさらいですが

正規表現について詳しく学びたい方は「正規表現、NGINX」などで検索してみて下さい。