Next.jsをうまく外部に公開できない

Question

実現したいこと

Next.jsで自作アプリを作っています。

AWSにNext.jsをインストールして公開しようとしてますがうまくいきません。
（ブラウザのDevツール上の「ネットワーク」タブのエラーは「ERR_ONNECTION_TIMED_OUT」になっていました）

AWSのEC2にElastic IPを紐づけ、セキュリティグループのインバウンドルール(http,https,ssh)などの必要だと思うリソースの設定は一通り行いました。（外部からのＳＳＨ接続は成功しています。）

gitリポジトリからソースをpullし、Nerxtなど必要なライブラリをインストールしNext.jsを起動後、ブラウザからアクセスしてもアプリが、表示されません。

解消方法をご存じの方いたらよろしくお願いしまします。

発生している問題・分からないこと

先述した通り、Elastic IPを紐づけ、セキュリティグループなども設定してもブラウザ上から閲覧できません。

もう少し詳しく説明しますと下記のように「npm run dev」でNextを起動してから、、、、

ubuntu@ip-10-0-1-59:~/XXXXXX$ npm run dev 
> sannple@0.1.0 dev
> next dev

  ▲ Next.js 14.2.11
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1719ms

コード

EC2に紐づけられてるElastic IPを使ってブラウザからアクセスを試みましたがうまくいきません。

「 http://XX.XX.XXX.XXX 」や「 http://XX.XX.XXX.XXX:3000 」でアクセスしてもうまく画面が表示されません。

追記
ブラウザのDevツール上の「ネットワーク」タブの表示は画像のように「ERR_CONNECTION_TIMED_OUT」なっていました。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

インターネットゲートウェイも作成済みです。VPCにアタッチ済みです。

補足

特になし

Comments

[mike2mike4]

表示されないとは？　具体的に、404エラーがでてるとか、501エラーがでてるとか、エラーログを提示してください。これだけではなにもわかりません。

[shoco]

回答ありがとうございます。
Next起動後のコンソール上は変わりなかったです。

ブラウザのDevツール上の「ネットワーク」タブの表示は画像のように「ERR_CONNECTION_TIMED_OUT」なっていました。（本質問に画像を追加しています）

[mike2mike4]

Node.jsがサーバーとして動いているか？　ApacheかNginxがリバースプロキシサーバーとして動いているか確認してください。

[mike2mike4]

失礼、「デフォルトで、npm run dev コマンドで起動されたNext.jsアプリケーションは localhost でリッスンします。この状態だと、外部からアクセスすることができません」とのことです。

[shoco]

外部からリッスンさせるにはどのようにしたらできますか？
-H <Elastic IP>をつけて起動したりしましたがうまくできませんでした。

[mike2mike4]

解決策は、package.jsonの dev スクリプトを修正するか、起動コマンドに-H 0.0.0.0 を追加することです。これにより、Next.jsがすべてのIPアドレスでリッスンするようになります。

npm run dev -- -H 0.0.0.0

または、 next.config.js に以下を追加しても同様の効果があります。

module.exports = {
devIndicators: {
autoPrerender: false,
},
server: {
host: '0.0.0.0',
},
};
2. ファイアウォール（セキュリティグループ）の設定
セキュリティグループでポート3000が開放されているか確認してください。Next.jsのデフォルトのポートは 3000 ですが、もし異なるポートで起動する場合、そのポートも開放する必要があります。セキュリティグループのインバウンドルールに以下の設定が必要です：

HTTP (ポート80): もし80番ポートでサービスを提供するなら必要です。
HTTPS (ポート443): SSL/TLSを使っているならこちらも。
ポート3000: 開発中であればデフォルトの 3000 ポートも開放してください。
具体的な設定方法:

タイプ: カスタムTCPルール
ポート範囲: 3000
ソース: 0.0.0.0/0（すべてのIPアドレス）

[yu_1985]

タイムアウトなのでネットワーク的につながってなさそうな気がしますが…。

セキュリティグループの設定は自己申告ではなく実際の設定を記載してください（スクリーンショットなど）

[shoco]

mike2mike4さん。
ありがとうございます。いただいた情報でうまくいきました。
自分はpackage.jsonのscriptsを修正して実現しました。

ついでの質問になってしまい恐縮ですが、
上記の方法でブラウザからアクセスするとポート番号あり出ないとアクセスできませんが、
ポート番号なしでアクセスする方法もございますか？
もしご存じなら教えていただきたいと思います。

[mike2mike4]

package.jsonのdevスクリプトを次のように変更することも可能です：

"scripts": {
"dev": "next dev -p 80"
}
この設定により、npm run devでNext.jsアプリケーションをポート80で起動できます。

[shoco]

上記の方法でできました。
大変助かりました。ありがとうございます。＜（＿＿）＞

Answer 1

1.npm run dev -- -H 0.0.0.0で起動

1. ファイアウォールの設定

タイプ: カスタムTCPルール
ポート範囲: 3000
ソース: 0.0.0.0/0（すべてのIPアドレス）