Heroku + Flask + Python應用(1)：Heroku上執行Flask 網站

Heroku 使一個免費的雲端運算，在這上面也可以用來部屬網站服務，利用 VSCode 搭配 Python 讀網頁框架 Flask，在 Heroku 發布一個簡單的 Hello World網站 。

Step 1：在本機端佈屬環境。

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

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

cd /
mkdir Code
cd Code
conda create -n herokutest python=3.6

Step 3：完成建立虛擬環境後，進入「herokutest」環境。

activate herokutest

Step 4：輸入「git init」做檔案管理。

Step 5：輸入「pip list」查詢虛擬環境以安裝的套件。

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

pip install flask gunicorn

Step 7：輸入「code .」開啟VSCode。

Step 8：安裝 Python到 VScode。

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

Step 9： 輸入以下Python 程式碼，並存成app.py。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello World!'

@app.route('/<name>')
def hello(name):
    return 'Hello ' + name + '!'

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

Step 10：操作「Commit」。

1. 點擊 「Source control」。
2. 輸入「Commit」訊息。
3. 最後點擊「打勾」完成「Commit」。

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

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

完成「Commit」後，則「CHANGES」狀態將無訊息存在。

Step 11：執行程式碼。

1. 在程式碼空白處點擊滑鼠右鍵。
2. 選擇「Run Python File in Terminal」。

注意：若遇到無法成功執行，顯示「ModuleNotFoundError: No module named 'flask'」，請回到步驟6安裝 Flask 套件。

若正常執行，會提示網頁開啟的URL位置 http://127.0.0.1:5000/。

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

Step 12：建立上傳文件。
runtime.txt，輸入Heroku需要使用Python版本。

Procfile，輸入「web: gunicorn app:app」。

requirements.txt，將「herokutest」環境安裝的套件版本儲存起來，用在 Heroku 雲端上安裝的套件，在「Terminal 」輸入。

pip freeze > requirements.txt

Step 13：將新增文件做「Commit」，加入到檔案管理中，在 Terminal 輸入「git add .」與「Commit」。

Step 14：在VSCode登入Heroku，輸入「heroku login -i」，最後輸入帳密。

Step 15：輸入「heroku create」，在 Heroku 建立上傳檔案的資料夾路徑。

Step 16：最後將所檔案推上至 Heroku，輸入「git push heroku master」，這時會在 Heroku 安裝Python與指定的所有套件，佈署所需的執行環境。

最後在Heroku上開起的網頁。

到此完成在 Heroku 建立 Python 網頁站，可至Heroku 後台查看該建立的網站運作相關資訊。