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

2021/02/07

#Vue.js/Nuxt.js

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


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js