【 DevOps 】部署 MongoDB 版的網頁到 Heroku

內容

• 學習目標
• 前置準備作業
• 程式與軟體
• 範例程式
• 啟動腳本
• 修改 Mongoose 連線與 Listen 設定
• Heroku 設定與部署

學習目標

• 部署 MongoDB 版的網頁到 Heroku

前置準備作業

• 註冊 Heroku 帳號並綁定信用卡

程式與軟體

• MongoDB
• Node.js
• Visual Studio Code

範例程式

• https://github.com/ArcherHuang/URL-Shortener

啟動腳本

• 在根目錄建立 Procfile 檔案，其程式如下

修改 Mongoose 連線與 Listen 設定

• Mongoose

• Listen

Heroku 設定與部署

Step 1. 登入到 Heroku

• https://id.heroku.com/login

Step 2. 建立新的 App

• 點選右上角的【 New 】➙【 Create new app 】

Step 3. 輸入 App 名稱

• 本範例命名為【 url-shortener-0731 】，此處可自行命名，但以不重複為原則

Step 4. 從 GitHub 部署程式

• 點選上方的【 Deploy 】後再點選【 GitHub 】

Step 5. 選擇要從 GitHub 部署那一個 Repository

• 輸入 GitHub 上 Repository 的名字後再點選【 Connect 】

• 連結成功畫面

Step 6. 部署程式

• 點選【 Deploy Branch 】

• 部署過程

• 部署完成

Step 7. 在 Heroku 上安裝 MongoDB 資料庫

• 點選上方的【 Resources 】
• 後再到下方的【 Add-ons 】輸入【 ml 】來搜尋
• 點選搜尋到的【 mLab MongoDB 】

• 安裝【 mLab MongoDB 】套件

• 安裝完成

Step 8. 開啟 App

• 點選右上角【 Open app 】

Step 9. 網頁測試

• 輸入【 http://www.google.com 】以產生短網址

• 產生【 http://www.google.com 】的短網址

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/