[紀錄] Final Project 部署紀錄

這次的部署前前後後花了 3 天，有很多不熟悉的東西要處理。部署 React 跟先前部署原生 JavaScript 寫的網頁也不太一樣。雖然有後端部署的經驗了，不過這次在前後端部署上還是都遇到了困難。尤其是很多時候，都不曉得是自己沒設定好，還是它要等一段時間才會好，所以花了相當多的時間在釐清問題。

前後端部署

前端部署

• 部署到 GitHub Page

後端部署

• 部署到 EC2，利用 pm2 在背景執行

分別部署都是成功的，跟先前作業的部署步驟相同。不過當我前端要開始拿後端資料的時候，就發生問題了。

遇到問題一：

前端 GitHub Page 跑起來後，看到 console.log 出現了 Mixed Content 的問題（如圖），大致上是說，前端是 https 但是後端是 http，所以前端的 request 被瀏覽器 blocked 掉了，前端拿不到後端的資料

上網查過很多資料，看是要改前端，讓瀏覽器不要阻擋，或者改後端將後端改成 https ...等等。
最後選擇改後端，將後端改成 https，先用 nginx 做 reverse proxy
再利用 cloudflare 生成 https

cloudflare 的設定方式參考了 這篇文章

設定完成之後，後端就改成 https 了，前端成功拿到後端資料。

問題二

拿到資料以後，雖然 API 沒問題了，但是很多 Component 壞掉了，因為當初在開發的時候，都是用 / 作為根目錄，我們所有網站的連結都是以 / 為路徑，現在部署到 GitHub Page 之後，由於 URL 會變成 krebikshaw.github.io/give-plus-plus，根目錄就跑掉了，現在根目錄變成了 give-plus-plus，導致前端所有的連結都會壞掉，很多 Component 也都沒辦法 render。

解法：
參考 Github pages 如何自訂網域，將前端的 URL 改成我要的 DOMAIN NAME
讓前端專案的根目錄變成 /

參考：這篇文章 將初步設定解決

DNS 設定完成之後，GitHub 這邊出現了一個錯誤：

這個部分的錯誤只是因為它還沒設定好，大概等了 5 個鐘頭才好

最後還有回去前端 package.json 將 homepage 改成新的 domain name
經歷了三天的緊張、害怕、掙扎，最後終於部署完成啦～～～（開心

網站連結：https://give-plus-plus.tw/