Nuxt.jsのアプリをnginxでデプロイする

Vue.js/Nuxt.js

2021.02.08

今回はNuxt.jsのアプリをnginxでデプロイする方法を書きます。

環境
OS：Ubuntu
Webサーバー：Nginx
プロセスマネージャー：PM2

サーバーはConohaのVPSサーバーを使っています。

アプリの作成
各種ソフトウェアのインストール
アプリを起動

アプリの作成

今回は試しにデプロイするだけなのでジェネレーターで生成された状態でそのままデプロイします。

npx create-nuxt-app sampleapp

生成できたらGithubにpushしておきます。

各種ソフトウェアのインストール

Node.js,npm
次のコマンドでNode.jsとnpmをインストールできます。

sudo apt update

sudo apt install nodejs

sudo apt install npm

nginx
＊公開後すぐに閉じる予定なのでファイアウォールはインストールしません。

sudo apt install nginx

サーバーのIPアドレスにアクセスしてWelcomeページが表示されていれば正常にインストールできています。
PM2

npm i -g pm2

アプリを起動

GithubからコードをUbuntu上に引っ張ってきます。

git clone https://github.com/ユーザー名/リポジトリ名

クローンできたらフォルダを移動してライブラリのインストール・ジェネレートを行います。

cd ファイル名
npm install
npm run generate

次にプロジェクトと同じフォルダにecosystem.config.jsを作成して次のように書きます。

module.exports = {
  apps: [
    {
      name: 'アプリ名',
      exec_mode: 'cluster',
      instances: 'max',
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

pm2で起動する場合は次のコマンドで起動できます。

pm2 start

Nginxの設定
vimで次の場所にある設定ファイルを開きます。

/etc/nginx/sites-available/default

次にlocationの中身を次のように書き換えて:wqで保存します。

location / {
    proxy_pass http://localhost:3000;
}

保存できたら

sudo systemctl restart nginx

でnginxを再起動してブラウザから正しく表示されていれば完了です。

参考サイト

Deploy Nuxt using PM2

How to deploy Nuxt.js with PM2 cluster mode enabled?