今回はNuxt.jsのアプリをnginxでデプロイする方法を書きます。
環境
OS:Ubuntu
Webサーバー:Nginx
プロセスマネージャー:PM2
アプリの作成
今回は試しにデプロイするだけなのでジェネレーターで生成された状態でそのままデプロイします。
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?
0
コメント