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

前置準備

首先請自行申請一個 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 restartheroku restart --app <app-name>

0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論