🫀

Next.jsで開発したアプリをデプロイしてpm2で永続化する

2023/07/18に公開

Next.js

開発環境

Ubuntu 22.04.2

nvmのインストール

Next.jsで作られたアプリを動かすにはnpmが必要なので
nvmでnode + npmをインストールしたい

まずはnvmをインストール

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

設定ファイルを反映させる

# 何のshellを使っているのか確認
$ echo $SHELL
# bashなので、bashrcを反映させる
$ source ~/.bashrc

nodeのインストール

次にnode + npmをインストール
ltsのバージョンにします

$ nvm install --lts

念の為現在のバージョンを確認

$ nvm ls

アプリの設置

ディレクトリを作成
gitからpullしてくる
アプリをbuildする

pm2で永続化する

Next.jsはサーバーサイドレンダリング（SSR）を使用するため、リクエストごとにNode.jsサーバー上でアプリケーションを実行する必要がある
そのためpm2などで永続化する

インストール

（いろんな場所から使えるようにグローバルにインストール）

$ npm install pm2 -g

UbuntuなのでDebian環境用のセットアップスクリプトの実行を行う

$ apt update && apt install sudo curl && curl -sL https://raw.githubusercontent.com/Unitech/pm2/master/packager/setup.deb.sh | sudo -E bash -

pm2の使用状況を確認

$ pm2 ls

Next.jsアプリのプロジェクトルートでアプリケーションを起動させる

$ pm2 start npm --name "PROJECT_NAME" -- start

nginxのインストール

$ sudo apt update
$ sudo apt install nginx

confファイルを作る

設定したドメインのconfファイルを作ります

$ sudo vim /etc/nginx/conf.d/xxxxxx.conf

server {
        listen 80;
        server_name ドメイン名;

        location / {
                proxy_pass             http://127.0.0.1:3000;
                proxy_read_timeout     60;
                proxy_connect_timeout  60;
                proxy_redirect         off;

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

        location /_next/static {
                add_header Cache-Control "public, max-age=3600, immutable";
                proxy_pass http://127.0.0.1:3000/_next/static;
        }
}

nginxのリロードを行う

$ sudo systemctl reload nginx

独自ドメインにアクセス

対象のドメインにアクセスしてみましょう！できましたか?