Vue CLI 3.0でつくるwebアプリをfirebaseでホスティングする

  • Vue CLI 3.0
  • Firebase Hosting
  • Cloud Functions for Firebase

↑の3つを触りたくて

  • Vue CLI 3.0のcreateコマンドで生成したvueアプリケーションの雛形をfirebaseにデプロイする
  • ↑でデプロイした環境の/api/**へのリクエストをexpressで書いたAPI実装を実行するCloud functionsへプロキシする

をやってみたのでそれのログ記事です。

■ Vue CLI 3.0のインストール

https://cli.vuejs.org/guide/installation.html

■ Firebaseのインストール

■ プロジェクト作成

$ vue create sample
$ yarn serve

■ Firebase設定

$ firebase init

FunctionsとHostingを使うのでその2つを選ぶ。

firebase.jsonをいじる。

  • public:ホスティングするドキュメントルート指定
  • rewrites:ホスティングした環境のパスごとにcloud functionを実行したり指定の静的ファイルを返したりする設定

■ Cloud function設定

  • expressでAPI実装
  • firebase-functionsのhttps.onRequestでcloud functionに登録

■ デプロイ

$ firebase deploy

cloud function実行確認

/api以下のリクエストでcloud functionを実行した結果を確認できます。

Firebase管理画面

・Hosting

・Functions

■ 所感

Firebaseめちゃ簡単で良いです。

GCPのAppEngineでAPIをPHP、フロントをnuxtで書いてそれぞれPHPとnodejsのstandard環境でデプロイしてる個人開発のアプリがあったのですが、サーバレスにしたいと思っていたのでこれを機にFirebaseへ乗せかえることにしました。

nuxtはSSRしたかったので使ってたんですが、バニラなVueアプリケーションでもやろうと思えばSSRできるしぶっちゃけSSRしなくてもちゃんとインデックスされてる事例とかいっぱいあってGoogleBotに忖度してコスト払ってSSRで置いとくのがビジネスならともかく個人開発のアプリならいったんno SSRのSPAで組んで出しといてインデックスで支障があったらその時SSR考えればいいやということにしてシンプルに公式のVue CLIで管理できる状態に書き換えようと思いました。

■ 次にやること

トークン配ったクライアントのみリクエストできるPOSTの書き込みAPIを用意してFirebase Databaseに書き込みする機能を実装します。