實戰 Vercel 服務架設 Flask 網站應用撞牆細節
免費使用 Vercel 服務架設 Python/Flask 網站後端應用 demo
本文以製作一實際使用的 Flask 為例,是上面 👆 這篇的續集。
為了做一個實際可使用的 Flask 應用,我們使用跟上次ㄧ樣的設定:requirement.txt, Pipfile, .gitignore, vercel.json等等。
遇到的問題
vercel.json
原本是執行檔以 index.py 為例,範例檔預設路徑在 api/ 資料夾中。
{
"rewrites": [
{ "source": "/(.*)", "destination": "/api/index" }
]
}
目前已經遵照 Python 的預設,在 /.root 路徑下就有 app.py,且底下的 /templates, /static 會依照 app.py 相對預設路徑存在。
👋 version : 2 是指第二版本的 vercel。
👋 使用 builds
來告訴 vercel 使用 python (預設使用 3.9) 來架起 app.py 的網站。
👋 使用 routes
,將所有路由由 /(.*)
正規表達式匹配,所有 Client Side 的客戶端請求都會被帶到 app.py 主程式。
👋 使用縮寫如 src, dest
因為一直沒有釐清 version 2 文件中 rewrite 的運作方式,才會造成這個問題。根據 ChatGPT 4,”rewrite” 的主要功能是改寫請求的路徑,而不是改變請求的目標或結束請求的處理。一旦一個請求的路徑被重寫,該請求會繼續查找其他的路由或重寫規則。則這在某些情況下非常有用,比如想改變 URL 的結構,但又不想改變伺服器端路由的設定時。
{
"version": 2,
"builds": [
{
"src": "app.py",
"use": "@vercel/python"
}
],
"routes": [
{"src": "/(.*)", "dest": "/app.py"}
]
}
Pipfile 之前沒有 lock,但因為只有 flask 一個套件,沒有用到任何標準函式庫的套件,有 requirement.txt 文件寫了 flask,所以沒有問題。
這次我使用了許多的標準函式庫套件,要嘛就要寫到 txt 文件中,不然就要使用 pipenv install package
,就像 Node.js 生態中,使用 npm install
安裝 package.json 使其 lock ㄧ樣。
from flask import Flask, render_template, jsonify, request, redirect, url_for, session, g
import os
...
pipenv 是 python 的套件管理工具,是 pip 跟 env (環境 environement) 的合體,pip install pipenv
就可以安裝 Pipfile 裡頭的檔案使其成 Pipfile.lock,並安裝所有需要的套件。
本地端開發
在本地端使用 python3 app.py
成功測試後,使用 vercel
直接上傳到 vercel。生成的 .vercel 不需理會。
My-flask-app
│
│ README.md
│ vercel.json
│ requirements.txt
│ Pipfile
│ Pipfile.lock
│ .env
│ .gitignore
│ app.py
│
└──── .vercel // 自動生成
│ │ project.json
│ │ README.md
│ │ …
└──── templates
│. │ template.html
│ │ index.html
│. │ error.html
│ │ …
│ │
└──── static
│ │ favicon.ico
│. │
│ └───css
│ └───js
│. └───images
```
接下來可以按終端機的 inspect 網址去 vercel 網域裡頭管理,並且連結到你的 GitHub 相應的 Repo 去囉!