Next.jsをPM2を使ってVPS上にデプロイしてみた

この記事について

この記事はインフラ初心者がWebページをVPS上で公開したい！って思ってやったことを備忘録として書き残したものです。素人が書いているため情報の信憑性は保証しません。詳細は各自で調べながらやることをおすすめします。記事のとおりにやっておかしなことになっても責任は取れませんのでご了承ください。

事前準備

VPS上でgithubとのSSHの設定を済ませておいてください。

Nodeのインストール

VPS上にnodeをインストールします。普通にnodeの公式ページからダウンロードしてもいいですが、今回はバージョン管理がしやすいようnodebrewを使用することにします。

curl -L git.io/nodebrew | perl - setup

そしてこれを.zshrcなり.bashrcに追記↓

export PATH=$HOME/.nodebrew/current/bin:$PATH

リロード↓

source ~/.zshrc

お好きなバージョンのnodeをインストールします。

nodebrew install stable
nodebrew use stable

node -vで正しくインストールされていることを確認します。

私は普段yarnを使用しているので

npm install -g yarn

でyarnを入れます。

起動

pm2をインストール

npm install -g pm2

pm2の使い方についてはこちらのサイトが参考になります。
https://qiita.com/zaburo/items/70a83aee188d45b39e58

yarn buildを実行して、以下のコマンドで起動

pm2 start npm --name "app-name" -- start

以下のコマンドで再起動/停止できます。

pm2 restart app-name # 再起動
pm2 delete app-name # 停止

nginxの設定

/etc/nginx/conf.d/next.confに以下を記述。ただしlocalhostのポート番号についてはpackage.jsonのscripts.startのところに書いたポート番号と一致するようにしてください。

server {
        listen 80;
        server_name example.com;

        location / {
                proxy_pass http://localhost:4400;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

設定したらnginxを再起動

sudo systemctl nginx restart

これでデプロイ完了です。

注意

本番環境でnext/imageを使うにはsharpというパッケージが必要らしい。
https://nextjs.org/docs/messages/sharp-missing-in-production

ローカルで

yarn add sharp

としてsharpを予めインストールした状態でデプロイしましょう。

参考資料

How to Deploy NextJS App on a Custom VPS
https://medium.com/@ranjandsingh/how-to-deploy-nextjs-app-on-a-custom-vps-56269748870f

Deploy Multiple NodeJS Apps on single Server with SSL, Nginx, PM2 - Part 1
https://dev.to/ranjan/deploy-multiple-nodejs-apps-on-single-server-with-ssl-nginx-pm2-part-1-4841

PM2の簡単な使い方と環境によるアプリ名の変更など
https://qiita.com/zaburo/items/70a83aee188d45b39e58