免費使用 Vercel 服務架設 Python/Flask 網站後端應用 demo

Published in

星際廢話線

6 min readJun 30, 2023

近年由於 Heroku 收費政策，已不再有免費的伺服器可供使用。對於學習寫程式的大家，如果要無本部署後端 App 實在是蠻困擾的，畢竟放在 GitHub 上 Hosting 並沒有辦法做後端至前端的渲染、安裝套件等等動態網站等大人的遊戲。切版的靜態網站滿足不了大家想做滿滿功能網站的學習之心！

本文根據彭彭老師的影片，試著改用 Vercel 的免費空間，比較使用 Heroku 與 Vercel 的差異。

ㄧ樣的地方：requirements.txt

Vercel 也需要 requirements.txt，裡頭可標注需求套件如 flask 版本

以官方範例檔為例，基本上是 Flask==2.3，但其實 ≥= 2 應該都可以

不ㄧ樣的地方：vercel.json、刪除 Procfile、增添 /api 資料夾

Vercel 不需要 Procfile
Vercel 需要一個 vercel.json
執行檔以 index.py 為例，範例檔預設路徑在 api/ 資料夾中

{
    "rewrites": [
      { "source": "/(.*)", "destination": "/api/index" }
    ]
}

(optional 可選) 建立一個 Pipfile 設定版本 (否則 Vercel 預設是以 python 3.9 執行）

[[source]]
url = "https://pypi.org/simple"
verify_ssl = true
name = "pypi"
 
[packages]
flask = "2.3.2"
 
[requires]
python_version = "3.11.3"

新增一個 .gitignore 避免上傳一些敏感或不需要的本地部署資料

.vercel
*.log
*.pyc
__pycache__

# Environments 
.env 
.venv 
env/ 
venv/
ENV/ 
env.bak/ 
venv.bak/

像是 .env 這種常常拿來存放帳密、密鑰，push 到 GitHub 就倒大楣囉，算常態。
.vercel 則是一些連結到 Vercel 部署後會生成的東西，project.json 裡頭是你的專案 ID 與組織/使用者 ID，也算是一種隱私資訊，不應該被 git 追蹤呦。

關於 git

與 Heroku 要下載專用軟體，並可直接推上不同，Vercel 有可以一鍵同步部署 GitHub 的方便功能。因此，可以先推到 GitHub 上去連結即可。例如先建立一個叫 flask 的 repo (大概就類似專案 repository 儲存庫)，通常全稱就是你的使用者名稱 ID /repo，如 steward379/flask

接著就是一些常見的 git 行為啦。如果遠端 GitHub 已經建好與 root 資料夾同名的 repo ，也安裝好了 git (在 mac 上是 brew install git 先以 homebrew 底層套件安裝工具安裝好，基本上有了因為很多人也是用這個按安裝 python 等等），本地也設定好權限就可已使用了。可以參考這篇文章做權限設定。

git init 初始化專案

git add . 將所有檔案除 .gitignore 提到的以外全部上 stage

git commit -m "這邊打你想放的資訊" 這裡就是你的艦長日記，分條列點告訴大家你做了什麼改動，通常帶有標題

以上就可以在你的本地 git 做出一條捷運線啦！這裡 HackMD 大神朋友推薦使用 fork 這套 GUI 軟體做版本管理（版控）視覺化。⚠️ GitHub 是遠端存放檔案的地方，跟 Git 是不同的！Git 本身是一種版本控制工具，也同時存在你的本地端 (local)，但你需要推到遠端伺服器 (remote) 去才能去做後續的部署網站，因為 GitHub 只提供簡單的 hosting (代管靜態網站) 功能，對於我們所需的動態網站是不夠的。

到這裡如果直接 git push ，git 會不知道要推到哪裡去….所以必須

git remote add origin<這邊再填入 SSH 或 https 網址>

如 git remote add origin https://github.com/steward379/flask

git push -u origin master 就可以推到預設的 master 這個 branch (分支)，加了 -u 設定預設值以後就可以直接打 git push 雖然也可以不用 origin 這個遠端儲存庫名，但「起源/源頭」這個命名算是一般的慣例。

push 成功之後去你的儲存庫網址看看有沒有更新：https://github.com/steward379/flask，有的話就可以準備 Vercel 了