Memo

EC2での稼働
■参考になりそうな記事

AWS EC2でNext.jsの環境構築する際の備忘録 #AWS - Qiita
https://qiita.com/naniwadari/items/d74fc4a649e69477fa6f

Next.js(&TS)アプリをEC2にデプロイする
https://zenn.dev/eng_o109/articles/41611f14917ba2

React/Next.jsアプリケーションを作成し、AWS EC2を使って本番環境にデプロイするまで #JavaScript - Qiita
https://qiita.com/longtime1116/items/18553e43bfb44cbc9d81

【2020年】AWS EC2でNext.jsの環境構築 - VIVITABLOG
https://blog.vivita.io/entry/2020/08/17/112932

初心者がNext.jsをECSで動かすまで #Next.js - Qiita
https://qiita.com/mkt1234/items/52735503624d12243cf9■想定の手順

※ChatGPTに確認した概要。正しい内容かどうかは未検証
※Next.jsとLaravelを同一EC2で稼働させる場合の例
※これで問題ないなら、Nginxはローカル開発用のDockerにも含めておくと良さそう

Next.jsを3000番ポートで稼働させる
トップページにリクエストされた場合などは、このポートで処理を行う想定とする

Laravelを8000番ポートで稼働させる
/api 配下にリクエストされた場合に限り、このポートで処理を行う想定とする

Nginxを80番ポートで稼働させ、以下のように設定する

server {
    listen 80 default_server;
    server_name _;

    # 静的ファイルへのリクエストはNext.jsが処理
    location / {
        proxy_pass http://localhost:3000;  # Next.jsのポート
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # APIリクエストをLaravelに転送
    location /api {
        proxy_pass http://localhost:8000;  # Laravelのポート
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}


ロードバランサーでは80番ポートと443番ポートのみを開放する
80番ポートにアクセスがあれば、443番ポートに転送する
443番ポートにアクセスがあれば、Nginxの80番ポートに転送する

これでNext.jsアプリケーションが稼働するはず
Memo

Advertisement
