Day 25 - Deploy - Heroku

Deployable App

#

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

1. Procfile

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

web: npm run pm2

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

2. 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.jsopen_in_new

一鍵部署

#

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

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

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

gulp deploy

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

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