[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
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ができるようになります。
Issue / PRお待ちしています
さっき作って自社プロダクトのdev環境にいれたばかりのプロダクトです。かなりLGTM(俺さえ良ければいい)な実装にっているところもあると思いますので、ぜひ試して気になる点や要望を教えていただければと思います。