Next.js を GAE にデプロイする
最小
めちゃ簡単
code:package.json
{
...
"scripts": {
...
"start": "next start -p $PORT"
}
}
code:app.yaml
runtime: nodejs10
handlers:
- url: /.*
script: auto
secure: always
redirect_http_response_code: 301
_next/ 以下の静的ファイルのルーティング
今は静的ファイルも Next アプリケーションプロセスが返している
クライアントサイドから細かくリクエストされるのでインスタンスが瞬間的に立つことがある
https://gyazo.com/02974e81986069d9ec87fb9e06d94af2
code:app.yaml
- url: /_next/static
static_dir: .next/static
のようにするとアプリケーションへルーティングされず GAE から静的ファイルとして返される
費用にもパフォーマンスにも効く
https://gyazo.com/87d2f64c792e838121c13ec37c689773
デフォルトで Cache-Control ヘッダに max-age=600 がつく
レスポンスヘッダを見て cache-control: public, max-age=600 のものがそれ
静的ファイルのルーティング
bundle されて .next/static/ 以下に配置されるもの(css/ とか media/ とか)は配信されるが
public/ 以下のものは依然アプリケーションから配信されている
Next.js 9.1 から public/favicon.ico は /favicon.ico で配信できるようになった
1. ディレクトリ単位のマッピング
public/static/image.png のようなディレクトリに配置して static_dir を使う
素直だけど、アプリケーションからも /static/image.png のように参照しないといけなくなる
code:app.yaml-static
handlers:
- url: /static
static_dir: public/static
secure: always
2. ファイル単位のマッピング
構造そのままに GAE ハンドラ側で吸収する
拡張子などで
code:app.yaml-static_diles
handlers
- url: /(.*\.(gif|png|jpg|ico|svg|txt))$
static_files: public/\1
upload: public/.*\.(gif|png|jpg|ico|svg|txt)$
アップロードするファイルを減らす
build した結果と静的ファイルがあればよいので .gcloudignore で削る
code:.gcloudignore
# ignore all
/*
!/app.yaml
!/package.json
!/yarn.lock
!/public/
!/.next/
/.next/cache/* を ignore してもよいと思うが悪さもしなかろう
それはそうとしてビルドごとに .next 以下が太っていく