【 DevOps 】將 GitHub 上的 Sub Repository 網頁部署到 Heroku - MongoDB

內容

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

學習目標

• 說明
  • 將 GitHub 上的 Sub Repository 網頁部署到 Heroku
• 示意圖
  • 本範例要將名為 heroku 的 Repository 底下的 URL-Shortener 的 Sub Repository 部署到 Heroku

前置準備作業

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

程式與軟體

• MongoDB
• Node.js
• Visual Studio Code

範例程式

• https://github.com/ArcherHuang/heroku

啟動腳本

• 在根目錄建立 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 上的 Sub Repository 程式到 Heroku

• 在本地端的電腦安裝 heroku

  • 請使用終端機 (macOS) 或命令提示字元 (Windows) 輸入下方指令

  npm install -g heroku 

• 登入 Heroku

  • 請使用終端機 (macOS) 或命令提示字元 (Windows) 輸入下方指令

  heroku login 

  • 按非 q 的任意鍵進行 Heroku 登入

  

  • 點選 Log in
    

  • 登入成功
    
    

• 設定 Sub Repository 要部署到 Heroku 中的那個 App ( 此 App 為 Step 3 所設定的名稱 )

  • 指令為 heroku git:remote -a【 Heroku 的 App 名稱 】
  • 本範例指令為 heroku git:remote -a url-shortener-0731

• 部署 Sub Repository 程式到 Heroku

  • 切換工作路徑到 父 Repository，本範例為 heroku

    • 指令為 cd heroku
      

  • 部署 Sub Repository

    • git subtree push --prefix【 Sub Repository 的名稱 】heroku master
      • 請修改【 Sub Repository 的名稱 】為所要部署的 Sub Repository 對應的名稱
    • 本範例指令為 git subtree push --prefix URL-Shortener heroku master

    
    

    • Heroku 上呈現 Deploy 的畫面
      

  • 在 Heroku 上安裝 mLab MongoDB 資料庫

    • 指令為 heroku addons:create mongolab
      

      • Heroku 上呈現 Resources 的畫面
        

  • 開啟 App 畫面

    • 指令為 heroku open
      

Step 5. 網頁測試

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

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

GitHub

• ArcherHuang @ GitHub

List of blogs

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