StencilJSサイトをFirebase Hostingでデプロイする方法

本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の記事です。

---

Webコンポーネント出力ライブラリの StencilJS ですが、ルーターももっており、これひとつでWebアプリをつくることもできます。またprerender機能ももっており、SSGでWebサイトを出力することも可能です。

実際にStencilJSのWebサイトはStencilJS自身で作成されております。

https://stenciljs.jp/

なのですが、ローカル環境で稼働を確認して、初期設定のままFirebase Hostingにデプロイすると、一部のファイルが404 Not Foundになったため、改善方法を書いておきます。

まず、StencilJSの出力からハッシュをとりのぞいて、また同時にキャッシュコントロールするためnoCacheで設定します。 stencil.config.ts を以下のように設定します。

  export const config: Config = {
+   hashFileNames: false,
+   enableCache: false,
    globalStyle: 'src/global/app.scss',
    globalScript: 'src/global/app.ts',

また、firebase.jsonは以下のように設定します。prerenderしても、SPAなのでrewriteが必要です。

{
  "hosting": {
    "public": "www",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

簡単ですね。 それでは、また。