2022年1月23日
SSR設定をしたNuxt.jsアプリをApacheのリバースプロキシで公開する
前提
環境
- AWS EC2インスタンス(その他のVPS/専用サーバでも可)
- Apache (VirtualHost)
要件
- VirtualHostで複数のサイトを稼働済
- 既存サイトのサブディレクトリとして稼働させたい(例えば、
www.hoge.com
に対してwww.hoge.com/nuxt_app/
のようにしたい。) - 時間の都合上追加機能のみNuxt.jsで作成(SSR)
いろいろ突っ込みどころがあるかとは思いますが、今回はこのような状況下での作業を行いました。
Nuxt.jsでアプリを作成する
Nuxt.js公式の手順通り下記のコマンドを実行しローカルで動作することを確認してください。
npx create-nuxt-app nuxt_app
cd nuxt_app
npm run dev
nuxt_appの部分は、ご自分のプロジェクト名に置き換えてください。
今回のように、既存サイトのサブディレクトリとして、Nuxt.jsアプリを実行したい場合はnuxt.config.js
を以下の様に修正する必要があります。
export default {
router: {
base: '/nuxt_app/' // .envに記載する場合は、 process.env.BASE などとする
}
// その他の設定
}
baseの設定値を.env
などに記載し、環境ごとに切り替えれる様にしても良いかと思います。
Nuxtv2.13以降は、dotenv
を別途インストールしなくてもよくなっているので、すぐに設定可能です。
Nuxt.jsアプリをデプロイ
稼働中のVPSまたは、専用サーバにNuxt.jsをデプロイしてください。 本来は、CDツールを利用する方法がよいかと思いますが、今回はgit cloneで配置しました。 他にもFTPツールで配置するなど、手法はなんでも良いです。 配置する先は、既存のWebサイトのディレクトリ配下ではないところに配置した方がよいです。
#例
/var/www/
┝www.hoge.com # http://www.hoge.com/
└nuxt_app # http://www.hoge.com/nuxt_app/
配置後、エラーがなく実行出来ることを確認します。
# devDependenciesを利用しない場合は、 npm install --production
npm install
npm run build
npm run start
特に設定を変更していないので、Listening: localhost:3000
になるかと思います。
Apacheリバースプロキシの設定
httpd.conf
にProxyディレクティブの設定を行います。
<VirtualHost *:80>
DocumentRoot /var/www/www.hoge.com
# 細かい設定は省略
# 以下プロキシ設定
<Proxy *>
Require all granted
</Proxy>
ProxyRequests Off #フォワードプロキシを利用しないので、オフ
ProxyPreserveHost On
ProxyPass /nuxt_app/ http://localhost:3000/nuxt_app/ keepalive=On
ProxyPassReverse /nuxt_app/ http://localhost:3000/nuxt_app/
</Virtual>
上記設定を行った後reload
等でApacheに設定を読み込ませることでhttp://www.hoge.com/nuxt_app
でNuxt.jsアプリに接続可能になります。
この後は、pm2を用いてnode.jsをデーモン化したり、CDツールによりコンテンツの配置を行ったりするとなお良いかと思います。