MERN 全棧APP-架設筆記(下)

Wen Chen
Aug 7, 2021

--

Photo by Christopher Gower on Unsplash

前言

這是MERN架設筆記的第二篇,如果沒有看過上集的可以先閱讀過上集再來看唷!

上一篇成功把後端部分架設到heroku上之後,我們這篇就要來處理client的部分,那之前有提到,我們要使用Netlify來部署我們的client部分,開始吧!

註冊帳號及登入

Netlify本身有幾種Deploy方法,那這裡我們選擇透過Git來架設,這樣的好處是未來檔案有更新時,Netlify也會一併自動更新,真的是好方便啊~

也因為我們是透過Git來進行部署,所以在執行接下來步驟前,記得要先把Project Push到GitHub上,才能進行接下來的動作。

一切就緒後我們就可以開始接下來的動作了~
登入後我們點擊New site from Git來架設新網頁

接下來從GitHub選擇我們要Deploy的專案

找到我們要架設的專案後點擊Deploy site 開始架設~

上傳成功後就會被導向這個畫面,接下來還需要去Site settings 內做一些設定

Site settings中我們第一個可以做設定的是在Site information,從上一張圖可以看到我們架設完成的網站網址主要是一段沒什麼規律的文字。

在這裡我們便可以點擊Change site name 來把網站名稱和網址修改成比較容易辨識的網址

Site information
填上想更改的名稱就可以囉!

更改完網站名稱後我們來到Build&deploy頁面

還記得前面說過,我們只需要架設client即可,但是通常在GitHub上都是上傳一整個專案,所以裡面當然也包含server資料夾。

所以我們現在必須在Build settings內做一些設定:

directory 的名稱再按照個人狀況做修改

更改完Build settings後它會自動重新deploy一次,確認沒有問題之後,就大功告成啦~

最後,我們需要回到client 內把串接API的位置改成heroku所提供的app網址
設定完成後再重新上傳至GitHub,待Netlify自動更新完成後,就大功告成啦!!

將API位置改成heroku所提供的網址

基本上完成上面步驟後,就大功告成啦~可以把網址傳給親朋好友炫耀一番囉(誤

這裡要補充一下,在架設時我個人很常因為底下這個原因失敗,爬文後發現是,CI = true 時,Netlify會將warnings當作errors,導致上傳失敗。

以下提供StackoverFlow 討論串,裡面有很多種解法,可以自己挑選愛用的方式解決。

Failed to compile

整篇文章寫到這裡就算告一段落了,前端架設上相比後端我個人認為是簡單快速許多。

Netlify也是我個人很愛使用的網站架設工具,實在是非常懶人好用啊~
或許下次有機會可以再發一篇較詳細的Netlify文章。

這是我第一次撰寫文章,也希望未來可以持續保持這好習慣,給自己做個紀錄XD

若內容有誤也希望大家可以不吝給予指教~謝謝大家!

--

--

Wen Chen

來自影視產業的前端工程師,喜歡產出帶來的成就,努力成為一名合格的工程師!