Next.jsをNginxを使ってSSLで公開可能な環境作成

Memo

とりあえず、Nginxの設定、SSL設定はできているものとして進める。
なお、環境はCentOS7である。

目次

インストール

sudo yum install epel-release
sudo yum install nodejs npm

プロジェクト作成

ややこしくなるので、Nginxのrootディレクトリの外で作っておく。

npx create-next-app my-next-app

コンテンツ作成

よしなに…

ビルド

npm run build

サーバ起動

npm run start

Nginxの設定

server {
    listen       443 ssl;
    server_name  hogehoge.com;
############ 中略 ############
    location ^~ /nextjs/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://hogehoge.com:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_next_upstream error timeout http_502 http_503 http_504;
    }
    location ^~ /_next/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://hogehoge.com:3000/_next/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_next_upstream error timeout http_502 http_503 http_504;
    }
############ 中略 ############
}

もっといい方法がありそうだが、とりあえずリバースプロキシでどうにかしてみる。
この方法だと、Next.jsを書くときにパスを気をつけないと、リバースプロキシの設定から漏れることがある。その場合は、設定を追加するか、ファイルの置き場所を工夫することでどうにかなりそう…

ポートについて

ポートを変えたいときは、package.json内に-pオプションを記述して指定する。
もちろん、Nginxの設定も同じポート番号に置き換える。

############ 中略 ############
  "scripts": {
    "dev": "next dev -p 3333",
    "build": "next build",
    "start": "next start -p 3333",
    "lint": "next lint"
  },
############ 中略 ############

Next.jsサーバのデーモン化（永続化）

sudo npm install pm2 -g
pm2 start npm --name "next" -- start
pm2 startup
pm2 save

上手くいったかを確認してみる。

pm2 list

その他、pm２ listで表示されるidで指定して、停止・再起動ができる。

pm2 stop 0
pm2 restart 0