← FC Coder · HomePhase 03 · Lesson 38 · 90 min
Lesson38
Phase Three · Fullstack · Matchday 38 · Go Live
Vercel 部署
应用真上网
Today's 3 Jobs · 今天这三件事
- 01lib/db.ts 切到 Turso · 本地跑通Vercel 上 SQLite
- 02push GitHub · Vercel import + env首次 build
- 03🌟 公网 URL 真有人能玩你的应用Phase 3 高光
🌟 暑假集训 · 90 分钟。Production vs Preview(本质点)。Vercel + Turso(SQLite hosting)+ env 变量。GitHub push 自动 build 部署。.vercel.app 域名活的瞬间 = Phase 3 高光。
Concept · 三个环境
Local / Preview / Production
// .env.local (gitignore)
TURSO_DATABASE_URL=libsql://...turso.io
TURSO_AUTH_TOKEN=...
TURSO_DATABASE_URL=libsql://...turso.io
TURSO_AUTH_TOKEN=...
local
localhost:3000 · 你电脑
preview
每 PR · xxx-git-branch.vercel.app
production
<name>.vercel.app · 真用户用
Vercel serverless 无持久 fs · SQLite 用 Turso 托管。env 各环境单独配。
Half 2 · 在屏幕上(集训 · 90 min)
Turso · GitHub · Vercel · Live · 测试
01Turso DB 切换
01Min
父亲讲三个环境(local / preview / production)
白板画一遍。本质点:Production vs Preview。
02Min
父亲已 Turso 注册 · 拿 URL + token
课前 1 周。.env.local 加 TURSO_DATABASE_URL / TURSO_AUTH_TOKEN(gitignore 挡)。
03Min
lib/db.ts 切到 libsql + createClient
drizzle/libsql + @libsql/client。pnpm i @libsql/client(父亲提前装)。
04Min
pnpm drizzle-kit push(到 Turso · 远端)
config 改 url: TURSO_DATABASE_URL。看远端 Turso DB 出现 players/squads/users 表。
05Min
tsx scripts/seed.ts(灌 Turso)
22 人进 Turso。
06Min
本地跑通 · fantasy / login / squads 都验证
数据来源换了 · 行为不变。
02Vercel import + env + deploy
07Min
git add + commit + push 到 GitHub
提前 init GitHub repo · 设 origin。
08Min
Vercel dashboard · New Project · import repo
vercel.com 登 GitHub。看 repo 列表 · 选这个。
09Min
配 env · TURSO_DATABASE_URL / TURSO_AUTH_TOKEN
在 Vercel 项目 Settings → Environment Variables 加 · Production + Preview 都加。
10Min
Deploy · 等 1-3 min · 看 build log
build 失败 → 看 log + 父亲解 · 多半 env 没配。
03🌟 公网测试 · 庆祝
11Min
🌟 部署成功 · 点 URL 打开
<name>.vercel.app 真的活了。Phase 3 高光。
12Min
公网测试:login + 创建阵容 + /discover
Real users could use this.
13Min
📸 截图 deployment + 公网 URL
Phase 3 第十三张战利品。
讲给爸爸听
4 题 · 部署心法
01三个环境差?Hint ↓
local 你电脑 · preview 每 PR 测试 · production 真用户用。隔离改坏。
02为什么 SQLite 不能直接上 Vercel?Hint ↓
serverless 无持久 fs。Turso / Postgres 救。
03环境变量为什么不 commit?Hint ↓
secrets 不能进 git。各环境单独配。
04build 失败怎么办?Hint ↓
看 deployment log。多半 env 没配 / 依赖 / TS 错。
温度计
给「真上网」打分
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
应用真在网上了 —— 任何人都能输入网址玩。
还有 13 步没打勾。Step 11 公网 URL 打开 = 算过。