# 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 !!