CentOS+Nginx+NextJSのサイトを公開するまで

2023年08月14日

CentOS+Nginx+NextJSでウェブサイトをホスティングして公開するまでの手順についてまとめました。

１・NextJSのプロジェクトを作成

npm create-next-app@latest –ts

質問は全てyesを選択。

これで、プロジェクトのフォルダが作成

２・サーバを立ち上げ

npm run dev

↑ これでエラーが出た

SyntaxError: Unexpected token ‘??=’ after creating nextjs app and running it

よく分からないが、Nodeのバージョンとかが関係してるっぽい。

最新のバージョンにあげてみる。

パッケージ「n」のインストール

npm install -g n

これで、バージョン指定でnodeがインストールできる。

最新のバージョン(18～20）だと、CentOS側が対応してないっぽいエラーが出たので、最終的に16.13.0をインストールした。(細かいバージョン指定になってるので、プロジェクト作成時に16.０.０だとワーニングが出たので）

n 16.13.0

n

これで表示されたバージョンの中から指定したバージョンを選択

これで、npm run dev でエラーが出ずにサーバが起動できた。

問題：どうやってドメイン名でアクセスして表示するのか。

localhost:3000を指定することでサイトが表示されるようになっているのだが、これをどうやってドメイン名で指定してアクセスするサイトで見れる状況にできるのか。

/etc/nginx/conf.d 以下にある confファイルを以下のように設定

location / {
    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;
}

意味は全く分からないが、そのようにすればよいということで、その通りに設定。

nginxを再起動。

すると、サイトが表示されたがレイアウトが崩れている。(CSSとかが読み込まれていない）

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;
}

設定ファイルに上記を追加後、nginxを再起動。

すると、初期表示のページがきちんと表示された。

あと、初期状態の

npm run dev

のコマンドの画面を閉じるとサイトが表示されなくなることに困った。これは、

npm run dev

ではなく、

npm run build

を実行することで解決した。

永続化設定というのも調べたら出てきたので、

npm install -g pm2
npm list -g
pm2 start npm --name "任意の名前" -- start

というのもやってみたけど、意味があったのかどうかよくわからない・・・。