續上篇
將專案交出的幾天後，坐在對面的我主管突然起身對我說：“這專案要怎麼架起來啊？”
我：

我一邊在心裡嘀咕：「不是平常都是你在 deploy 嗎？」，一邊走到他身邊查看邊說：「那個 build 一下就好了～」

「蛤？那是什麼？」
「蛤？你說什麼？」

再過了幾天，坐在對面的我主管又起身對我說：「你可以自己載一下 XAMPP 自己把專案架起來嗎？」
「蛤？」

雖然之後順利將專案架起來，但有個比較資深的同事飄到我旁邊，幽幽的說：「都用到 Firebase 了，幹嘛不直接架在上面呢？」

1. 施展地獄業火的魔法第一步：build 專案～

   npm run build
   

2. 施展地獄業火的魔法第二步：在專案中安裝 firebase-tool

   npm install firebase-tools --save-dev
   

3. 施展地獄業火的魔法第三步：Firebase 初始化

   • 登入 firebase

     npx firebase login
     

     這個命令會打開你的預設瀏覽器，並提示你使用 Google 帳戶進行登錄。登錄成功後，你會看到 CLI 提示 "Success! Logged in as [your-email@example.com]"。

   • 執行初始化命令

     npx firebase init
     

     從這裡會開始問一系列的問題與設定：

     i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
     ?  Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?
     

     Firebase CLI 問你是否允許收集 CLI 和模擬器套件的使用和錯誤報告資訊。這些數據會根據 Google 的隱私政策進行收集，用於改進產品，但不會用於識別你個人。
     你可以根據自己的意願選擇：
     選擇「Yes」：允許 Firebase 收集這些數據。
     選擇「No」：拒絕收集數據。

     ? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. 
     Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
     ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
     ◯ Firestore: Configure security rules and indexes files for Firestore
     ◯ Functions: Configure a Cloud Functions directory and its files
     ❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
     ◯ Storage: Configure a security rules file for Cloud Storage
     ◯ Emulators: Set up local emulators for Firebase products
     ◯ Remote Config: Configure a template file for Remote Config
     

   選擇要使用的功能，選擇 Hosting。

   === Project Setup
   First, let's associate this project directory with a Firebase project.
   You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project.
   ? Please select an option: (Use arrow keys)
   ❯ Use an existing project 
   Create a new project 
   Add Firebase to an existing Google Cloud Platform project 
   Don't set up a default project 
   

   選擇如何將當前的專案目錄與 Firebase專案相關聯，選擇使用現有的專案。

   === Hosting Setup
   Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory.
   ? What do you want to use as your public directory? (public) 
   

   需要指定一個目錄來存放要部署到 Firebase Hosting 的靜態資源，預設選項是 public。

   ? Configure as a single-page app (rewrite all urls to /index.html)? 
   

   這個問題是詢問你是否要將所有的 URL 重寫為 /index.html，這通常是為了支持單頁應用程式（Single-Page Application, SPA）在 Firebase Hosting 上正確運行。
   如果你使用的是單頁應用程式（例如使用 React、Angular、Vue.js 等），選擇 Yes。
   如果你使用的是多頁應用程式或傳統的靜態網站，選擇 No。

   ? Set up automatic builds and deploys with GitHub? 
   

   這個問題是詢問你是否要設置自動構建和部署，通過將你的 Firebase 專案與 GitHub 連接，實現當你將代碼推送到 GitHub 時，Firebase 自動構建並部署你的應用程式。

   • 如果你選擇 Yes，Firebase 會引導你完成以下設置步驟：
     • GitHub 連接：授權 Firebase 訪問你的 GitHub 帳戶，並選擇一個存儲庫進行連接。
     • 選擇分支：你可以選擇要監控的分支（例如 main 或 master），每當你將代碼推送到這個分支時，Firebase 會自動進行構建並部署。
     • 設置 GitHub Actions：Firebase 會自動生成一個 GitHub Actions 工作流文件，這個文件會定義自動構建和部署的過程。
   • 如果你選擇 No，你仍然可以手動使用 firebase deploy 命令來部署你的應用程式。這可能更適合那些不需要或不希望設置自動化流程的小型項目或個人項目，我選擇這個選項。

   ? File build/index.html already exists. Overwrite? (y/N) 
   

   這個提示告訴你 build/index.html 文件已經存在，並詢問你是否要覆蓋它。選擇Ｎ！！！！！！

   • 選擇 y（Yes）：
     覆蓋文件：如果你想使用 Firebase CLI 生成的新 index.html 文件，選擇 y 來覆蓋現有的文件。這通常會發生在初始化 Firebase Hosting 設定時。
   • 選擇 N（No）：
     保留現有文件：如果你不想覆蓋現有的 index.html 文件（通常因為它已經是你應用的主頁面），選擇 N 來保留這個文件。

   i  Writing configuration info to firebase.json...
   i  Writing project information to .firebaserc...
   
   ✔  Firebase initialization complete!
   

   終於完成初始化了～（啊呼～

4. 施展地獄業火的魔法第四步：Firebase部署

   npx firebase deploy
   

   Deploy complete! Project is live at https://your-project-id.web.app
   

   出現這個訊息後，就代表完成了～可以點入網址看看囉～因為這裡我選擇使用手動部署，如果之後專案有更新，需要重新build一遍，再登入 firebase，然後不用再進行初始化，直接輸入 npx firebase deploy 即可完成重新部署。

   這個故事的最後，我利用 Edge 瀏覽器開啟網址，右鍵選擇將網址轉為 QR code 交出去。我對於這個專案可以用在未來的活動上滿懷期待，但事實上是什麼，完😡全😡沒😡用😡到！！！！！！！真的很想用地獄業火轟爛我主管！！！！！！那當初幹嘛趕著我快點寫出來，最後專案卻完全作廢，還被我發現他不懂 build（之後發現更多他不懂的基本觀念，有機會再提我好累），到底！！！！！！！