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ツールによりコンテンツの配置を行ったりするとなお良いかと思います。