旅程的最后一步
应用在 localhost、你自己电脑上跑。大师的最后技能：放到真实地址。前端和后端分开部署——正是我们分开建的原因。
部署前端（React）
Vite 一条命令把应用变成成品文件：
npm run build创建 dist/ 文件夹——纯 HTML、CSS、JavaScript。你 知道 放哪：静态网站，和第 1 级一样！
- GitHub Pages——把
dist/内容上传到仓库，第 1 级那样。 - 或更方便 Netlify / Vercel——免费，连 GitHub 账号，每次改动自动部署。和家长试一个；引导设置几步就完成。
部署后端（Node.js）
服务器需要永远开着的电脑。Render 或 Railway 这类服务——有免费档，学校项目够用：
-
把
my-server文件夹上传到 GitHub 单独仓库（不要node_modules——服务器会自动npm install）。 -
在 render.com（和家长一起）选 New → Web Service，连 GitHub 仓库，设置：Build Command
npm install，Start Commandnode server.js。 -
Render 给你像
https://my-server.onrender.com的地址。浏览器试.../api/messages——API 在互联网上上线了！ -
最后细节：前端里把所有
http://localhost:3900换成新服务器地址，再部署前端。
把留言板放到世界前，像守卫一样想： 互联网上任何人都能找到。保留服务器上的留言长度检查（上一课有了！），永远不要把留言当原始 HTML 显示（React 自动保护——又一个用它的理由），和家长约好偶尔检查留言本。大网站有整个团队做——叫 moderation（审核）。
🏆 恭喜，大师！
花点时间回想起点：
- 第 1 级： 空文件 →
<h1>It works!</h1>→ GitHub Pages 上整站 HTML 和 CSS。 - 第 2 级： 变量、条件、函数 → 深色模式、画廊、测验、表单。
- 第 3 级： 终端、Node.js、React、组件、state、Express、API → 互联网上的全栈应用。
你现在知道的是网页开发者手艺的真正基础。不是玩具版——是真正基础。和真实公司一样的工具、流程、思维方式。
接下来去哪？
几个自然延伸的方向：
- 数据库——让留言撑过服务器重启（SQLite 是最友好的起点）。
- TypeScript——带错误检查的 JavaScript；公司标准。
- 终端里的 Git——
git add、git commit、git push代替手上传文件。 - 你自己的想法——最好的老师。给班级做应用？给俱乐部做锦标赛 bracket？现在你知道怎么建。
检查一下（也是告别）： 前端和后端都在公开地址跑，留言板接受来自世界各地的消息。把地址发给家人——别忘了告诉他们是你亲手建的。🚀
这堂课你要记住
- 前端：
npm run build→ 静态文件 → GitHub Pages/Netlify/Vercel。 - 后端：GitHub 仓库 → Render/Railway → 公开 API 地址 → 前端替换 localhost。
- 公开应用是责任：服务器端检查和大人偶尔盯着。
© 2026 Ing. Martin Polak / AlgoRhino · 内容使用条款