folder_open

30 天打造 MERN Stack Boilerplate

arrow_right
article

Day 25 - Deploy - Heroku

Day 25 - Deploy - Heroku

Deployable App

#

要讓 Node 的 Web App 部署在 Heroku 上需要注意兩件事:

  1. Procfile

為了讓 Heroku 知道如何啟動 App,需要在 Repo 根目錄建立一個檔案命名為 ,例如 Boilerplate 的 Procfile 長這樣:

web: npm run pm2

意思是告訴 Heroku,我們的 Web App 要執行 這個指令才能啟動。

  1. Port

千萬要注意 App 綁定的 Port 不可以寫死,Heroku 是透過環境變數 告訴我們的 App 要 Listen 哪一個 Port,所以 Production 環境下使用 Port 的優先順序應該是 高於預設 Port。

我們的 Boilerplate 有三個綁定 Port 的可能性,按照優先順序是:

  • 使用環境變數
  • 使用 Switch
  • 不綁定 Port,使用預設值 3000

參考程式碼:src/server/utils/getPort.jsopen_in_new

一鍵部署

#

Heroku 是借助 Git 的操作來部署 App,但是開發用的 Repo 需要 ignore 建置出來的檔案,部署用的 Repo 需要 ignore 原始碼,留下建置檔案,兩個 Repos 是完全衝突的,所以我在 Boilerplate 的作法是建立 資料夾當作部署用 Repo 的根目錄,再搭配 Gulp Task 將必要檔案塞進去,接著執行 Git 和 Heroku 的 CLI 指令進行部署。

完整部署細節可以參考 gulpfile.jsopen_in_new Task。

在部署之前會先執行過測試指令 ,此時 資料夾下就會是 Production 版本的 App 了,此時只要執行:

gulp deploy

就能將 資料夾下的 App 部署至 Heroku 上了。

如果是第一次使用 Heroku CLI,要記得先以 CLI 指令登入 Heroku 才能夠正常使用 gulp deploy。