[紀錄] Final Project 部署紀錄


Posted by krebikshaw on 2020-12-27

這次的部署前前後後花了 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/


#react-deploy







Related Posts

讓 JavaSript 難以閱讀:jsfuck 與 aaencode

讓 JavaSript 難以閱讀:jsfuck 與 aaencode

sigfox開啟全球一個網的物聯網世界

sigfox開啟全球一個網的物聯網世界

MTR04_1107

MTR04_1107


Comments