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

內容

  • 學習目標
  • 前置準備作業
  • 程式與軟體
  • 範例程式
  • 啟動腳本
  • 修改 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