Vue CLI 3.0でつくるwebアプリをfirebaseでホスティングする
Published in
4 min readNov 16, 2018
- 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めちゃ簡単。
■ 次にやること
トークン配ったクライアントのみリクエストできるPOSTの書き込みAPIを用意してFirebase Databaseに書き込みする機能を実装します。