文章

Meteor + ReactJS 學習筆記（四）部署至 Heroku

/在： /通過：

如果 Web 應用是要在 Internet 存取的，或是這個應用是要 24 小時存取但是你並不想要維護一台機器，也不想要擔心資安及防火牆的問題。當然你可以選擇到 AWS、Azure、Google上租個主機，然後架設 Meteor，但是這樣花費的成本是比較高的，最快且節省成本的方式是直接使用 PaaS (Platform As A Service) 服務。各大雲端廠商都有 PaaS，比較知名的有 Google App Engine、AWS、IBM Cloud (從前叫做 Bluemix)、Microsoft Azure、RedHat OpenShift。本篇採用的是2011年被Salesforce 所併購的老牌 PaaS 平台 Heroku 來做說明如何將Meteor專案 部署至Heroku

Step 1: 安裝 Heroku CLI (Command Line Interface)

Mac 使用者可使用以下指令安裝

brew tap heroku/brew && brew install heroku

Windows 使用者可點選下面連結下載安裝檔
The Heroku CLI Windows Installer

Step 2: 建立一個 Meteor + ReactJS project

可參考上一篇說明。請自行選擇一個專案名，不要跟 meteor-heroku-demo 重複

meteor create --react meteor-heroku-demo

cd meteor-heroku-demo

Step 3: 將專案目錄進行 git 儲存庫的初始化 

git init

git add .

git commit -m "My first commit!"

Step 4: 建立 Heroku instance 

heroku login

heroku apps:create <你的專案名>

Step 5: 指定使用 Meteor Buildpack

在 Heroku 上面，執行不同程式語言的專案，有不同的 Buildpack，Buildpack 是用來將建置專案會使用到的相關資源及 Scripts 轉換成 slug，slug 是執行在 Heroku 和行 dyno 之上，裡面包含專案的 source code、相依的模組及資源、特定程式語言的 run time。
以下指令是執定 heroku 使用 admithub/meteor-horse 這個 buildpack，而 admithub/meteor-horse 是由 AdmitHub 所開發，用來生成 meteor 專案的 buildpack

heroku buildpacks:set admithub/meteor-horse

Step 6: 建立 MongoDB

Meteor 的 Server 端是使用 MongoDB，所以必須也在 Heroku 上設定好 Mongo 的環境，Heroku上提供 500MB 免費的 MongoDB ，可透過以下指令設定

heroku addons:create mongolab

或是使用以下指令設定你自己的 MongoDB

heroku config:add MONGO_URL=<your mongodb URL>

Step 7: 設定你的 Meteor app 執行在 Heroku 上 

heroku config:add ROOT_URL=https://<你的專案名>.herokuapp.com

Step 8: 確認 heroku 指令是沒問題的 

git remote -v

//應該會出現以下回覆

heroku https://git.heroku.com/meteor-heroku-demo.git (fetch)

heroku https://git.heroku.com/meteor-heroku-demo.git (push)

Step 9: 部署至Heroku 

git push heroku master

當出現類似以下畫面，代表建置完成

Step 10: 使用瀏覽器確認 App 是否執行

使用瀏覽器打開 https://<你的專案名>.herokuapp.com