---
# System prepended metadata

title: Deploy nodejs server to Heroku
tags: [web]

---

# Deploy nodejs server to Heroku
###### tags: `web`

## Create Heroku

安裝 heroku
```
sudo snap install heroku --classic
```

登入 heroku
```
heroku login
```
輸入這個指令後，會跳出一個 heroku 登入的網頁，按下 Login 即可

建立一個新的 heroku app
```
heroku create
```
輸入完指令後，除了建立 heroku app 以外，heroku 也自動建立了 git remote 並已經關聯到 local git repository，同時 heroku 會隨機為 app 命名 : 
```
Creating app... done, ⬢ powerful-bastion-37033
https://powerful-bastion-37033.herokuapp.com/ | https://git.heroku.com/powerful-bastion-37033.git
```

將專案 push 到雲端 heroku app
```
git push heroku master
```
輸出 : 
```
Counting objects: 161, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (152/152), done.
Writing objects: 100% (161/161), 31.77 KiB | 985.00 KiB/s, done.
Total 161 (delta 79), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 12.x...
remote:        Downloading and installing node 12.16.3...
remote:        Using default npm version: 6.14.4
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        
remote:        > ngrok@3.2.7 postinstall /tmp/build_6d83004dd98e7164db94be420c0a14c4/node_modules/ngrok
remote:        > node ./postinstall.js
remote:        
remote:        ngrok - downloading binary https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
ngrok - downloading progress: 13773305/13773305
remote:        ngrok - binary downloaded to /app/.ngrok/aHR0cHM6Ly9iaW4uZXF1aW5veC5pby9jLzRWbUR6QTdpYUhiL25ncm9rLXN0YWJsZS1saW51eC1hbWQ2NC56aXA=.zip
remote:        ngrok - unpacking binary
remote:        ngrok - binary unpacked to /tmp/build_6d83004dd98e7164db94be420c0a14c4/node_modules/ngrok/bin/ngrok
remote:        added 159 packages from 210 contributors and audited 304 packages in 7.718s
remote:        found 0 vulnerabilities
remote:        
remote:        
remote: -----> Build
remote:        
remote: -----> Caching build
remote:        - node_modules
remote:        
remote: -----> Pruning devDependencies
remote:        audited 304 packages in 2.276s
remote:        found 0 vulnerabilities
remote:        
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 39.1M
remote: -----> Launching...
remote:        Released v3
remote:        https://powerful-bastion-37033.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/powerful-bastion-37033.git
 * [new branch]      master -> master
```

:::danger
若出現 error : 
```
remote:        npm ERR! cipm can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
remote:        npm ERR! 
```
記得先執行 `npm install` 再 push 一次即可
:::

成功 push 後，heroku app 就成功被 deploy 了!!
確認是否至少有一個程式在執行 : 
```
heroku ps:scale web=1
```
結果 : 
```
Scaling dynos... done, now running web at 1:Free
```

## Set ClearDB

heroku dashboard > Resources > Add-ons > 選擇 ClearDB MYSQL > 選擇 Ignite - Free : 
![](https://i.imgur.com/BVMOhLu.png)
:::info
若跳出 Error 別緊張，需要先認證帳號，而認證帳戶的方式就是要先輸入信用卡號
:::

```
$ heroku config
```
輸出 : 
```
=== powerful-bastion-37033 Config Vars
CLEARDB_DATABASE_URL: mysql://b59a4201fc41d1:fab75961@us-cdbr-east-06.cleardb.net/heroku_077b286732c06f1?reconnect=true
```

複製 CLEARDB_DATABASE_URL 後面那段放到下面指令中 : 
```
heroku config:set DATABASE_URL='mysql://b59a4201fc41d1:fab75961@us-cdbr-east-06.cleardb.net/heroku_077b286732c06f1?reconnect=true'
```
輸出 : 
```
Setting DATABASE_URL and restarting ⬢ powerful-bastion-37033... done, v6
DATABASE_URL: mysql://b59a4201fc41d1:fab75961@us-cdbr-east-06.cleardb.net/heroku_077b286732c06f1?reconnect=true
```
其中 `mysql://<db username>:<db password>@<db host>/<db name>reconnect=true`

接著就可以利用 database 的資訊操作 database 摟！

## 修改 deploy 到 heroku 的程式碼
```
$ git add .
$ git commit -m "..."
$ git push heroku master
```

## 記得使用 heroku enviroment port 作為 port
```
const port = process.env.PORT || 8000
```

否則會造成 `H10` 錯誤，導致 server crash !!