Firebase 也可無痛整合 Vue

Firebase 是個前端 Friendly 的 BaaS,整合 Hosting、Realtime NoSQL、Storage、Authentication 與 Cloud Functions,還有很好用的 SDK,是 MVP 理念的最佳實踐,本文以 Vue 為範例,探討如何快速發佈到 Firebase。

Version


Vue 2.5.21
Vue CLI 3.3.0
Firebase CLI 6.3.0

登入 Firebase


vue000

  1. 以 Google 帳號登入 Firebase,點選 GO TO CONSOLE

建立 Firebase Project


vue001

  1. 點擊 Add project 建立 Firebase Project

vue002

  1. 輸入 project name
  2. 接受 controller-controller terms
  3. 按下 Create project 建立 Firebase 專案

vue003

  • 專案建立中

vue004

  1. 專案建立成功,按 Continue 繼續

vue005

  1. 我們可以發現 Firebase 提供了幾個前端最常用的功能,如 Authentication、Database、Storage、Hosting、Functions,可大幅增加前端開發效率

使用 Vue CLI 建立 Vue Project


1
$ vue create vue-firebase

由於本文重點是 Firebase,Vue CLI 建立 Project 步驟就略過。

vue006

  • 使用 Vue CLI 建立出一個普通的 Vue Project

安裝 Firebase CLI


1
$ npm install -g firebase-tools

使用 NPM 安裝 firebase-tools

登入 Firebase


1
$ firebase login

第一次使用 Firebase CLI,必須先登入 Firebase。

vue007

建立 Firebase Hosting Project


1
vue-firebase $ firebase init hosting

Firebase 擁有 Authentication、Database、Storage、Hosting、Functions 等多項功能,本文主要探討 Hosting 部分,所以只先建立 Hosting project。

進入 Vue 專案目錄,輸入 firebase init hosting 建立 Firebase hosting project。

vue008

  1. 在 Vue 專案目錄輸入 firebase init hosting 建立 hosting project
  2. 選擇剛剛在雲端所建立的 Firebase project

實務上有時候會抓不到雲端 project,可先選擇 create a new project,事後再使用 firebase use --add 加入雲端 project

vue009

  1. Firebase CLI 預設會以 public 作為發佈目錄,不過 Vue CLI 的 yarn build 是建立在 dist 目錄下,因此要將發佈目錄改成 dist

vue010

  1. 由於 Vue CLI 是使用 SPA 方式,因此必須 rewrite 到 index.html,輸入 y

vue011

  1. Vue CLI 為我們建立了 firebase.json.firebaserc 兩個設定檔

建立 Vue 發佈檔案


1
vue-firebase $ yarn build

在專案目錄下輸入 yarn build 建立發佈檔案在 dist 目錄下。

vue012

在本機執行 Firebase


1
vue-firebase $ firebase serve

在本機使用 dist 目錄下檔案執行 Firebase。

vue013

  1. 在 Vue 專案目錄下輸入 firebase serve
  2. Firebase Hosting 啟動在本機的 http://localhost:5000

vue014

  1. http://localhost:5000 執行 Firebase Hosting

雖然都是啟動在本機,但這與 Vue CLI yarn serve 啟動在本機 http://localhost:3000 意義不一樣,firebase serve 是 Firebase 在本機執行 dist 目錄下檔案,而 yarn serve 則是 webpack-dev-server 執行 src 目錄下檔案

發佈到 Firebase


1
vue-firebase $ firebase deploy --only hosting

Firebase 因為包含 Authentication、Database、Storage、Hosting、Functions 等多項功能,若只輸入 firebase deploy,會將所有功能一起發佈,會比較花時間,可以加上 --only 指定要發佈的功能以節省時間。

vue015

  1. 輸入 firebase deploy --only hosting 只發佈 hosting 功能
  2. 已經發佈到 https://vue-firebase-93bb0.firebaseapp.com

vue016

  1. 順利發佈到 Firebase

Conclusion


  • Firebase 可以很順利結合 Vue,只要將預設的 public 目錄改成 dist 目錄,並且 rewriteindex.html 即可
  • Firebase 可貴之處在於可先使用 firebase serve 在本機測試,不用一直發佈到雲端

Sample Code


完整的範例可以在我的 GitHub 上找到

2019-01-26