[Heroku] 佈署網站或 App 到 Heroku

最近剛好有機會接觸到 Heroku 這個雲端服務，這篇文章主要是記錄一下如何使用 Heroku 並且將網站或 App 佈署到 Heroku.

前言

Heroku 是一個支援多種程式語言的 PaaS (平台即服務)，開發者可以在 Heroku 上佈署各種網站或 App，可以減少系統維護的成本，當然免費的帳號會有一些限制:

• 30 分鐘沒有使用的話，會進入睡眠狀態，當之後需要使用時，需要等待一些時間才能恢復運作
• 512 MB RAM
• dyno 運行的時間限制: (dyno是運行和回應請求的應用程序的 Instance)
  • 已驗證的帳號，所有 dyno 合計的運行時間可以有 1000 小時
  • 未驗證的帳號只有 550 小時
• 1 web / 1 worker

一開始可以先使用免費方案，對於一般開發應該很夠用了，如果有更高的需求，可以再升級到其他方案，其他方案可以參考: Pricing | Heroku.

安裝及設定

首先需要先到 Heroku 申請帳號，填一些基本資料就可以申請好了~

接著安裝 Heroku CLI，安裝後開啟 cmd 輸入以下指令來測試:

$ heroku -h

如果出現 'heroku' 不是內部或外部命令、可執行的程式或批次檔，請將 Heroku CLI 的安裝路徑加到環境變數中，接著再輸入一次 heroku -h 就可以看到以下內容:

COMMANDS
  access          manage user access to apps
  addons          tools and services for developing, extending, and operating your app
  apps            manage apps on Heroku
  auth            check 2fa status
  authorizations  OAuth authorizations
  autocomplete    display autocomplete installation instructions
  buildpacks      scripts used to compile apps
  certs           a topic for the ssl plugin
  ci              run an application test suite on Heroku
  clients         OAuth clients on the platform
  config          environment variables of apps
  container       Use containers to build and deploy Heroku apps
  domains         custom domains for apps
  drains          forward logs to syslog or HTTPS
  features        add/remove app features
  git             manage local git repository for app
  help            display help for heroku
  keys            add/remove account ssh keys
  labs            add/remove experimental features
  local           run heroku app locally
  logs            display recent log output
  maintenance     enable/disable access to app
  members         manage organization members
  notifications   display notifications
  orgs            manage organizations
  pg              manage postgresql databases
  pipelines       groups of apps that share the same codebase
  plugins         list installed plugins
  ps              Client tools for Heroku Exec
  psql            open a psql shell to the database
  redis           manage heroku redis instances
  regions         list available regions for deployment
  releases        display the releases for an app
  reviewapps      disposable apps built on GitHub pull requests
  run             run a one-off process inside a Heroku dyno
  sessions        OAuth sessions
  spaces          manage heroku private spaces
  status          status of the Heroku platform
  teams           manage teams
  update          update the Heroku CLI
  webhooks        setup HTTP notifications of app activity

再來設定 Heroku 帳號資訊:

$ heroku login

Email: <your_email>
Password: <your_password>
Logged in as <your_email>

輸入帳號密碼之後，如果有成功登入就會看到登入成功的訊息 (Line 5).

使用方式

建立應用程式

除了可以直接在 Heroku 的網頁中 create app 之外，也可以透過 Heroku CLI 來建立新的新的應用程式:

$ heroku create <app_name>

app_name 是應用程式的名稱，也可以不指定，Heroku 會隨機給一組名稱。

Heroku CLI 大致上就用到這裡，接下來主要是使用 Git 指令來佈署到 Heroku，Git 的使用方式可以參考 [Git] Git 安裝及使用.

佈署到 Heroku

在 Local 的資料夾中新增 git remote 對應到 Heroku repository:

$ git init
$ heroku git:remote -a <app_name> # app_name: Heroku 應用程式名稱

如果是在 VS Code 操作 heroku 指令的話，需要再安裝 Plugin: heroku-cli.

接下來簡單撰寫一個 Node.js 程式來做測試:

# init
$ npm init
$ npm install express --save

// in app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('hello');
});

app.listen(process.env.PORT || 80, () => {
    console.log('Listen at post 80');
});

// package.json
{
  "name": "test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}

開發完成後，依照一般 push 到 GitHub 的指令就可以佈署到 Heroku 了:

$ git add .
$ git ci -m 'Commit message'
$ git push heroku master

最後開啟 App URL (https://<app_name>.herokuapp.com/) 就可以看到應用程式已經佈署到 Heroku 囉!

參考資料

• Heroku
• Heroku安裝使用教學
• 第十八天：發布網站到 Heroku