[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を実現できます。

    HTTP/2 Server Push on Netlify

    /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ができるようになります。

    Issue / PRお待ちしています

    さっき作って自社プロダクトのdev環境にいれたばかりのプロダクトです。かなりLGTM(俺さえ良ければいい)な実装にっているところもあると思いますので、ぜひ試して気になる点や要望を教えていただければと思います。

    Github: https://github.com/hideokamoto/cran-push

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark