iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 25
0

Deployable App

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

  1. Procfile

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

web: npm run pm2

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

  1. Port

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

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

  • PORT=9487 npm run pm2 使用環境變數
  • npm run pm2 -p 9487 使用 Switch
  • npm run pm2 不綁定 Port,使用預設值 3000

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

一鍵部署

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

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

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

gulp deploy

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

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


上一篇
Day 24 - Deploy - Technique Stack
下一篇
Day 26 - Example - Start a new project
系列文
30 天打造 MERN Stack Boilerplate30

尚未有邦友留言

立即登入留言