如何將 Vue 發佈到 Firebase ?

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

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

建立 Firebase Project

1. 點擊 Add project 建立 Firebase Project

controller-controller terms
Create project

• 專案建立中

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

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

使用 Vue CLI 建立 Vue Project

$ vue create vue-firebase

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

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

安裝 Firebase CLI

$ npm install -g firebase-tools

使用 NPM 安裝 firebase-tools 。

登入 Firebase

$ firebase login

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

建立 Firebase Hosting Project

vue-firebase $ firebase init hosting

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

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

firebase init hosting

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

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

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

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

建立 Vue 發佈檔案

vue-firebase $ yarn build

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

在本機執行 Firebase

vue-firebase $ firebase serve

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

firebase serve
http://localhost:5000

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

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

發佈到 Firebase

vue-firebase $ firebase deploy --only hosting

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

firebase deploy --only hosting
https://vue-firebase-93bb0.firebaseapp.com

1. 順利發佈到 Firebase

Conclusion

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