rdlabo/netlify_build_angularを公開しました。タイトルの通り、AngularをNetlifyという高機能ホスティングサービスで使うためのビルドファイルです。
やることは、次の4つです。
-
robot.txtを生成します - wwwつきURLに自動的にリダイレクトするための
_redirectsを生成します - ServerPushするための
_headersを生成します - CSSをインライン化します
Angularは、ビルド時にビルドファイルを生成するフォルダを再生成します。また、--prodがつくと、ファイル名に乱数がつくようになります。（main.jsがmain.f1ec16ef52a78f4177f7.jsになるなど）
ですので、自動デプロイする場合、Netlify上でこれらのファイルを動的生成する必要があります。
どう使うか
レポジトリにあるnetlify.build.jsをダウンロードしてプロジェクトフォルダのトップディレクトリに設置してください。package.jsonやangular.jsonとかと同じ階層です。
その後、L19-L26までをあなたの環境に変更してください。例えば、Ionic v4でしたらpublicDirはwww/になりますし、appDomainはあなた自身のドメインに変更してください。
debug = true は、確認用ファイルを生成します。_redirects、_headersはNetlify上ではアクセスできないので、同じ内容のファイルをそれぞれredirects.txt、_headers.txtで生成します。falseにすると生成しません。
設定が完了したら、Netlifyのビルド時の設定を行います。
こんな感じで、node netlify.build.js を追加してください。この状態で自動ビルドを走らせると、自動的にAngularをビルドしたあと、この設定ファイルに従ってビルドを行ってくれます。
これらの設定の効果
1. robot.txtを生成します
Lighthouseの点数が高くなります。Google botに、このサイトはインデックスしていいよーと教えてあげる内容です。
If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed.
https://www.rdlabo.jp/robots.txt といったファイルが生成されます。
2. wwwつきURLに自動的にリダイレクトするための _redirects を生成します
Netlifyではwwwなしのドメインも使うことができますが、wwwつきの利用が強く推奨されています。wwwをつけると、
Netlify’s powerful CDNを使うことができます。
https://www.netlify.com/docs/custom-domains/
https://angular-default-sample.netlify.com/redirects.txt が生成されます。
3. ServerPushするための _headers を生成します
HTTP/2 の新機能「サーバープッシュ」は、次のリクエストが来る前に必要となるコンテンツをクライアントへ送信可能です。
https://developers.google.com/web/fundamentals/performance/http2/?hl=ja#_7
https://angular-default-sample.netlify.com/headers.txt といったファイルが生成されます。
4. CSSをインライン化します
ページの読み込み速度が上がると、ユーザ エンゲージメント、ページビュー、コンバージョン率の向上につながります。ページを高速で読み込むには、初回ペイント時に必要なスクリプトやリンクをインライン化して、それ以外の要素は後回しにします。
https://developers.google.com/web/tools/lighthouse/audits/blocking-resources?hl=ja
おわりに
なお、弊社サイトではPHPでごにょごにょしてたのですが、公開するためにNode.jsで書き直しました。Angularを公開するためのビルドファイルなので、こっちのほうがしっくりきますねｗ
Ionicプロジェクト用のものはIonic-sub CLIに直接組み込む予定です。
それでは、また。