NuxtJSをUbuntu/PM2/Nginxでデプロイしよう

今日はVueベースのフレームワークであるNuxtJSで試しに作ってみた[フロントエンドロードマップ](http://172.104.81.40:84/)のウェブアプリをUbuntuサーバーからデプロイします。

先に[Vueのデプロイの記事](https://asameshicode.com/deploy-vue-app/)を読んでnginxを使ったサーバーを構築しておきましょう。

ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のように[プロキシサーバーを設定せずにデプロイできる方法](https://nuxt.com/docs/getting-started/deployment#deployment)があるそうなので見ておいてください。

しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。


## **準備すること**



* [Nuxtのプロジェクト](https://github.com/TraitOtaku/Frondend-Roadmap-Nuxt)
* Ubuntuサーバー
* SSHで接続できる環境
* ドメイン（なくても可）


## **Nuxtビルドのチョイス**

Nuxtアプリをデプロイするにあたり、２つの方法があります。デフォルトはSSR：**サーバーサイドレンダリング**される方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。

nuxt.config.ts


```javascript
export default {
 target: 'static'
}
```


今回はSSRで行います。このような場合はNodeサーバーを使うためPM2でNodeのウェブサーバーを常時起動できるようにしておきます。詳しいPM2の説明は後ほど。


## **PM2**

PM2（プロセスマネージャー２）はビルドインでロードバランスの機能がついているアプリケーションになります。このPM2がNodeJS（今回はNuxtJS）のアプリが365日常に起動されるように監視してくれます。

では、PM2をサーバーにインストールしましょう。もしローカルでLinuxで作業をしている場合は、PM２が起動するアプリを確認できるので同じようにPM2をインストールしてもOKです。


```bash
npm install pm2@latest -g
# or
yarn global add pm2
```


ではNuxtのプロジェクトのルート直下にecosystem.config.jsを作成し、下記の行を追加します。nameの部分は自分のアプリ名に変更しましょう。


```javascript
module.exports = {
 apps: [
   {
     name: 'NuxtAppName',
     exec_mode: 'cluster',
     instances: 'max',
     script: './.output/server/index.mjs'
   }
 ]
}
```


次に下記のコマンドでPM2を起動し、NUXTのアプリが登録されるか確認してください。


```bash
pm2 start
pm2 ls
```


実際にサーバーにコードを上げてから同じコマンドを実行します。


## **リポジトリをクローン**

では、UbuntuサーバーにSSHで接続をしたあとに、GitHubのリポジトリからNuxtのプロジェクトをクローンしましょう。もしローカルから直接ファイルを上げたい場合はSFTPなどでアップロードしてください。私はSSHクライアントはいつも[MobaXterm](https://asameshicode.com/how-to-use-mobaxterm/)を使っています。


```javascript
sudo apt update
sudo apt install nodejs npm
cd /home/dan/
git clone git@github.com:TraitOtaku/Frondend-Roadmap-Nuxt.git
cd /Frondend-Roadmap-Nuxt/
#パッケージのインストール
npm install
#このコマンドでNuxtがプロダクション用のファイルをコンパイルしてくれます。
npm run build
```



## **Nginxのファイルを作成**

Nginxをインストールしてコンフィグファイルを作成します。初めての人は理解するまでに時間がかかるかもしれませんが、それぞれのコマンドが何を操作しているのか調べるようにしましょう。


```bash
sudo apt install nginx
cd /etc/nginx
#Nginxが指定したフォルダにコンフィグファイルを作成する
sudo nano sites-available/frontend-roadmap
#シンボリックリンクを作成してsites-enabledにファイルを作成する。ここにあるファイルがデプロイ用になる。
sudo ln -s /etc/nginx/sites-available/frontend-roadmap /etc/nginx/sites-enabled/frontend-roadmap
sudo nano sites-available/frontend-roadmap
```


ではnanoなどのテキストエディタでNginxのコンフィグファイルを書いていきます。ここでとても重要なことを説明します。

今回のデプロイは[PM2](https://pm2.keymetrics.io/)というプロセスマネージャーを使います。これで、127.0.0.1:3000にNuxtのウェブサーバーを常時起動させます。

それをNginxを使ってプロキシサーバーとしてロカールのPM2のウェブサーバーに飛ばすような形になります。

順番でいうと。。。



1. ユーザーがドメインにアクセスする。（今回はIPと84番ポート）
2. Nginxのプロキシサーバーがproxy_passの行を見て指定されたローカルの3000番を返す。
3. PM2が127.0.0.1:3000でホストされているのでIPから直接アクセスできたように見える。

では、早速nginxのコンフィグを書いていきます。良い慣習としてetx/nginx/sites/available/にサイト名でコンフィグファイルを作成して下記の行を追加します。


```nginx
map $sent_http_content_type $expires {
   "text/html"                 epoch;
   "text/html; charset=utf-8"  epoch;
   default                     off;
}
server {
  listen 84; #みなさんは理由がない限り80にしてください。
  server_name 172.104.81.40;
  gzip            on;
  gzip_types      text/plain application/xml text/css application/javascript;
  gzip_min_length 1000;
      location / {
       expires $expires;
       proxy_redirect                      off;
       proxy_set_header Host               $host;
       proxy_set_header X-Real-IP          $remote_addr;
       proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto  $scheme;
       proxy_read_timeout          1m;
       proxy_connect_timeout       1m;
     proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
}
```


listenはポートになります。通常は80番ポートにしてください。もしユーザーが他のポートでアクセスする場合は普通は、URLの最後にポートが必要になります。例：sankou.com:84

server_nameがホストマシンのIPアドレスです。もしドメインを取得している場合は、代わりにここにドメインを記載します。

proxy_passがPM2のアプリが起動しているURLを記載します。デフォルトで:3000なのでそのままでOKです。

ではNginxのテストをします。


```bash
sudo nginx -t
#必要に応じてコンフィグファイルの再読み込み
sudo systemctl reload nginx
```


OKがでれば問題なしです。


## **ファイヤーウォール**

もし80番ポート以外で設定した場合はポートを開けておくようにしましょう。


```bash
ufw status
sudo ufw allow 84/tcp
#80番が空いていない場合
sudo ufw allow 80/tcp
sudo ufw reload
#ファイヤーウォールが起動していない場合
sudo ufw enable
```



## **デプロイの確認**

これでサイトのデプロイができました。

一応、このような感じになりました。

![alt_text](https://asameshicode.com/wp-content/uploads/2023/01/image-14-300x238.png)


お疲れ様です。