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

ta9to
ta9to
Nov 16, 2018 · 4 min read
  • 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のインストール

■ Firebaseのインストール

■ プロジェクト作成

$ vue create sample
Image for post
Image for post
$ yarn serve
Image for post
Image for post

■ Firebase設定

$ firebase init
Image for post
Image for post

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

firebase.jsonをいじる。

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

■ Cloud function設定

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

■ デプロイ

$ firebase deploy
Image for post
Image for post
Image for post
Image for post

cloud function実行確認

Image for post
Image for post

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

Firebase管理画面

・Hosting

Image for post
Image for post

・Functions

Image for post
Image for post

■ 所感

Firebaseめちゃ簡単。

■ 次にやること

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

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

ta9to

Written by

ta9to

電子コミックストア開発中 https://manga.app-liv.jp

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

ta9to

Written by

ta9to

電子コミックストア開発中 https://manga.app-liv.jp

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store