netlify-cliでnetlify.tomlのredirect設定をテストする

動作確認したバージョン

  • netlify-cli 11.8.0
  • @netlify/framework-info 9.2.0

Netlifyの設定をlocalで確認したい

Netlify は静的サイトのホスティングサービスだが、CDN 込みで、redirect, reverse proxy や独自 Header の設定が可能となっている。

この機能は非常にありがたく、netlify.toml などにちょっと設定を書くだけでコンテンツの再編に耐えられる。

この設定を deploy する前に local で確認したいのが人情というものだが、これには

netlify/cli: Netlify Command Line Interface

が利用できる。

netlify dev

とするとマジカルに local の静的サイトジェネレータを detect して起動してくれる1。あとは netlify-cli の方の port （default で 8888）にアクセスすれば Netlify 上の動作をエミュレートできる。

Netlifyの設定をtestしたい

手動で確認する分には

netlify dev

で Netify 上の動作を丸ごと再現すればよいが、テストについては場合によって動作を変えられる方が都合がよい。

もちろん e2e でテストしたい場合は静的サイトジェネレータの full build が必要になるが、静的サイトは場合によってはかなり大規模になる可能性もあり、full build には多くの時間が必要となり、テストの自動実行、CI と相性が悪くなる。

しかし Netlify 用の設定だけをテストしたいのであれば静的サイトジェネレータ側の動作は不要になる。この場合は netlify-cli が呼び出す framework を空っぽなものに置き換えてしまうとよい。

netlify dev には -c で起動するコマンドを指定する機能があるので、

netlify dev -c "[npm|yarn] run static-server"

とすることで、中身をすげ替えることができる。static-server は netlify-cli が依存しているシンプルな HTTP サーバなので、netlify-cli をインストールしてあるなら必ず使える。

実際には以下のように

BROWSER=none netlify dev -c "[npm|yarn] run static-server" --targetPort 9080
  1. browser を開こうとする動作を抑止
  2. 起動するサーバが listen する port を指定して proxy 先のサーバに接続できるように

する必要がある。2

これで Netlify 側の動作だけになり、実際のサイト側の開発サーバの起動時間と余計な動作をカットできた。

これをテストコードともに起動する、テストコードの中から起動するなど、どうにかして netlify サーバを起動して、この起動したサーバに対して HTTP リクエストを投げるとテストを実行できる。

  1. 実際には @netlify/framework-info で定義されている framework に対して npm scripts として dev, serve, develop, start, run, build, web のいずれかの名前でサーバを起動する設定が必要。@netlify/framework-info 9.2.0 にて確認。 ↩

  2. 9080 は static-server の default port ↩

More