💻

Next.jsを公開済みのEC2に載せてブラウザからアクセス可能にする

2024/10/07に公開

AWS

Next.js

EC2

tech

フロントとバックエンドを別々にして自作WEBアプリを作りました。

Next.jsをEC2に載せて公開する際、IPアドレスなどの設定がローカルのものと異なり、設定ファイルの修正などを行ったため、今後似たようなものを作るときのためにメモ代わりとして残しておきたいと思ったので書き留めておきます。

 前提Next.jsは3000ポートで公開する
バックエンド側のサーバーはaxum(Rust)で3001で起動する
EC2に関連するインターネットGW、セキュリティグループ、Elastic IPなど一連の設定は割愛します。
いち早く動くものを作りたかったので、セキュリティなどはほとんど考慮していません。漏洩したらいけないデータとかを扱うサイトには使わないでください。

 Next側Next起動コマンド修正

EC2では、package.jsonを修正して、Next起動コマンドに-H 0.0.0.0 -p 3000 を追加します。

これにより、npm run startで起動後、Next.jsがすべてのIPアドレスでリッスンするようになります。
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -H 0.0.0.0 -p 3000",//今回はこの行をこのように修正した
    "lint": "next lint",
    "debug": "NODE_OPTIONS='--inspect' next dev"
  },
ファイアウォール（セキュリティグループ）の設定

セキュリティグループでポート3000を開放します。


タイプ: カスタムTCPルール

ポート範囲: 3000

ソース: 0.0.0.0/0（すべてのIPアドレス）
3.fetchのURL修正

バックエンドにアクセスする際、fetchのホスト名はEC2に紐づいているElastic IPにする。

※ポートは後述するバックエンド設定のポートに合わせる
//例
const url = http://<EC2に紐づいているElastic IP>:3001/
fetch(url+"XXX")

 バックエンド側バックエンドのサーバーとしてaxum（Rust）を使います。

ローカル環境では「HOST_NAME=127.0.0.1:3001」の設定で起動させていたものを、

EC2では 「HOST_NAME = 0.0.0.0:3001」の設定でサーバーを起動させるようにします。

※.envファイルに、「HOST_NAME=0.0.0.0:3001」が記載されている前提
pub async  fn running_router()  {
    let cors = CorsLayer::new()
    .allow_origin(Any)  // 全てのオリジンを許可
    .allow_methods(Any)  // 全てのHTTPメソッドを許可
    .allow_headers(Any); // 全てのヘッダーを許可

    let app = axum::Router::new()
    .route("/", routing::get(show_career::show_top))
    .layer(cors);

    dotenv().ok();
    axum::Server::bind(&env::var("HOST_NAME").unwrap().parse().unwrap())
    .serve(app.into_make_service())
    .await
    .unwrap();
}

 ブラウザからアクセスするあとは、ブラウザから「http://<EC2に紐づいているElastic IP>:3000」でNextにアクセスできると思います。

 補足EC2があるネットワークは以下の画像のような構築にしています。

前提

Next側

バックエンド側

ブラウザからアクセスする

補足

Discussion