近年由於 Heroku 收費政策，已不再有免費的伺服器可供使用。對於學習寫程式的大家，如果要無本部署後端 App 實在是蠻困擾的，畢竟放在 GitHub 上 Hosting 並沒有辦法做後端至前端的渲染、安裝套件等等動態網站等大人的遊戲。切版的靜態網站滿足不了大家想做滿滿功能網站的學習之心！ 本文根據 [彭彭老師的影片](https://www.youtube.com/watch?v=wWRYBUzEG6E&list=PL-g0fdC5RMboYEyt6QS2iLb_1m7QcgfHk&index=25)，試著改用 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](https://github.com/steward379/flask)`，有的話就可以準備 Vercel 了 ## Vercel 使用 Vercel 使用真是簡單到不行，首先可以選擇用途，我之前是選 Hobby 但大家可以選專業一些的。 在右上的 Add new… 下拉選擇 Project，並在 Import Git Repository 找到你剛才的 repo：  例如我的是 Flask 接著填寫表格，Project Name 隨你取，Framework Preset 先不用動，留在Other (他預設是用 JS/TS) ，Root directory 也不用動。其餘基本上都不要管。直接 Deploy! 等待勾勾完成，就可以點網址看成果囉。 如果有錯也會跳錯誤訊息提醒你。  最後值得一提的是，其實官方針對 python 等非 js 語言有範例檔案跟文件，都可以多多參考。 使用以下指令就可以在本地安裝 vercel 並測試了。 ``` npm i -g vercel vercel dev ``` 官方的 flask 範例程式碼，基本上我就是照他的為主 [examples/python/flask at main · vercel/examples · GitHub](https://github.com/vercel/examples/tree/main/python) 官方提供的友善範例網站樣板 [Python Hello World — Vercel](https://vercel.com/templates/python/python-hello-world) 對，這是文件 [Using the Python Runtime with Serverless Functions | Vercel Docs](https://vercel.com/docs/functions/runtimes/python) 我做的在這 [flask-x21v.vercel.app](https://flask-x21v.vercel.app/) 感謝閱讀，續集請看 🌞[實戰 Vercel 服務架設 Flask 網站應用撞牆細節](https://wehelp.tw/topic/6316628274839552)