十分鐘將 Node.js + MySQL 資料庫佈署到 Heroku 的保姆級圖文教學

1 前置準備
2 將 Node.js 佈署至 Heroku
3 將資料庫內容導入至 ClearDB
4 常見錯誤

前置準備

首先請自行申請一個 Heroku 帳號，並下載安裝 Heroku cli。

將 Node.js 佈署至 Heroku

創建 Heroku APP

安裝 Heroku cli 後，進入 node.js project 的資料夾中輸入下方指令，
- 接著會跳出瀏覽器，登入你的 heroku 帳號即可。

heroku login

新增 Heroku app (如果不自訂 APP 名稱, Heroku 會隨機產生app名稱)
- 創建過程中會顯示 Creating ⬢ fierce-lowlands… done，因此我們可以得知產生的 app 名稱為 fierce-lowlands-xxxxx。

heroku create <app-name>

/*
  Creating ⬢ fierce-lowlands... done
  https://fierce-lowlands-xxxxx.herokuapp.com/ | https://git.heroku.com/fierce-lowlands-xxxxx.git
*/

修改設定檔

在 project 資料夾根目錄新建檔案 Procfile (沒有副檔名，首字 P 大寫)
- 寫入以下內容 (app.js 為你的 node 入口檔案)：

web:node app.js

若沒有 start 指令請在 package.json 的 scripts 中加上 start 指令：

"scripts": {
   "start": "node app.js"
}

解決跨域問題

為解決跨域問題，請在你的 node.js 入口檔案(此處稱 app.js) 中加上以下內容：

const port = process.env.PORT || 5000;

// 處理跨域
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT,PATCH,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.header('Access-Control-Allow-Credentials', true);
  if ('OPTIONS' == req.method) {
    res.send(200);
  }
  else {
    next();
  }
});

// ...

app.listen(port, () => console.log('Server has started'));

將專案推上 Heroku

將遠端與本地連結：

heroku git:remote -a <app-name>

把 node.js 的全部內容 (除 node_modules ) push 到 heroku 的 master 分支

git status // 確認已暫存及未暫存的內容
git add .
git commit -m "xxxxxxxxxx"
git push heroku master

到此，我們已經成功將 node.js 佈署到 heroku 上了。

將資料庫內容導入至 ClearDB

將 ClearDB 安裝至 Heroku APP

接著到 Heroku addons 搜索 Clear DB 並且點右上方的 Install ClearDB MySQL
(或者可以使用指令 heroku addons:create cleardb:ignite )

選擇要安裝 ClearDB 的 app：

如果你和我一樣在這之前從來沒有綁定過信用卡，heroku 會要求你先至會員設定-billing 綁定信用卡才能再繼續：

綁定完信用卡之後 heroku 會收取大概 28 NTD 的費用，我本來以為是完全免費，沒想到還是需要收錢呀：

輸入 heroku config 指令確認 ClearDB 信息：

heroku config

// fierce-lowlands-xxxxx Config Vars
// CLEARDB_DATABASE_URL: mysql://bc6b5b1dcxxxxx:3axxxxx0@us-cdbr-east-05.cleardb.net/heroku_3931138bexxxxxx?reconnect=true

/* db information:
 username: bc6b5b1dcxxxxx
 password: 3axxxxx0
 host: us-cdbr-east-05.cleardb.net
 database: heroku_3931138bexxxxxx
*/

搬移資料庫內容至 ClearDB

接著將原本 db 的內容導出成 .sql 檔：

開啟資料庫管理工具(圖中使用 HeidiSQL )連進 ClearDB：

點檔案－載入 SQL 檔案 (各個管理軟體應該都是類似步驟)：

執行 .sql 檔中的 sql 語句將資料庫內容完整的搬過來：

完成後確認一下資料是否正常：

修改專案中的資料庫連接資訊

別忘記回到 project 的 db 設定檔案中修改連接訊息，並記得再次佈署到 heroku (git push heroku master)：

完成後，點擊 heroku app 右上方的 Open app 就會開啟應用：

我是用來做 API ，成功後應該就會看到回傳的內容了：

大功告成！

常見錯誤

除了上方提到的跨域問題外，我會將我遇到的所有問題及解決方式列在下方：

Stopping all processes with SIGTERM Process exited with status 143

2022-01-12T13:22:19.642427+00:00 heroku[web.1]: Restarting
2022-01-12T13:22:19.684299+00:00 heroku[web.1]: State changed from up to starting
2022-01-12T13:22:20.923793+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2022-01-12T13:22:21.138888+00:00 heroku[web.1]: Process exited with status 143
2022-01-12T13:22:21.544024+00:00 heroku[web.1]: Starting process with command `npm start`

這是官方的回答：

The dyno manager restarts all your app’s dynos whenever you:

create a new release by deploying new code
change your config vars
change your add-ons
run heroku restart

也就是當重新佈署、修改配置變量、修改 addons、執行 heroku restart 這幾種情況發生，dyno 會自動重新啟動，而這種情況發生可能是由於dyno 停止了 heroku 應用程序，因此我們必須手動重新啟動應用程序

解決方式：heroku restart 或 heroku restart --app <app-name>

閱讀量: 31