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

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

■ Firebaseのインストール

■ プロジェクト作成

■ Firebase設定

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

firebase.jsonをいじる。

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

■ Cloud function設定

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

■ デプロイ

cloud function実行確認

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

Firebase管理画面

・Hosting

・Functions

■ 所感

Firebaseめちゃ簡単。

■ 次にやること

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

Nyle Engineering Blog

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

Nyle Engineering Blog

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

ta9to

Written by

ta9to

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

Nyle Engineering Blog

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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