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

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



確認並安裝 Firebase CLI

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

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



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



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




初始化專案

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




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





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


在詢問是否開始進行,輸入 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

接下來我們要進行部署,輸入:





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