是的，如同標題所說，目前專案確實完成度沒有很高，但無論進度如何，今天就在挑戰的最後一天進行部屬吧！

如何使用 Vercel 部屬

1. 進到 Vercel 官網註冊與登入
2. 選擇自己的 git 版本控制選項(GitHub, GiLab 或其他)
3. 選擇自己的專案，跟著步驟開始 deploy
4. 成功部屬的話，就會看到以下畫面，並得到一組專案專屬網址
   以我的專案來說是：https://placeholder-kwat.vercel.app/
   

Firebase Hosting 服務

1. 在 Firebase Console 控制台中找到 Hosting 服務
   點選開始使用，跟著步驟進行設定
   

2. 確定有初始化過專案
   登入步驟在我的專案來說在一開始開新專案時就已做過，所以今天無須重複操作登入的部分。直接到專案的根目錄執行初始指令 firebase init。用上下箭頭將游標選到「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」，按下 space 鍵後再按 enter。
   

依序回答專案設定的一些問題，將初始化過程完成。
Q1：你要選擇哪個資料夾做為部屬使用的目錄資料夾？
A1：因為是 React 專案，到時候部屬完成會有一個 build 資料夾，所以這邊就選擇手打 build，並按下 enter 送出。

Q2：是否定義為 Single-page app (SPA) 專案？
A2：因為 React 專案就是，所以答 Y，並按下 enter 送出。

Q3：是否設定 GitHub 的自動化部屬？
A3：我目前設定為否，依個人選擇輸入後按下 enter 送出即可。

看到上面截圖畫面，就代表已經成功初始化了！也會看到 Firebase 在專案最外層新增了一個 .firebaserc 的檔案，用來連結對應的 Firebase 專案。

另外也會看到 firebase.json 檔案，裡面有剛剛進行初始化動作時所選擇的設定檔內容。

3. 使用 package.json 的指令先進行 React 的部屬化指令
   npm run build 成功後，就會看到 build 資料夾裡生成了必要檔案。
   

4. 部署至 Firebase 託管
   
   執行 firebase deploy 後，他會重複確認問2個問題，回答完成並成功部屬後，會在終端機畫面看到以下畫面。
   

重點就在最後一行，網站成功上線啦！
Hosting URL: https://placeholder-6a15c.web.app

5. 設定自訂網域
   進到頁面後，點選「新增自訂網域」。
   
   在跳出的彈出視窗中，輸入你購買的網域名稱(名稱就好)，送出等待。完成後依照提示到網域管理商編輯DNS設定即可。
   

Firebase Console 控制台設定

因為有串接 Firebase 的 Google, Facebook 註冊與登入，所以要記得至 Authentication 設定 domain，將自己購買的 domain 或剛剛在 Vercel 部屬成功的網址，這樣才能成功運行。

裡面會有原先讓開發者方便測試的本地 localhost，與 Firebase 提供給每個專案的兩組網址。

完賽心得

1. 使用技術

• 版本控制：Git, GitHub
• 前端技術：React.js
• 後端服務：Firebase
• 部屬服務：Vercel, Firebase Hosting
• 網域服務：Godaddy

2. 開源資源
   這次在實做的過程中，找到了適合自己、覺得實用的開放資源(都是免費的)，粗略如下與大家分享：

• Dicebear library：我會稱他為大頭貼集錦，有提供多種引用方式與款式。
• Hero Icon：因為有提供 outline, solid 和 mini 三種款式，圖案我覺得也夠用，所以沒有選擇更大型的 Font Awesome。
• Load Awesome：做 loading 的效果(直接提供 HTML, CSS)
• Storyset和 Illustrationkit ：如果需要替代圖或示意圖的話，這兩個網站提供非常多的現成圖片，並且也有提供顏色客製化，可以讓網站風格更一致。

3. 遇到的問題
   專案還有好多未完成的細節功能，根本說不完。覺得最大的問題是時程掌握的不太好，幾乎每天都是下班現產、壓底現發文章。除了學習如何做，還真的做出來，花時間 debug 找問題點，然後提交後再來寫文章記錄。除了中間割捨了一些功能，後面有一些頁面也簡化很多。但是從中能學習到一些資料庫的規劃與 API 的串接，真的讓身為前端工程師的我太有成就感了，可以說是愛上做 side project！

4. 相關專案連結

• GitHub repo
• Firebase 部屬網址

終於完賽了，這30天手機的螢幕使用時間大幅降低，直接變成每天3小時(應該算低吧)，每天都過得很充實，甚至通車時間都在準備每日進度(大部分時候早上出門上班時會想好今天想做什麼，午休列一下自己不會的項目，下班回家搭車時就趕快上網現學)。無論如何，這個專案也許可以來個一周一更，盡量持續將專案完成度提升～