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のインストール

Add Firebase to your JavaScript Project | Firebase

■ プロジェクト作成

Creating a Project | Vue CLI 3

$ vue create sample

$ yarn serve

■ Firebase設定

$ firebase init

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

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めちゃ簡単。

■ 次にやること

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