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