第一次把网页发布到公网
公开访问是“写了代码”和“做出真实东西”之间的重要门槛。部署需要把正确版本交给正确服务。
- 第一次完成从本地文件到公开 URL 的闭环。
- 源代码、构建产物和网站根目录
- 发布一个静态页面并记录访问地址、部署版本与回退方式。
- 完成 3.4「GitHub：远程同步与协作」
FOUNDATION
必须理解
公开访问是“写了代码”和“做出真实东西”之间的重要门槛。部署需要把正确版本交给正确服务。
部署（Deployment）把经过验证的版本交给一个持续提供访问的环境。公开 URL 会暴露本地测试没发现的路径、缓存、权限和设备差异，也是从练习走向产品的第一道门槛。
本地开发像在厨房试菜，部署像正式开门营业。打包成功只是菜做好了，顾客能否找到门、拿到正确菜单并顺利用餐仍需现场验证。
将静态任务应用连接到托管平台，平台从 GitHub 读取提交、发布文件，并返回任何人都能访问的 HTTPS 地址。
源代码、构建产物和网站根目录
源代码是你平时编辑的材料，构建产物是工具加工后真正拿去运行的文件，网站根目录则是平台对外提供内容的位置。简单静态页面可能连构建都不需要。
基础概念
源代码是开发者编辑的原始材料，构建产物是工具转换和优化后用于运行的文件，网站根目录是托管服务实际向浏览器提供文件的起点。
进一步理解
纯 HTML 项目可能直接部署源文件；含 TypeScript、React 或资源处理的项目通常要先构建。平台需要知道构建命令和产物目录，否则可能成功上传错误内容。
构建产物往往可以重建，不应手工修改。源代码变化后重新构建，才能保证线上版本与历史对应。
任务应用源码位于 src，构建生成 dist；托管配置必须把 dist 作为输出，而不是把整个开发目录公开。
“项目根目录”和“网站根目录”不一定相同。前者含开发配置，后者只包含平台要运行或提供的产物。
这一小节记住：部署前先弄清平台需要源代码还是构建产物，以及产物在哪里。
部署、发布与回滚的区别
部署是把某个版本放进线上环境，发布是让用户开始接触它，回滚是出了问题切回稳定版本。三个动作最好都能说清对应的是哪次提交。
基础概念
部署把特定版本放入远端环境，发布让用户开始接触该版本，回滚把服务切回已知稳定版本。可靠流程会记录版本、配置和恢复路径。
进一步理解
预览部署可以先验证候选版本，生产发布再指向正式访问入口。回滚是否可行取决于代码、环境配置和数据库变化是否兼容。
每次上线都应能回答：部署的是哪个提交、使用哪些环境值、如何验证、失败后切回哪里。只保存“最新版本”会让恢复失去依据。
先生成预览地址走通新增任务，再把相同版本发布到正式域名；若核心流程失败，立即切回上一个已验证版本。
重新部署不一定等于回滚。如果重新构建使用了新依赖或新配置，结果可能不再等同于旧版本。
这一小节记住：可识别版本、可验证结果和可执行回退共同构成发布安全网。
缓存、权限、日志与 404 的初步排查
线上检查不能只打开首页看一眼。图片路径、刷新、手机和无痕窗口都可能暴露本地没出现的问题；同样是 404，原因也可能在文件、路由或部署目录。
基础概念
线上故障要按浏览器缓存、访问权限、托管路由、静态资源和应用日志分层排查。404 只说明当前地址没有得到目标资源，不直接说明是哪一层配置错误。
进一步理解
先用部署平台给出的准确地址访问，再检查无痕窗口和移动网络，排除本机缓存与登录状态。Network 能看到是哪一个资源 404，平台日志能看到请求是否到达应用。
单页应用刷新子路径、文件名大小写、相对资源路径和输出目录配置都是常见线上差异。本地文件系统宽容时，问题可能只在生产出现。
首页正常但 `/tasks/1` 刷新 404，应检查托管路由和生成的路径；图片单独 404 则检查资源地址、大小写和产物中是否存在。
清缓存不是万能修复。只有证据指向旧资源时才做，并且仍要确认新版本已正确部署、其他用户也能取得正确资源。
这一小节记住：线上检查要定位具体请求，再沿平台、路由和产物寻找证据。
AI COLLABORATION
AI 如何参与
让 AI 生成部署清单，明确本地要做什么、服务器要做什么以及每一步的验证 URL。
推荐协作顺序
- 1
把项目文件树和 package.json 给 AI，让它先判断是否需要构建。
- 2
让它按当前托管平台列出入口、输出目录和环境配置。
- 3
拿公开 URL 的真实结果回来核对，不用“部署成功”提示代替验收。
我要部署一个只有 index.html、style.css、script.js 的静态任务应用。请给出平台无关的发布检查表，包括：仓库状态、入口文件、资源路径、公开 URL、无痕验证、移动端验证和回滚方式。不要假设构建命令。
一份区分部署前、部署中、部署后验证的清单，并说明每项需要留下什么证据。
人工检查清单
- 确认方案没有要求上传本地秘密，也没有把“平台显示成功”当成唯一验收。
- 要求 AI 把构建、部署、发布和回滚写成不同步骤，并给每步验证证据。
- 从无痕窗口和移动设备走完整主流程，确认不是只在开发者登录状态下可用。
COMMON TRAPS
常见误区
错误不是需要隐藏的失败，而是帮助你看清系统边界的证据。下面三类问题在 AI 辅助学习中最常出现。
平台显示绿色就收工
- 你会看到
- 构建成功，但公开页面的样式、图片或脚本仍然 404。
- 为什么发生
- 部署命令只证明平台接受了任务，不证明输出目录、路由、权限和真实域名都正确。
- 怎样纠正
- 从无痕窗口打开公开 URL，并检查主流程和 Network。
部署了错误的目录
- 你会看到
- 平台把源码目录当成产物，首页找不到或显示目录列表。
- 为什么发生
- 本地服务器可能忽略大小写、拥有本地秘密或自动处理路由，生产环境不会复制这些隐含条件。
- 怎样纠正
- 确认入口和输出目录与项目类型一致，静态项目不要凭空填写构建产物。
出了问题却不知道发布了哪版
- 你会看到
- 本地继续修改后，已经无法说清线上对应哪个提交。
- 为什么发生
- 没有记录稳定版本与数据兼容关系时，出错后只能继续修改，无法快速恢复服务。
- 怎样纠正
- 记录部署提交和时间，确认平台提供可用的历史版本与回滚入口。
HANDS-ON
动手任务
发布一个静态页面并记录访问地址、部署版本与回退方式。
- 完成 3.4「GitHub：远程同步与协作」
跟着做
- 01
确认 Git 工作区干净并记录待部署提交。
- 02
检查入口文件与所有资源使用正确大小写路径。
- 03
在托管平台导入仓库并选择静态发布。
- 04
打开公开 URL，测试新增任务和空输入。
- 05
用无痕窗口与手机再次访问，记录差异与回滚入口。
第一次完成从本地文件到公开 URL 的闭环。
发布一个故意改变标题的新版本，再回滚到前一个版本并确认 URL 恢复。
离开本课前，自问四件事
- 源代码、构建产物、项目根目录和网站根目录有什么区别？
- 部署、发布和回滚分别改变什么？
- 首页成功但某张图片 404 时，我会查看哪些证据？
- 怎样证明一个版本不仅部署成功，而且真实用户可以使用？
确认完成后，会同步更新学习中心的课程学习进度。