TATatsuya Abe

Next.jsアプリをUbuntuサーバにデプロイ

Tatsuya Abe

2025/2/12

前提

  • Ubuntu バージョン: 24.04
  • お名前.comでドメイン取得済み

npm，node.js，nginxのインストール

sudo apt install -y npm nodejs nginx

Next.jsアプリのGitリポジトリのクローン，ビルド

git clone [リポジトリURL]
cd [クローンしたリポジトリのディレクトリ]
npm install
npm run build
npm start

.env等の.gitignoreしたファイルを作成するのを忘れないように．
エラーが発生した場合，内容をサーバ側から閲覧できないため，ローカルで確認．

nginxの設定

nginx: webサーバソフトウェア
参考: 初心者でも10分で分かるnginxの役割と使い方

  1. 設定ファイルの作成
sudo vim /etc/nginx/sites-available/[任意の名前]
  1. 以下の設定を記述
server {
    listen 80;
    server_name [ドメイン名];

    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;
    }
}
  1. 設定を有効にする
sudo ln -s /etc/nginx/sites-available/[任意の名前] /etc/nginx/sites-enabled/
  1. 設定をテストし，"test is successful" を確認
sudo nginx -t
  1. Nginxを再起動
sudo systemctl restart nginx

nginxの起動，再起動に失敗した場合

sudo nginx -t

test failed場合，設定ファイル (.conf)に誤りがある．

sudo systemctl status nginx.service

エラーログに，still could not bind() とある場合，他のプロセスがポートを占有している．

PM2のインストール，アプリの起動

PM2: Node.js用のプロセスマネージャ
参考: OpenStandia PM2

  1. pm2をインストール
sudo npm install -g pm2
  1. Next.jsのアプリのディレクトリに移動し，pm2で起動
cd /var/www/myapp  # Next.jsアプリのディレクトリに移動
npm install
npm run build
pm2 start npm --name "[任意の名前]" -- start
pm2 save
pm2 startup
  1. アプリが起動していることを確認
pm2 list

UbuntuサーバのグローバルIPアドレスを確認

curl ifconfig.me

ドメインのネームサーバ，DNSの設定

以下，お名前.comの場合，

ネームサーバの設定

  1. お名前.com NAVIにログイン
  2. ネームサーバー -> ネームサーバー設定
  3. 対象ドメインがお名前.comのネームサーバーを使う設定になっているか確認

DNS設定

  1. お名前.com NAVIにログイン
  2. ネームサーバー -> ドメインDNS設定
  3. ドメイン名を選択 -> 次へ -> DNSレコード設定を利用する
  4. Aレコードを設定
    • ホスト名: 任意
    • タイプ： A
    • TTL: 任意 (初期値: 3600)
    • VALUE: UbuntuサーバのグローバルIPアドレス
  5. 追加 -> 確認画面へ進む -> 設定する

http://[ドメイン名]で接続を確認．
アクセスできない場合，ファイアウォールやルータのセキュリティ，ポート変換の設定を確認．

Let's EncryptでSSL設定 （HTTPS化）

Let's Encrypt: 証明書認証局
参考: 無料SSL証明書のLet’s Encryptとは？

  1. Certbotのインストール
sudo apt install -y certbot python3-certbot-nginx
  1. SSL証明書を取得
sudo certbot --nginx -d [ドメイン名]

Failedの場合は，ファイアウォールやルータのセキュリティ設定を確認．

  1. SSL証明書の自動更新の設定
sudo systemctl enable certbot.timer

最後に，https://[ドメイン名]にアクセスして接続を確認．

ToC