[Firebase] 使用 Firebase CLI 將靜態網站部署至 Firebase Hosting

若有靜態網站需要部署至線上並進行測試，Firebase Hosting 是一個不錯的選擇。簡單整理一下整個執行流程，提供給有需要的朋友參考，若有錯誤或任何建議，請各位先進不吝提出。整體操作流程如下：

1. 已有 Firebase 專案，或建立一個新專案 (請參考 Firebase 介紹與建立專案)

2. 確認是否有安裝 Firebase CLI

3. 登入與初始化專案 (firebase init)

4. 部署靜態網站至 hosting (firebase deploy)

確認並安裝 Firebase CLI

在開始之前，你需要先確認是否有下載並安裝 Firebase CLI，安裝方式如下：

1. 直接下載安裝檔案進行安裝 (下載二進制)

2. 透過 npm 指令：你需要先安裝 Node.js ，然後透過下列指令安裝

npm install -g firebase-tools

view raw install_firebase_tools.txt hosted with ❤ by GitHub

完成後，即可以開始 初始化專案

初始化專案

開啟命令列，切換目錄到您要部署的資料夾內

輸入指令，我們先進行登入程序，輸入指令

firebase login

view raw firebase_login.txt hosted with ❤ by GitHub

接下來我們要將本地專案與 Firebase Hosting 進行連結，首先我們先進行初始化流程，輸入指令：

firebase init

view raw firebase_init.txt hosted with ❤ by GitHub

在詢問是否開始進行，輸入 Y，按下 Enter

選單部分，移動至 Hosting: Configure and deploy firebase hosting sites 按下 空白鍵 選取，按下 Enter 鍵

選擇 Use an existing project

若出現錯誤 (無權限)，可以使用指令 firebase login --reauth，重新登入 (時效約1小時)

選擇你目前已經存在的專案。請依據需求設定:

這裡預設你的上傳目錄為 public (若使用預設的 public，即會在目前目錄新增一個 public 資料夾)，若你要上傳已存在的目錄，即輸入已存在的資料夾即可。請依據需求設定:

系統會貼心地問你是否要要幫你設定 single-page app? (幫您建立個 index.html，並且在設定檔案內幫你將所有 url 轉移至這個 index.html)。請依據需求設定:

系統會幫您建立 firebase.conifg (Firebase Hosting 設定檔案)，即完成設定。

你可以打開 firebase.config 檢視設定

部署至 Firebase Hosting

接下來我們要進行部署，輸入：

firebase deploy

view raw firebase_deploy.txt hosted with ❤ by GitHub

部署完成後，即可輸入網址進行測試