/ DevOps

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

內容

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

學習目標

  • 部署 MongoDB 版的網頁到 Heroku

前置準備作業

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

程式與軟體


範例程式

-----2019-07-31---3.58.25


啟動腳本

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

修改 Mongoose 連線與 Listen 設定

  • Mongoose
  • Listen

Heroku 設定與部署

Step 1. 登入到 Heroku

-----2019-07-31---4.19.44


Step 2. 建立新的 App

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

-----2019-07-31---4.07.2711


Step 3. 輸入 App 名稱

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

-----2019-07-31---4.09.0911


Step 4. 從 GitHub 部署程式

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

-----2019-07-31---4.10.49


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

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

-----2019-07-31---4.10.05

  • 連結成功畫面

-----2019-07-31---4.11.27


Step 6. 部署程式

  • 點選【 Deploy Branch 】

-----2019-07-31---4.11.43

  • 部署過程

-----2019-07-31---4.12.07

  • 部署完成

-----2019-07-31---4.12.24


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

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

-----2019-07-31---4.14.24

  • 安裝【 mLab MongoDB 】套件

-----2019-07-31---4.14.35

  • 安裝完成

-----2019-07-31---4.14.51


Step 8. 開啟 App

  • 點選右上角【 Open app 】

-----2019-07-31---4.14.51---


Step 9. 網頁測試

-----2019-07-31---4.15.31

-----2019-07-31---4.15.39


GitHub
List of blogs
Archer

Archer

Having being a software engineer. Experience with Python, JavaScript, Objective-C, Micro:bit, LinkIt 7697, Raspberry Pi, AWS, Azure, IoT. ❆ [email protected] https://oranwind.org/author/archer/

Read More