目的
当初目的: ローカルサーバ上でNextJSのHTTP/2カスタムサーバを動作検証予定であった。
以下のサンプルのインストールを行ったがレンダリング時にエラーが発生したため、暫定的にApache経由で公開するテストを行ったので、備忘録とする。
https://github.com/vercel/next.js/tree/canary/examples/with-http2
NodeJSでのHTTP/2カスタムサーバは動作確認はできている。
環境
RedHat Enterprise Edition 8.7
Node v19.4.0
作業概要
ApacheのSSL, HTTP/2, 証明書等の設定は実施済のものとする。
DocumentRootは/www/html/とする。
1. packege.jsonを修正
- "build": "next build",
+ "build": "next build && next export",
2. next.config.jsにimagesを追加
const nextConfig = {
reactStrictMode: true,
+ images: {
+ unoptimized: true
+ }
}
上記設定で生成されるファイルは、ApacheのDocumentRootに関連するファイルが配置される前提となる。
プロジェクト毎のサブディレクトリにまとめる場合は、next.config.jsに設定を追記する。
const prefixPath = '/sub_dir'
const nextConfig = {
+ assetPrefix: prefixPath,
+ basePath: prefixPath,
reactStrictMode: true,
images: {
unoptimized: true
},
}
3. ビルドおよび結果のコピー
$ npm run build
$ cp -pr out/* /www/html/
サブディレクトリを指定する場合
$ cp -pr out /www/html/sub_dir
これでApache経由でHTTP/2で参照できる。
ToDo
動的ページのApache経由での公開方法
NextJSでHTTP/2カスタムサーバの構築
Vercelにdeployしてwith-http2カスタムサーバが動作するか確認する。動作するなら環境の違いの切り分け。
参考にしたサイト
https://qiita.com/masakinihirota/items/99054b9f9cf428881617
https://github.com/vercel/next.js/tree/canary/examples/with-http2
https://zenn.dev/chot/articles/99ae6acca1429b
他にもNextJSでHTTP/2カスタムサーバの設定中に参照したサイトはありますが、URLを失念しました。