Apacheを介して、NextJSプロジェクトにアクセスする。

NextJSのプロジェクト(next_app)をApacheを介して/next/として公開する。

説明	パス
NextJSのプロジェクトディレクトリ	/www/js/next_app/
URL	http://xxx.local/next/

作業目的

1. クライアントとの通信プロトコルをHTTP/2にする試験(NextJSでHTTP/2カスタムサーバを作成した場合、処理の最適化がされないとの記事を読んだため)
2. 複数プロジェクトを同一サーバで動作させるときに、ディレクトリ名を変えて公開するための下調べ

作業内容

Apacheにproxy設定を行う

httpsで公開する場合はextra/httpd-ssl.confに追加する

httpd.conf

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

ProxyRequests Off
<Location /next_test/>
    ProxyPass        http://localhost:3000/
    ProxyPassReverse http://localhost:3000/
</Location>

# systemctl restart httpd

Nextのプロジェクトをビルドする

$ cd /www/html/next_app
$ vi next.config.js

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    assetPrefix: "/next",
    basePath: "",
    reactStrictMode: true,
    images: {
        unoptimized: true
    },
}
module.exports = nextConfig

$ npm run build
$ npm start

備忘録

basePathはNextJSのプロジェクトディレクトリなので空白にする。
assetPrefixはbuildの生成結果が参照するディレクトリなので、/nextを設定する。

これで、JS,画像ファイルのリンクは/next/で始まるので、Apacheから参照できる。