Next.jsの運用手順

前提条件

前提条件はNginxをインストール済のUbuntu環境です。詳しくは「Nginx、PHP、MariaDBの構築手順」を参照してくださいませ。

環境

• OS Ubuntu 22.04 LTS
• Nginx　80、443の管理
• Node.js　ブログ環境
• Next.js+React　ブログサイト

作業

1. 必要環境と構築

1.1 Nginxのインストール状況

$ nginx -vコマンドで確認

#　下記の様にバージョン番が出てくる　→  Nginxインストール済確定
nginx version: nginx/1.18.0 (Ubuntu)

1.2 Node.jsのインストール

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

$ sudo apt install nodejs

$ node -vコマンドで確認

#　下記の様にバージョン番が出てくる　→  Node.jsインストール済確定
#  Node.js バージョン14.6.0以降が必要
v18.12.1

1.3 npmのインストール状況

$ npm -vコマンドで確認

#　下記の様にバージョン番が出てくる　→  npmインストール済確定
8.19.2

2. Next.jsよりblogページの運用

2.1 Next.jsアプリ作成

• /var/www/に移動する

  $ cd /var/www

• 次のコマンドを実行して、Next.js アプリを作成する

  $ sudo npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

• nextjs-blogという名前の新しいディレクトリが作成された。それに入りましょう

  $ cd nextjs-blog

• 次に、次のコマンドを実行する

  $ sudo npm run build

2.2 Nginxの設定

1. nextjs-blog.conf を作成し設定を追加する

   $ sudo vim /etc/nginx/sites-available/nextjs-blog.conf

   server {
       listen 80;
       listen [::]:80;
       server_name blog.sample.com www.blog.sample.com;
   
       location / {
           proxy_pass http://localhost:3000;
           proxy_redirect off;
       }
   }
   

2. シンボリックファイルを貼る

   $ sudo ln -s /etc/nginx/sites-available/nextjs-blog.conf /etc/nginx/sites-enabled/

3. Nginxを再起動する

   $ sudo systemctl restart nginx

2.3 PM2を使ってNodeサーバを永続化する

• pm2 を環境にインストール

  $ sudo npm install -g pm2

• pm2でnext jsを永続化

  $ sudo pm2 start npm --name "next" -- start

• ドメインを入力しブラウザで確認する

Next.jsの運用の手順は以上です。

お疲れ様でした。