Next.jsでexportしたassetがロードされない
問題
Next.jsでexportしたindex.htmlをserveコマンドなどで利用した時に、そこから読み込まれるファイルが存在するにもかかわらずが404になる npm run devでnodeでホストした場合にこれは起こらない
原因
index.htmlが絶対pathでexportするから
構造がこんな感じ
code:_
client
L out
L _next
L index.html
ここで
code:index.html
<link rel="preload" href="/_next/static/94Y3wn5FvXbQuzNUMi0en/pages/index.js" as="script"/>
のように絶対pathでアセットが指定されている
これは実際にはclientをrootとして読みに行く(client/_nextを見に行く)
解決策
1. nodeでホストする
2. ❌出力したindex.htmlを相対pathに書き換える
自動化できない or やるとしても限りなく泥臭くなる ので却下
Next.jsが改善しない限りこの方法は取れないが上でも述べたとおりやられなさそう 3. 成果物のうち_nextをclient以下に置く
この場合、LaravelのRoutingを行った場合、JSが読み込まれないことが判明
これはLaravelのpublic以下に同様の構成をする or publicにリソースをおくことでうまくいった
1. nodeでホストする
注意:以下の方法は手元では動いたけどデプロイまではしていないので不完全kadoyau.icon
途中でこの構成はHerokuではあまりしたくないと判断してやめてしまった
理由:過度に複雑になる。クライアントとバックエンドを別アプリにするのがHerokuの方法に思う
アプリを立てるごとにお金がかかるので、コストのために頑張る道はありうる
戦略
code:package.json
"pm2-dev": "pm2 start npm --name 'next' -- run dev",
nginxのリバースプロキシの設定をする
code:bash
vim /etc/nginx/conf.d/nginx.conf
// 設定を書く
// 反映
systemctl restart nginx
// vagrantユーザの初期パスワードはvagrant
code:nginx.conf
server {
server_name homestead.test;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
このままだとすべてNextにいってしまってAPIがたたけない
1. ドメインとってDNSの設定してsubdomainでだしわける
2. pathで出し分ける
1はドメインが必要なので2
code:nginx.conf
server {
server_name homestead.test;
listen 80;
location ~ ^/client(.*)$ {
resolver 127.0.0.1;
}
}
resolver入れないと503
これで homestead.test/clientにアクセスすると以下のエラーが出る
2019/02/21 21:02:17 [error] 24183#24183: send() failed (111: Connection refused) while resolving, resolver: 127.0.0.1:53
dnsmasqを入れると問題ないらしい