iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 21

Heroku 雲端佈署初步上手——全端產品工具箱 VI

Heroku

from Heroku

從本地專案到公開上線

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

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

筆記目的

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

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

誰適合閱讀:

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

 

佈署超簡介(deployment)

from Software Deployment and the Typical Issues

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

什麼是佈署

若透過用實體空間來想像,就如下表所示(修改自 Alpha Camp's material):

實體空間比喻 網路實際服務
租一棟房子當自己家 租遠端的一台主機
大公寓裡的分租套房 租遠端切分後的 DNS 主機
每戶房子的門牌地址 每台主機都有特定 IP(如 128.1.2.1)
為房子掛上識別招牌 網站的 domain name (如:infinitegamer.co )

常用佈署方案

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

虛擬主機

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

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

IaaS 雲端架構服務

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

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

PaaS 雲端平台服務

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

 

Heroku 快速上手

Heroku

from Deploy your app with Heroku

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

註冊並安裝 Heroku CLI

Sign up Heroku

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

Heroku CLI

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

install Heroku CLI

專案伺服器建置與佈署

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

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

$ heroku create [project-name]

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

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

heroku create

p.s. 由於 mLab 要跟 MongoDB Atlas 整併,將在 2020/11/10 停止在 Heroku 的 MongoDB Add-on 原服務,並在 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 remote

上傳完畢後,即可開啟應用程式:

$ heroku open

 


閱讀更多

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


上一篇
全端開發者需要懂的「Google 搜尋策略」
下一篇
產品工匠日常:打造全端產品的宏觀程序——全端刻意練習 I
系列文
用 JavaScript 打造全端產品的入門學習筆記30

尚未有邦友留言

立即登入留言