本文以製作一實際使用的 Flask 為例，是 [免費使用 Vercel 服務架設 Python/Flask 網站後端應用 demo](https://wehelp.tw/topic/5740188097576960) 的續集，未查看者可以先看上ㄧ篇。 為了做一個實際可使用的 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 是指第二版本的 Cercel。 👋 使用 `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` ㄧ樣。 ```python from flask import Flask, render_template, jsonify, request, redirect, url_for, session, g import os ``` pipenv 是 python 的套件管理工具，是 pip 跟 env (環境 environment) 的合體，`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 去囉！