Amazon Linux 2023 + Next.js で Hello World を表示させる

最終更新日:

EC2 Amazon Linux 2023 にて Next.js をインストールして、
ブラウザに hello world を表示させるまでのメモ。

環境

  • AWS
  • EC2 Amazon Linux 2023
  • Nginx 1.24.0
  • Node.js 22.9.0（18.17 以上必要）
  • 作業ユーザーは ec2-user
  • 管理者は root

Node.js のインストール

Next.js のインストール

No / Yes は自身の環境に合わせる。
project name は適当に app にしておく。

$ /path/to/your-product
$ npx create-next-app@latest
What is your project named? app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

PM2

PM2 とは

Advanced, production process manager for Node.JS

とのこと。
JS フレームワークを常駐化するための便利なパッケージ。
プロセス管理ツール。

PM2 のインストール

$ npm install -g pm2

Next.js ビルド＆ PM2 で常駐化

/path/to/your-product/app/ecosystem.config.js

プロダクト毎にポート番号（デフォルトは3000）を分ける時は、
pm2 の設定ファイルを用意する。

必要最低限の設定内容。

module.exports = {
  apps: [{
    script: 'node_modules/.bin/next',
    args: 'start',
    env_production: {
        name: "your-product",
        NODE_ENV: "production",
        PORT: 3000,
    },
    env_staging: {
        name: "your-product-staging",
        NODE_ENV: "staging",
        PORT: 3001,
    }
  }]
}

ビルド＆常駐化

$ cd /path/to/your-product/app

# ビルド
$ npm run build

# 常駐化
# /path/to/your-product/app 上で pm2 コマンドを叩く
#$ pm2 start npm --name your-product -- start

# Production（ポート番号3000）
$ pm2 start ecosystem.config.js --env production

# Staging（ポート番号3001）
$ pm2 start ecosystem.config.js --env staging

プロセスの再起動

$ pm2 reload your-product

プロセスの停止

$ pm2 stop your-product

管理しているプロセスの削除

$ pm2 delete your-product

# 全削除
$ pm2 kill

管理しているプロセスの確認

$ pm2 list
# もしくは
$ pm2 ls

Nginx の設定

/etc/nginx/conf.d/your-product.conf

必要最低限の設定。

upstream your_product {
   server localhost:3000;
}

server {
    listen       80;
    listen  [::]:80;
    # server_name  your.prod.com;
    server_name  localhost;


    proxy_redirect                          off;
    proxy_set_header Host                   $host;
    proxy_set_header X-Real-IP              $remote_addr;
    proxy_set_header X-Forwarded-Host       $host;
    proxy_set_header X-Forwarded-Server     $host;
    proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://your_product/;
    }

    index index.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
    	root   /usr/share/nginx/html;
    }


    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    location ~ /\.ht {
    	deny  all;
    }
}

確認

該当サーバーの IP アドレスにアクセスすると、 hello world が表示されている。と思う。