[cran-push]Create React Appで作ったSPAをNetlifyでHTTP2 Server PushできるようにするCLIツールを公開しました

2019年1つ目のプロダクトもやはりニッチな俺得案件でした。 Netlifyでは_headersというファイルを使うことで、HTTP2 Server Pushを実現できます。 HTTP/2 Server Push on […]

2019年1つ目のプロダクトもやはりニッチな俺得案件でした。

Netlifyでは_headersというファイルを使うことで、HTTP2 Server Pushを実現できます。

/server-push-path
  Link: </js/example-script.js>; rel=preload; as=script
  Link: </css/example-style.css>; rel=preload; as=style

しかしCreate React Appで構築したReact SPAでは、ビルド後のファイルにハッシュが入るため、パスを動的に作る必要があります。

/*
  Link: </static/css/main.8311bcb9.css>; rel=preload; as=style
  Link: </static/css/main.8311bcb9.css.map>; rel=preload; as=style
  Link: </static/js/main.06dd9b2a.js>; rel=preload; as=script
  Link: </static/js/main.06dd9b2a.js.map>; rel=preload; as=style

npm run buildの度にハッシュが変わるため、ビルドする際にこのファイルを動的に更新しなければなりません。

と、いうことでCLIツール化しました。

npm i -g cran-push

名前はCreate React App for Netlify server Pushを適当に簡略化したものです。Commander.jsを使ってCLIにしました。

Create React Appで作られたアプリは、おおよそこんなディレクトリ構成です。

$ tree -L 2 -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.js
│   ├── App.test.js
│   ├── index.js
└── yarn.lock

public/ディレクトリに_headersファイルを配置します。

/*
  Link: </service-worker.js>; rel=preload; as=script

この状態で、以下の様にコマンドを実行しましょう。

$ npm run build
$ cran-push generate

実行後のディレクトリ構成はだいたいこうなります。

$ tree -L 2 -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── build
│   ├── _headers
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── service-worker.js
├── public
│   ├── _headers
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.js
│   ├── App.test.js
│   ├── index.js
└── yarn.lock

buildディレクトリにビルドしたファイルが配置されます。そしてcran-pushによって_headersファイルにビルドされたJS / CSSファイルが追加されます。

/*
  Link: </service-worker.js>; rel=preload; as=script
  Link: </css/main.8311bcb0.css>; rel=preload; as=style
  Link: </css/main.8311bcb0.css.map>; rel=preload; as=style
  Link: </js/main.e38f9055.js>; rel=preload; as=script
  Link: </js/main.e38f9055.js.map>; rel=preload; as=style

Circle CIやNetlifyのビルドコマンドにcran-push generateを入れることで、簡単にHTTP2 Server Pushができるようになります。