Vue + Router製の静的WebアプリをApp HostingにCLIでデプロイする手順

Vue + Router 製の静的WebアプリをApp HostingにCLIでデプロイする手順

App Hostingとは

App HostingはFirebase Hostingの進化版で、Cloud Functionsと連携しながらNext.jsやVueの静的アプリの実装を支援するホスティングプラットフォームだ。

特に、SSRを必要としないSPA(単一ページアプリ)のホスティングに最適だぜ。

読者

Firebase Hostingと何が違うの？

App Hostingは再帰性の高いCLIやPreview Channel、ドラフトPR連携といった強力なDX支援が付いてくる。

Firebaseの製品として統合されているから、Auth / Firestore / Functions との連携も楽だしな。

ごりら

機能はほぼFirebase Hostingの上位互換だな。これからはApp Hosting主活やで

Vue Router SPA を用意する

Vue CLI またはViteで生成したSPAプロジェクトの生成物を、App Hostingに置き換えるだけなんだけど、一点だけ注意。

Vue Routerを使ってる場合、ビルド後の各パスに対応する rewrite 設定が必須になるで。

読者

それ設定しないとどうなるの？

リロード時に404になっちまうんだな。

SPAではルートをクライアント側で管理してるから、サーバー側は全てindex.htmlを返す必要があるわけよ

ごりら

これをApp Hosting側で設定するために “rewrites”設定が重要なわけよ

CLI からデプロイする流れ

次の手順で実行すればOK:

読者

最初にやるべきことは？

# 1. CLI ツールのインストール
npm install -g firebase-tools

# 2. ログイン
firebase login

# 3. プロジェクトインシャライズ
firebase init hosting:github
# → Vue 生成物(dist or build)を配置してあるディレクトリを指定

# 4. rewrite 設定をfirebase.jsonに追加
{
  "hosting": {
    "public": "dist",
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

# 5. デプロイ
firebase deploy --only hosting

まとめ

Vue + Router で作ったSPAはApp Hostingと相性が良い。

CLIからの操作でGitHub PR連携も可能なので、開発の実用性も高いよ。

ごりら

…