導入
Next.jsは、サーバー側でレンダリングされるReactアプリケーションを簡単に構築できる人気のReactフレームワークです。このチュートリアルでは、Nginxをリバースプロキシとして使用し、DigitalOceanのドロップレットにNext.jsアプリケーションをデプロイする方法を説明します。このステップバイステップガイドは、デプロイ済みのNext.jsアプリケーションとDigitalOceanアカウントをお持ちであることを前提としています。.
前提条件
- Next.jsアプリケーション
- DigitalOceanアカウント
- 登録ドメイン名（オプションですが推奨）
- Node.jsとnpmまたはyarnのローカルインストール
ステップ1：デジタルオーシャンドロップレットを作成する
Next.jsアプリケーションは、自分で設定するDigitalOcean Droplet上にホストします。それでは、Dropletを作成しましょう。.
- DigitalOcean アカウントにログインし、Droplets セクションに移動します。.
- 「DROPLETを作成」をクリックします。.
- Ubuntu イメージ (できれば最新の LTS バージョン) を選択します。.
- ニーズと予算に応じて、必要な液滴サイズを選択してください。.
- パフォーマンスを向上させるには、対象ユーザーに最も近いデータセンターエリアを選択してください。.
- ドロップレットへの安全なアクセスのために SSH キーを追加します。.
- ドロップレットのホスト名を選択します。ドメイン名または任意の名前にすることができます。.
- 「DROPLETを作成」をクリックします。.
- ドロップレットを作成する
ドロップレットを作成したら、それに割り当てられた IP アドレスをメモします。.
ステップ2: ドロップレットを起動する
ドロップレットを作成したので、着信接続を受け入れ、それらの接続を Next.js アプリケーションにルーティングできるように準備する必要があります。.
ドロップレットの作成時に指定した IP アドレスと SSH キーを使用して、ドロップレットに SSH で接続します。
ssh root@<DROPLET_IP>
Droplet でパッケージを更新およびアップグレードします。
sudo apt update && sudo apt upgrade -y
必要なパッケージをインストールします。
sudo apt install -y nodejs npm nginx
ステップ3: Nginxの設定
Nginxは、Next.jsアプリケーションへのすべてのルーティングを処理するツールです。Next.jsアプリケーション用の新しいNginx設定ファイルを作成してください。
sudo nano /etc/nginx/sites-available/nextjs
次の設定を貼り付けます。server_name をドロップレットのドメイン名または IP アドレスに置き換えます。
server {
listen 80;
server_name YOUR_IP_ADDRESS;
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;
}
}ファイルを保存して閉じます。設定を有効にするためにシンボリックリンクを作成します。
sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
Nginx 構成に構文エラーがないかテストします。
sudo nginx -t
設定テストが成功した場合は、Nginx を再起動します。
sudo service nginx restart
ステップ4: Next.jsアプリケーションをデプロイする
次に、Next.jsアプリケーションをDropletに取り込みます。これには多くのオプションがあります。.
- サーバー上で SSH キーを作成し、それを GitHub アカウントに接続して、リポジトリのクローンを作成します。
- DropletでNext.jsアプリケーションを作成する
このチュートリアルでは、Droplet に新しい Next.js アプリケーションを作成します。.
ドロップレットに SSH で戻ります:
ssh root@<DROPLET_IP>
新しい Next.js アプリケーションを作成し、指示に従います。
cd /var/www
npx create-next-app nextjsNext.js アプリケーション ディレクトリに移動します。
cd nextjs
プログラムの依存関係をインストールします。
npm install
Next.js アプリケーションをビルドします。
npm run build
最後に、Next.js アプリケーションを実行します。
npm start
Next.js アプリケーションがデプロイされ、ドロップレットのドメイン名または IP アドレスでアクセスできるようになりました。アプリケーションをバックグラウンドで実行し、サーバーのクラッシュや再起動時に自動的に再起動させるには、PM2 などのプロセスマネージャーを使用する必要があります。.
ステップ5: PM2プロセスマネージャーを起動する
Droplet内からnpmを起動しました。サーバーの再起動やアップデートのインストールなどにより、このコマンドの実行が停止することがあります。PM2というツールを使用して、Next.jsアプリケーションが常に実行されていることを確認します。PM2は、Next.jsアプリケーションがクラッシュした場合でも再起動します。.
ドロップレットに PM2 をグローバルにインストールするには:
sudo npm install -g pm2
Next.js アプリケーション ディレクトリに移動します (まだ存在しない場合)。
cd /var/www/nextjs
PM2 を使用して Next.js アプリケーションを起動します。
pm2 start npm --name "nextjs" -- start
このコマンドは、npm start コマンドを使用して、「nextjs」という名前の Next.js アプリケーションを起動します。サーバーがクラッシュまたは再起動した場合、PM2 は自動的にアプリケーションを再起動します。.
PM2 が起動時に起動するようにするには、次を実行します。
pm2 startup
このコマンドは、起動時に PM2 を起動するためにターミナルにコピーして貼り付けることができるスクリプトを作成します。.
現在の PM2 プロセスを保存します。
pm2 save
結果
Nginxをリバースプロキシ、PM2をプロセスマネージャーとして使用し、DigitalOceanのドロップレット上でNext.jsアプリケーションを実行できました。アプリケーションはドロップレットのドメイン名またはIPアドレスでアクセスできるはずです。.
ドメイン名をご利用の場合は、DNS設定を忘れずに行ってください。ドメイン名のAレコードをドロップレットのIPアドレスに設定することで、ドメイン名を使用してアプリケーションにアクセスできるようになります。.
セキュリティとSEOを強化するには、Let's Encryptを使用したSSL証明書の設定とHTTPS接続の実装を検討してください。さらに、キャッシュやその他のパフォーマンス改善策を用いてNext.jsアプリケーションを最適化することも検討できます。.
