實戰 Vercel 服務架設 Flask 網站應用撞牆細節

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

本文以製作一實際使用的 Flask 為例，是上面 👆 這篇的續集。

Photo by John Schnobrich on Unsplash

為了做一個實際可使用的 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 去囉！

Photo by Mailchimp on Unsplash