from Heroku

從本地專案到公開上線

從全端學習開始至今，一直都在自己的電腦，以本地環境打造產品；透過「佈署（deployment）」，我們可以將專案從本機移動到網路上的專門主機，並公開給使用者使用。

至於如何讓軟體運行在遠端的環境中，就算已經學習一段時間的 Web Dev，可能還是不容易回答，本篇筆記將簡單摘錄「佈署（deployment）」的重點觀念與初學者的好用工具 Heroku。

筆記目的

本篇筆記將解決以下問題：

• 什麼是佈署？如何佈署？
• 如何以 Heroku 進行雲端佈署？

誰適合閱讀：

• 能在本地環境打造完整產品，欲公開上線者

佈署超簡介（deployment）

from Software Deployment and the Typical Issues

網路應用程式、軟體專案在截至目前為止的學習過程，幾乎都是使用免費的服務；但是當我們要佈署上線後，必須得「花錢租用各種不同的設備」，以將我們的產品或服務搭建在公開的網路上。

什麼是佈署

若透過用實體空間來想像，就如下表所示（修改自 Alpha Camp's material）：

常用佈署方案

通常依使用情境與需求，使用以下三種方案進行佈署：

虛擬主機

適合個人或小規模網站，通常是將實體主機轉換為一至多個虛擬主機，如上述比喻，為不含傢俱裝潢的分租套房，特色就是便宜，但基礎建置如作業系統就得自行安裝，且擴充彈性低。

細節可參考《虛擬主機是什麼？入門與進階該如何選擇與比較？》

IaaS 雲端架構服務

企業級的圓端運算服務，前三大就是耳熟能詳的 AWS、GCP、Azure。效能高、擴充彈性佳，及各種維持主機不停擺的服務；但設定即計費方式都較繁複。

細節可參考《企業搶灘 IaaS 雲服務，GCP、AWS、Azure 三大平台手把手帶你從零到一》

PaaS 雲端平台服務

專為開發者提供、軟硬體兼具，特色是不需要建立開發環境，以專注在開發自己的原創應用程式。其中最知名的平台之一是 Heroku，也是目前唯一提供免費方案的平台，因此初學者通常會學習使用 Heroku 免費方案。

Heroku 快速上手

from Deploy your app with Heroku

Heroku 提供了免費解決方案、操作及設定都相對簡易，能快速方便地架設網站，所以很適合用來測試產品或服務。當驗證後，經過適當評估也能彈性的擴充和升級。

註冊並安裝 Heroku CLI

在完成註冊程序及綁定信用卡（方便我們使用某些服務，如 MLab 套件裡的 mongodb sandbox）後，就能準備使用 Heroku 佈署了！

在正式開始操作前，還得安裝官方提供的指令操作介面 Heroku CLI，我們藏能透過本地的 Terminal 進行佈署。

專案伺服器建置與佈署

新增遠端應用程式伺服器及遠端資料庫伺服器

透過以下指令能新增一個專案伺服器，若沒輸入伺服器名稱，Heroku 會隨機指派名稱：

$ heroku create [project-name]

接著在專案上安裝Heroku 上的 MongoDB 服務 mLab MongoDB：

$ heroku addons:create mongolab -a polar-depths-04793

p.s. 由於 mLab 要跟 MongoDB Atlas 整併，將在 2020/11/10 停止在 Heroku 的 MongoDB Add-on 原服務，並在 Sandbox Heroku Add-on to Atlas 上繼續服務。之後會再更新本篇筆記中有關資料庫伺服器的安裝方式。

參考資料：

• mLab MongoDB Add-on Discontinued
• Shutdown of mLab’s Heroku Add-on on November 10, 2020
• Guide to Migrating a Sandbox Heroku Add-on to Atlas

修改專案環境設定

• 專案目錄新增 Procfile，並寫入下方指令，以透過 Heroku 啟動專案：

web: node app.js

• PORT 設定

// app.js

const PORT = process.env.PORT || 3000
// 如果在 Heroku 環境則使用 process.env.PORT，否則視為本地環境使用 3000 

• Mongoose 連線設定

// config/mongoose.js

const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost/todo-list'
mongoose.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
// 如果在 Heroku 環境則使用 process.env.MONGODB_URI；否則視為本地環境，使用 mongodb://localhost/todo-list

• 建立 Git Commit

$ git add . 
$ git commit -m "chore: heroku init"

專案上傳 Heroku

將專案加到遠端的 heroku 伺服器，並推上最新版本：

$ git remote add heroku [heroku_git_url]
$ git push heroku master

上傳完畢後，即可開啟應用程式：

$ heroku open

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。