Heroku 部署 SOP

步驟僅供參考,因為我其實沒有照著這步驟跑過 QQ,都是事後才整理的,不過要做的事情大概就這些,基本上應該不會錯?

1. 註冊 Heroku 帳號,並且填好信用卡資訊:傳送門
2. 建立一個新的資料夾,把寫好的作業複製一份到裡面,然後新建 .gitignore,與 package.json

.gitignore:
/node_modules
npm-debug.log
.DS_Store
/*.env

 

package.json:
{
  "name": "herukodraw-example",
  "version": "1.0.0",
  "description": "This example is so cool.",
  "main": "index.js",
  "scripts": {
    // 要執行 db:migrate 才會建起資料庫
    "db:migrate": "npx sequelize-cli db:migrate",
    // push 上 Heroku 時會執行 npm run start, 
    // 所以要寫好這個指令, 建立 DB 與 執行 index.js
    "start": "npm run db:migrate && node index.js", 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "example",
    "heroku"
  ],
  "author": "jane-doe",
  "license": "MIT",
  "dependencies": {
    // 確認好自己用了哪些模組
    "bcrypt": "^5.0.0",
    "body-parser": "^1.19.0",
    "connect-flash": "^0.1.1",
    "ejs": "^3.1.5",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "jquery": "^3.5.1",
    "mysql": "^2.18.1",
    "mysql2": "^2.2.5",
    "sequelize": "^6.3.5",
    "sequelize-cli": "^6.2.0"
  },
  "devDependencies": {
    "sequelize-cli": "^6.2.0"
  },
  // 寫給 Heroku 的伺服器看, 他才知道要用什麼執行環境
  "engines": {
    "node": "10.x"
  }
}

3.改寫 index.js 的 PORT

const express = require('express');
const bodyParser = require('body-parser');
const session = require('express-session');
const flash = require('connect-flash');
const prizeController = require('./controllers/prizeController')
const adminController = require('./controllers/adminController')
const app = express();
// 要設定 port 讀取環境變數
const port = process.env.PORT || 3000;
 

 4. 進入 Heroku 官網建立 APP,取好名字就按 Create app:

5. 進入 app 管理頁面,點 Resources 標籤,搜尋 ClearDB,按 Submit Order Form(需要填好信用卡付款資訊,不然不給用)

6. 安裝好 Heroku CLI

7. 開啟 Terminal 輸入 heroku login

8. 輸入 heroku create,這邊會順便設定好 Heroku 遠端 git


9. 輸入 heroku addons:create cleardb:ignite 建立起資料庫

10. 改寫 config.json,這裡要在 production 加一個 use_env_variable,他的值會對應到你的資料庫,像我不小心建了兩個資料庫,所以會是 CLEARDB_RED_URL:

{
  "development": {
    "username": "root",
    "password": null,
    "database": "pool",
    "host": "localhost",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "use_env_variable": "CLEARDB_RED_URL"
  }
}

11. 在本機完成 commit 

可以在 Terminal 輸入 heroku logs --tail 來看出了什麼錯
例如,沒改好 PORT,出現錯誤的 PORT 訊息:

 

Top