Skip to content

部署 Node js 程式到 heroku 平台

Jump to bottom Edit New page
sylvia8431 edited this page Aug 18, 2015 · 21 revisions

部署前置作業

編輯 package.json 檔案

package.json 介紹

NodeJS 日益強大，相關開發資源也越來越多，許多功能已經不再需要自己寫，通通都可以直接利用官方的 NPM（Node Package Manager）工具，從網路上把別人已經開發好的模組抓回來用。這樣的模組交換平台加快了開發速度，讓開發者可以全心全意專注於當前應用的開發工作。但是也因為如此，讓我們的 Project 總是相依於一大堆的第三方模組，而每當要將我們的程式佈建於伺服器時，就必需手動先將所有的模組先安裝好，甚至是用笨拙的方法邊試邊裝遺漏的模組。事實上，我們可以在程式目錄中，建立 package.json 檔，直接管理 Project 的相依性以及所使用到的模組套件，一旦目錄中存在 package.json，下次要移到新的環境裝起來時，可以直接利用 NPM 把所有的相依模組一次裝好，省下很多功夫：

$ npm install

package.json 編寫方式

由於我們要部署到 heroku 上，所以要編輯 package.json 這個檔案，這樣 heroku 才知道要在它的環境上裝什麼 nodejs 的 package。以 student_tutor_API project 為例：

$ npm init

在根目錄下執行此指令來生成 project 的 package.json 並填寫基本的資料欄位

{
  "name": "soleil_node_js",
  "version": "1.0.0",
  "description": "A repository to place our node projects",
  "main": "student_tutor_API/server5.js",

  ...

}

其中，package.json 中的 "dependencies" 欄位用來表示所需安裝的第三方模組，也是本篇探討的重點，可使用以下指令在本機安裝時加上 --save 參數，將所需安裝的模組與版本資訊寫入 package.json 中

npm install <pkg> --save
{
  ...

  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.2",
    "http": "0.0.0",
    "json": "^9.0.3",
    "mongoose": "^4.1.0",
    "path": "^0.11.14",
    "serve-favicon": "^2.3.0"
  }
}

編輯 Procfile

Procfile 也是需要編輯的設定檔，它告訴 heroku 該用什麼樣的方式啟動我們的 Nodejs 程式。

web: node student_tutor_API/server5.js

就等於要 heroku 幫我們用 node 的環境把建立 website 的 .js 檔案跑起來！

註冊 Heroku 帳號

請先註冊一個 Heroku 帳號，https://www.heroku.com/ ，由於我們要部署上線的語法是 Node.js 語言，因此也需先確認 Node.js, npm 已安裝至本機電腦裡面。

安裝 Heroku Toolbelt 工具

這個工具將提供 Command Line 的工具以及 git 版控工具，透過這個工具將輔助接下來後續的操作指令，工具請至 https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up 下載，依作業系統選擇不同的版本安裝。

toolbelt download

開始部署

將寫好的 node js 程式部署至 Heroku 步驟

  • 切換到欲上傳的程式資料夾下
$ cd soleil_node_js
  • 進行 heroku 登入驗證，下完指令後會要求填入 email 帳號密碼
$ heroku login

login

  • 在 heroku 上建立程式環境
$ heroku create

create app

  • 重新命名專案
$ heroku apps : rename soleil-db-api

rename app

重新命名完成後可以看到訊息提到，已經將 heroku 原本自動分配到的 app 名稱 morning-garden-5782 改為我們要命名的 soleil-db-api，馬上轉到 heroku 上的 dashboard ，立即就看到上面顯示我們的 soleil-db-api 專案，但這時候程式還並沒有部署到 heroku ，目前已經建立遠端的檔案庫在上面。

heroku_dashboard

  • 部署程式
$ git push heroku master

push

  • 啟動 heroku 運行資源：儘管我們經過上述步驟，已經成功把寫好的 node js 程式 deploy 到 heroku 上了，但如果沒有請 heroku 開任何一台機器給我們，或更精確一點的說，開任何一點網路主機資源給我們的話，就仍然不能跑部署上去的程式，所以最後一步，就是要叫 heroku 開資源給我們剛剛 deploy 上去的程式運行。
$ heroku ps:scale web=1

heroku_dyno_active

大功告成！

切換到 dashboard 的 activity標籤，就可以看到剛剛部署過程的成功紀錄囉！

heroku_dashboard

部屬更新的程式碼

  • 把更動的程式碼加進 local git repository
$ git add .
  • commit
$ git commit -m "code modified"
  • push 變更的程式碼到 heroku
$ git push heroku master
  • 查看 heroku 運行的 log 紀錄來除錯
$ heroku logs --tail

References

Add a custom footer
Add a custom sidebar
Clone this wiki locally