NGINX + Next.jsでWEBサーバーの公開
この記事は、NGINXを使ったWEBサーバー構築に関する備忘録になります。
利用サーバー環境
VPS : ConoHa VPS
OS : Ubuntu 22.04
手順
nginx インストール
cd $HOME
sudo apt update
# NGINX インストール
apt install nginx
ufw ルール設定
ufw は、Ubuntu に標準でインストールされているファイアウォールです。ufw は、デフォルトでは、すべての接続をブロックしています。そのため、HTTP と HTTPS の接続を許可する必要があります。今回は練習環境なので、HTTP のみを許可します。
# ufw のAppリスト確認
sudo ufw app list
#出力結果 OK
Available applications:
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH
# ufw HTTPポートの許可
sudo ufw allow 'Nginx HTTP'
# ufw 再起動
sudo ufw reload
# 下記の様に表示されていればOK
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
Nginx HTTP ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Nginx HTTP (v6) ALLOW Anywhere (v6)
Node.js インストール
nvm を利用して、Node.js をインストールします。nvm は、Node.js のバージョン管理ツールです。利用しなくても、Node.js をインストールすることはできますが、複数の Node.js のバージョンを管理することができるので、今後の開発にも役立ちます。
# nvm (Node.js バージョン管理)
apt install nvm
# node.js 安定版のインストール
nvm install --lts
# node バージョン確認
node -v
# npm バージョン確認
npm -v
NGINX コンフィグ リバースプロキシ設定
インターネット上にはいくつかコンフィグ設定に関する記事がいくつかありどれを選択するか迷いますが、自分のやりたいことに合わせた設定にしてください。今回はデフォルト設定ファイルとリバースプロキシを利用します。
ChatGPTより
-
/etc/nginx/sites-enabled/default.conf:- これは NGINX のデフォルトの設定ファイルです。新しいサーバーをセットアップしている場合や、既存のデフォルトサイトを変更したい場合には、このファイルを編集します。また、特に他の設定がない場合には、このファイルに追加するのが一般的です。
-
/etc/nginx/conf.d/***.conf:-
conf.dディレクトリ内のファイルは、通常は特定のアプリケーションやサービスのために個別に設定されます。新しいサイトやアプリケーションの設定を追加する場合、または特定のアプリケーションの設定を変更する場合には、このディレクトリ内に新しい.confファイルを作成するか、既存のファイルを編集します。
-
sudo vi /etc/nginx/sites-enabled/default.conf
server {
listen 80;
server_name Your_Domain.jp;
location / {
proxy_pass http://localhost:3000;
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 ステータス確認
systemctl status nginx
# NGINX 再起動
sudo service nginx restart
# Webブラウザでアクセス確認
# "http://your_domain or IP address"
Next.js ファイル生成
mkdir /var/www/Your_Domain.jp
cd /var/www/Your_Domain.jp
# 新規作成する場合
npx create-next-app@latest your-app-name .
# Gitリポジトリからクローンする場合
git clone "git_ssh_address" .
#ビルドファイルの作成
npm run build
# Webブラウザでアクセス確認
# "http://your_domain or IP address"
アクセス権限でフォルダを守られている場合は、sudo chown $USER:$USER /var/www/Your_Domain.jp で所有者の変更を行ってください。
また、sudo chmod -R 755 /var/www/Your_Domain.jp で権限を変更してください。
PM2を使ったNodeの永続化
PM2 はNode.jsをバックグラウンドで実行するためのプロセスマネージャーです。
# npmパッケージからPM2をインストール
npm install pm2@latest
# PM2でアプリケーションを起動
pm2 start npm --name "your-app-name" -- start
# Boot
pm2 startup
# PM2でアプリケーション設定の保存
pm2 save
Certbot で SSL 証明書を取得
Certbot は、Let's Encrypt が提供している SSL 証明書を取得するためのツールです。
インストールすると、自動的に証明書の更新を行ってくれます。
公式のやり方に従って証明書を取得します。
sudo apt install snapd # 22.04以降は不要
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot --nginx -d your_domain
参考にしたサイト
NGINX Beginner’s Guide
松江工業高等専門学校
Medium Deploy NextJS App on VPS
Discussion