Heroku + Flask + Python應用(2)：VSCode建置Line Bot，上傳Heroku佈署

距離前一篇 Heroku + Flask + Python應用(1)：Heroku上執行Flask 網站 文章發佈到現在約9個月多的時間，今在以相同的操作方式建置 Line Bot 在 Heroku 進行介紹佈署方式。
步驟 1：在本機端佈屬環境。

1. 請至 Heroku  https://id.heroku.com/login 註冊一個帳號。
2. 下載安裝 Heroku CLI https://devcenter.heroku.com/articles/heroku-cli。
3. 下載安裝 Git https://git-scm.com/downloads，上傳檔案到 Heroku 使用。
4. 下載安裝VSCode https://code.visualstudio.com/。

步驟 2：開啟「命令提示字元」輸入以下指令，建立Code資料夾，用 conda 建立「linebot」虛擬環境。

cd /
mkdir Code
cd Code
conda create -n linebot python=3.6.2

步驟 3：完成建立「linebot」虛擬環境後，進入「linebot」環境。

activate linebot

步驟 4：在「命令提示字元」輸入「git init」，產生「.git」資料夾，「Code」資料夾所有檔案用git做管理。

步驟 5：在「命令提示字元」輸入「pip list」查詢在虛擬環境「linebot」中，有已安裝的套件與其版本。

步驟 6：安裝「flask」、「gunicorn」到「linebot」環境中，後面操作時會使用到。

pip install flask gunicorn

步驟 7：在「命令提示字元」輸入「code .」開啟 VSCode。

步驟 8：在 VScode 安裝 Python外掛套件，用來讓VSCode能做 Python。

1. 點擊「Extensions」。
2. 輸入「Python」尋找。
3. 點擊「Install」安裝。

步驟 9：透過VSCode 建立Python 檔案。

1. 切換「檔案總管」頁籤。
2. 點擊「檔案」。
3. 點擊「新增檔案」。

步驟 10：切換成Python開發環境。

• 修改直譯器。

• 切換成虛擬環境「linebot」。

修改檔案編輯使用的程式。

步驟 11：輸入以下程式碼，存成 app.py。

import os

from flask import Flask, request, abort

from linebot import (
    LineBotApi, WebhookHandler
)

from linebot.exceptions import (
    InvalidSignatureError
)

from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage,
)

app = Flask(__name__)

LINE_CHANNEL_ACCESS_TOKEN = os.environ.get('LINE_CHANNEL_ACCESS_TOKEN')
LINE_CHANNEL_SECRET = os.environ.get('LINE_CHANNEL_SECRET')
line_bot_api = LineBotApi(LINE_CHANNEL_ACCESS_TOKEN)
handler = WebhookHandler(LINE_CHANNEL_SECRET)

@app.route("/", methods=['GET'])
def hello():
    return 'hello heroku'

@app.route("/callback", methods=['POST'])
def callback():
    signature = request.headers['X-Line-Signature']
    body = request.get_data(as_text=True)

    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        print("Invalid signature. Please check your channel access token/channel secret.")
        abort(400)

    return 'OK'

@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    line_bot_api.reply_message(
        event.reply_token,
        TextSendMessage(text=event.message.text))

if __name__ == "__main__":
    app.run()

步驟 12：由於資料夾中有新增檔案，且這些檔案未被git列入管理，因此在VSCode上會顯示 「U」，代表檔案處於「Untracked」的狀態，將檔案加入local repository，後續再加入 github 中。
在VSCode終端機中輸入「git add .」，將檔案加入管理。

檔案加入管理後，VSCode的狀態會從「U」變成「A」，代表檔案「被新增」。

除了上述兩個狀態，VSCode的其他狀態。

1. M是Modified，檔案狀態是「有做修改的」。
2. D是Deleted，檔案狀態是「被刪除的」。

步驟 13：檔案存入local repository中。

1. 最後點擊「打勾」完成「認可(Commit)Commit」。
2. 輸入「認可(Commit)」訊息。

注意，若未登入Git使用者操作資訊，將出現以下提示。

請在「命令提示字元」下輸入 git所需相關資訊。
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

完成「認可(Commit)」後，VSCode左側畫面就會顯示剛剛輸入的程式碼，這表示app.py的檔案已存進local repository中。

步驟 14：在「命令提示字元」輸入指令，安裝line-bot-sdk v1.16.0 套件。

步驟 15：執行程式碼，將程式第19、20行暫時做修改調整(為了測試使用)，接著在程式碼空白處點擊滑鼠右鍵，選擇「在終端機執行Python檔案」。

注意：若遇到無法成功執行，顯示「ModuleNotFoundError: No module named 'flask'」，請回到步驟6安裝 Flask 套件。
若正常執行，會提示網頁開啟的URL位置 http://127.0.0.1:5000/，Port 5000 是 flask 預設。

開啟瀏覽器輸入 http://127.0.0.1:5000/ 可見到成功畫面，測試成功後，準備建立上傳Heroku的文件。

步驟 16：建立上傳至Heroku建置執行環境的文件。

1. runtime.txt：指定Python版本。
2. Procfile：在Heroku環境指定要執行的檔案。
3. requirements.txt：將環境操作所需的套件與版本打包起來。

runtime.txt，輸入Heroku需要使用Python版本 python-3.6.2。

Procfile，輸入「web: gunicorn app:app –log-file -」，–log-file - 為打開顯示除錯訊息，若不想顯示除錯訊息可以使用「web: gunicorn app:app」。

requirements.txt，將虛擬環境「linebot」安裝的套件版本儲存起來，用來在 Heroku 雲端上安裝的套件佈署用，在VSCode「終端機」輸入。

pip freeze > requirements.txt

步驟 17：將新增文件加入到「 git 暫存區（Staging Area）」做檔案管理，「VSCode終端機」輸入「git add .」，最後在「原始檔控制」頁籤，點擊「認可(Commit)」按鈕與加入「認可(Commit)」訊息。

步驟 18：透過「VSCode終端機」做登入Heroku，在終端機輸入「heroku login -i」，最後輸入帳密。

步驟 19：輸入「heroku create」，在 Heroku 建立 app與資料夾，如果成功建立，將回傳一個網址與一個檔案上傳連結。

步驟 20：最後將虛擬環境「linebot」中所有建置的檔案推上至 Heroku，在「VSCode終端機」上輸入「git push heroku master」。

步驟 21：將步驟19得到的網址，填入Line Developers後台，「Webhook settings」設定的「Webhook URL」，在網址最後加上「/callback」，並開啟「Use webhook」。

步驟 22：在Line Developers後台取得「Channel secret」、「Channel access token」，到 heroku 後台帳號的「Settings」頁籤，在「Config Vars」設定，點擊「Reveal Config Vars」按鈕，分別在「KEY」填入「LINE_CHANNEL_ACCESS_TOKEN」、「LINE_CHANNEL_SECRET」，「VALUE」填入Channel secret、Channel access token。

步驟 23：點擊「Settings」頁籤右上角「Open app」按鈕，確認程式碼中可以執行在Heroku上網頁的訊息。

最後透過Heroku提供的log view查看，在Line Bot上輸訊息的回應狀態。