今回は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を再起動してブラウザから正しく表示されていれば完了です。