/ DevOps

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

內容

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

學習目標

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

-----2019-08-02---8.46.32


前置準備作業

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

程式與軟體


範例程式

-----2019-08-02---10.00.03


啟動腳本

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

  • 在本地端的電腦安裝 heroku

    • 請使用終端機 (macOS) 或命令提示字元 (Windows) 輸入下方指令
    npm install -g heroku
    
  • 登入 Heroku

    • 請使用終端機 (macOS) 或命令提示字元 (Windows) 輸入下方指令
    heroku login
    
    • 按非 q 的任意鍵進行 Heroku 登入

    -----2019-08-02---9.18.22

    • 點選 Log in
      -----2019-08-02---9.20.36

    • 登入成功
      -----2019-08-02---9.20.48
      -----2019-08-02---9.22.05

  • 設定 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
        -----2019-08-02---8.46.32
    • 部署 Sub Repository

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

      -----2019-08-02---9.43.14
      -----2019-08-02---9.43.27

      • Heroku 上呈現 Deploy 的畫面
        -----2019-08-02---9.46.44
    • 在 Heroku 上安裝 mLab MongoDB 資料庫

      • 指令為 heroku addons:create mongolab
        -----2019-08-02---9.48.55

        • Heroku 上呈現 Resources 的畫面
          -----2019-08-02---9.49.54
    • 開啟 App 畫面

      • 指令為 heroku open
        -----2019-08-02---9.51.52

Step 5. 網頁測試

-----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