# 在Heroku上進行Flask後端專案部署 (Deploy Flask backend server on Heroku)

<br>

## 1. 前言
### Heroku的部署：
- 在Heroku的dashboard中，使用者可以看到主要的部署方式有兩種：
1. 透過Heroku CLI push專案到heroku repo作部署
2. 透過連線GitHub repo作部署

- 然而從2022年4月開始，如果使用者嘗試透過GitHub進行部署，在作登入時會收到 `Items could not be retrieved, Internal server error.` 的報錯，原因在於Heroku官網所發出的 [Heroku Security Notification](https://status.heroku.com/incidents/2413) 這篇公告，大致上的原因在於Heroku上出現嚴重security leak可能導致使用者repo的OAuth Token外洩，進而導致Private repo的source code外洩，因此直至目前Heroku暫時撤銷GitHub的連線部署。
- 因此，我們嘗試使用Heroku CLI來進行後端的部署。

<br>
<br>

## 2. 下載與安裝Heroku CLI (Download and install Heroku CLI)

### Step1: 使用homebrew安裝Heroku CLI

$ brew tap heroku/brew && brew install heroku

### Step2: 設置CLI

$ curl https://cli-assets.heroku.com/install.sh | sh

### Step3: 查看安裝結果

$ heroku --version
heroku/7.60.2 darwin-x64 node-v14.19.0

<br>
<br>

## 3. 透過CLI登入Heroku

$ heroku login

按照指示按下`q`以外的其他按鍵，會打開網頁視窗執行登入動作，完成後關閉網頁視窗，使用者會在CLI介面看到`Logging in... done` 及 `Logged in as [e-mail]` 的提示，代表成功登入。

<br>
<br>

## 4. 新增Heroku專案

接著我們新建一個Heroku專案，方法可以透過Heroku網頁也可以直接在CLI上作新建
### 方法1. 透過網頁新建Heroku專案
- 首先進到Heroku Dashboard點選右上角`New -> Create new app`
- 設定專案名稱
- 完成後，進入專案頁面中，點擊Settings並在Buildpacks選項點擊新增`heroku/python`
- 此時即完成新增一個Python Flask專案的設定
<br>
### 方法2. 透過終端機新建Heroku專案
- 在終端機輸入

    heroku create [APP NAME] --buildpack heroku/python

注意`[APP NAME]`的地方要替換成您的專案名稱，例如在上方網頁新增專案案例中，我所取名的`ninjareport`。

<br>
<br>

## 5. 部署文件
在Heroku CLI設置完成後，現在可以準備將Flask專案部署到Heroku上，首先，我們假設已經在本地端完成一個Flask專案`ninjareport`，其專案路徑假設如下：

./ninjareport
  |- app.py
  |- db
  |   |- db.py
  |
  |- module1
  |   |- module1.py
  |
  |- module2
      |- module2.py

我們首先要準備安裝`gunicorn`這個套件，這個套件的功能在於建立網頁app和server之間的橋樑，也就是在常見前後端分離的架構中，用於運行後端server提供client在前端作呼叫使用。

$ pip3 install guicorn

接著準備第一個文件`requirements.txt`，這個文件的目的是要紀錄Heroku在部署需要透過`pip3`去安裝的套件，我們可以直接在根目錄下在終端機輸入以下指令來產生`requirements.txt`檔案。

$ pip3 freeze > requirements.txt

接著我們要在根目錄下準備第二份檔案`Procfile`，紀錄要讓Heroku執行Flask `app.py`的方法，我們可以直接在根目錄下在終端機輸入以下指令來產生`Procfile`檔案。

$ echo "web: gunicorn app:app" > Procfile

最後由於Heroku上執行的Python版本為`3.10.x`，其版本可能導致有些套件無法成功執行，因此我們可以指定在Heroku上執行的Python版本為更穩定的`3.8.10`版本，指定執行Python的方法只要在根目錄下創建一個檔案`runtime.txt`並在檔案中紀錄執行版本即可。

$ echo "python-3.8.10" > runtime.txt

<br>
<br>

## 6. Push專案
在準備好執行文件後，現在我們的專案目錄下應該會長這樣：

./ninjareport
  |- app.py
  |- db
  |   |- db.py
  |
  |- module1
  |   |- module1.py
  |
  |- module2
  |   |- module2.py
  |
  |- requirements.txt
  |- Procfile
  |- runtime.txt

這時候我們就可以準備將專案push到Heroku的專案repo了，我們首先也在本地建立一個git repo

$ cd ninjareport

$ git init

接著加入檔案並commit

$ git add .
$ git commit -m "init commit"

將Heroku remote指向剛剛建立的專案repo

$ heroku git:remote -a ninjareport

最後做push，在push到main branch時由於我們在專案中有加入執行文件，因此Heroku server會讀取執行文件去做套件安裝及運行。

$ git push heroku main

如果有在終端機看到以下提示就代表我們成功部署好了Flask server

remote: Verifying deploy... done.
To https://git.heroku.com/ninjareport.git

最後到 **https://ninjareport.herokuapp.com** 就可以看到成功部署後的成果囉！

<br>
<br>

## 參考資料：
1. Heroku Security Notification. https://status.heroku.com/incidents/2413
2. Moses Gitau. Deploying a Flask application on Heroku. https://medium.com/@gitaumoses4/deploying-a-flask-application-on-heroku-e509e5c76524
3. ERROR: Could not build wheels for backports.zoneinfo, which is required to install pyproject.toml-based projects. https://stackoverflow.com/questions/71712258/error-could-not-build-wheels-for-backports-zoneinfo-which-is-required-to-insta