# 20221006 My First Cloud App on Heroku
學習目標:
1. 預備雲端程式(APP)的設定檔
2. 將 Web App 部署到雲端
## Part 0: 在本地(local)端建立 Web App
延續[上週的課程內容](https://hackmd.io/9l0JA1atQLqYNytYsTESVQ), 請確認 Web App 能成功在本地(local)端執行
參考程式碼
```python=
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello, World!'
if __name__ == '__main__':
app.run()
```
執行應用程式
```
PS D:\pythonlab_111_MIG004301\firstApp> python app.py
```
## Part 1: 預備雲端程式(APP)的設定檔
步驟1: 描述使用的 python 環境
在專案的資料夾中新增一個檔案, 並取名為 runtime.txt
```
python-3.10.7
```
步驟2: 描述程式運作所需要的套件
在專案的資料夾中新增一個檔案, 並取名為 requirements.txt
```
Flask
gunicorn
```
Notes: gunicorn 是為了在 heroku 啟動專案用的套件
步驟3: 如何啟動/執行程式
在專案的資料夾中新增一個檔案, 並取名為 Procfile
```
web gunicorn app:app
```
第一個 app 指的是主程式.py 的名稱. 因為我們的主程式取名為app.py, 所以, 冒號前面的變數用app
第二個 app, 指的是主程式中, 設定 Flask 應用程式的物件的變數. 因為我們取變數為 app, 所以, 冒號後面的變數用app
```
app = Flask(__name__)
```
如果電腦沒有安裝 GIT TOOL, 請在下一個步驟前, 安裝 git, 並設定 Git 使用者帳號.
```
> git config --global user.email "you@example.com"
> git config --global user.name "Your Name"
```
## Part 2: 將網站伺服器部署到 Heroku
步驟1: 註冊 Heroku 帳號
步驟2: Create new app
步驟3: 輸入 app 名稱, 取的名字必須是 "唯一" 的; 然後選擇主機地區, 按 "Create app"
步驟4: 點選 "部署"(deploy) 的 tab.
步驟5: 下載並安裝 Heroku CLI,
步驟6: 確保在Visual studio code 的終端機可以正常使用 git 和 heroku.
步驟7: 登入 heroku, 輸入 email 及 password
```
heroku login
```
步驟8: 初始化專案, 這個指令只有當你部署新的專案(new app)的第一次的時候, 才需要做的動作
```
git init
heroku git:remote -a 專案名稱
```
步驟9: 部署專案
```
git add .
git commit -m "First Deploy"
git push heroku master
```
部署10: 執行網頁
以後每次修改程式之後, 需要用下列命令重新部署
```
git add .
git commit -m "Second Deploy"
git push heroku master
```
Sign in with Wallet
Connect another wallet