LearningSky.io

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

Archer -

內容

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

學習目標

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

前置準備作業

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

程式與軟體

範例程式

啟動腳本

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

修改 Mongoose 連線與 Listen 設定

  • Mongoose
  • Listen

Heroku 設定與部署

Step 1. 登入到 Heroku

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. 網頁測試

GitHub
List of blogs