LESSON 3.8 / FIRST VISIBLE RESULT

第一次把网页发布到公网

部署把某个明确版本交给公开服务。命令成功只是过程证据,完成判断还要从公网访问并知道怎样回到上一个版本。

预计阅读约 25 到 40 分钟
完成结果获得公开 URL,记录对应提交和回退方法,并从无痕窗口与手机宽度完成访问检查。
本课目标
  • 获得公开 URL,记录对应提交和回退方法,并从无痕窗口与手机宽度完成访问检查。
  • 源代码、构建产物和网站根目录
  • 完成第一次把网页发布到公网后,应当获得公开 URL,记录对应提交和回退方法,并从无痕窗口与手机宽度完成访问检查,并保留diff、提交记录、远端历史和公开页面作为可重复检查的依据。
开始之前
  • 完成 3.7「GitHub:远程同步与协作」
01

FOUNDATION

必须理解

部署(Deployment)把经过验证的版本交给一个持续提供访问的环境。公开 URL 会暴露本地测试没发现的路径、缓存、权限和设备差异,也是从练习走向产品的第一道门槛。

本课依次讲清源代码、构建产物和网站根目录、部署、发布与回滚的区别和缓存、权限、日志与 404 的初步排查,最后通过“用无痕窗口与手机再次访问,记录差异与回滚入口”检查学习结果。

先建立整体直觉

本地开发像在厨房试菜,部署像正式开门营业。打包成功只是菜做好了,顾客能否找到门、拿到正确菜单并顺利用餐仍需现场验证。

贯穿本课的实际场景

将静态任务应用连接到托管平台,平台从 GitHub 读取提交、发布文件,并返回任何人都能访问的 HTTPS 地址。

概念 1

源代码、构建产物和网站根目录

先用白话理解

源代码是你平时编辑的材料,构建产物是工具加工后确实拿去运行的文件,网站根目录则是平台对外提供内容的位置。简单静态页面可能连构建都不需要。

基础概念

源代码是开发者编辑的原始材料,构建产物是工具转换和优化后用于运行的文件,网站根目录是托管服务实际向浏览器提供文件的起点。

进一步理解

纯 HTML 项目可能直接部署源文件;含 TypeScript、React 或资源处理的项目通常要先构建。平台需要知道构建命令和产物目录,否则可能成功上传错误内容。

构建产物往往可以重建,不应手工修改。源代码变化后重新构建,才能保证线上版本与历史对应。

放进实际场景

任务应用源码位于 src,构建生成 dist;托管配置必须把 dist 作为输出,而不是把整个开发目录公开。

容易混淆的地方

“项目根目录”和“网站根目录”不一定相同。前者含开发配置,后者只包含平台要运行或提供的产物。

这一小节记住:部署前先弄清平台需要源代码还是构建产物,以及产物在哪里。

概念 2

部署、发布与回滚的区别

先用白话理解

部署是把某个版本放进线上环境,发布是让用户开始接触它,回滚是出了问题切回稳定版本。三个动作最好都能说清对应的是哪次提交。

基础概念

部署把特定版本放入远端环境,发布让用户开始接触该版本,回滚把服务切回已知稳定版本。可靠流程会记录版本、配置和恢复路径。

进一步理解

预览部署可以先验证候选版本,生产发布再指向正式访问入口。回滚是否可行取决于代码、环境配置和数据库变化是否兼容。

每次上线都应能回答:部署的是哪个提交、使用哪些环境值、如何验证、失败后切回哪里。只保存“最新版本”会让恢复失去依据。

放进实际场景

先生成预览地址走通新增任务,再把相同版本发布到正式域名;若核心流程失败,立即切回上一个已验证版本。

容易混淆的地方

重新部署不一定等于回滚。如果重新构建使用了新依赖或新配置,结果可能不再等同于旧版本。

这一小节记住:可识别版本、可验证结果和可执行回退共同构成发布安全网。

概念 3

缓存、权限、日志与 404 的初步排查

先用白话理解

线上检查不能只打开首页看一眼。图片路径、刷新、手机和无痕窗口都可能暴露本地没出现的问题;同样是 404,原因也可能在文件、路由或部署目录。

基础概念

线上故障要按浏览器缓存、访问权限、托管路由、静态资源和应用日志分层排查。404 只说明当前地址没有得到目标资源,不直接说明是哪一层配置错误。

进一步理解

先用部署平台给出的准确地址访问,再检查无痕窗口和移动网络,排除本机缓存与登录状态。Network 能看到是哪一个资源 404,平台日志能看到请求是否到达应用。

单页应用刷新子路径、文件名大小写、相对资源路径和输出目录配置都是常见线上差异。本地文件系统宽容时,问题可能只在生产出现。

放进实际场景

首页正常但 `/tasks/1` 刷新 404,应检查托管路由和生成的路径;图片单独 404 则检查资源地址、大小写和产物中是否存在。

容易混淆的地方

清缓存不是万能修复。只有证据指向旧资源时才做,并且仍要确认新版本已正确部署、其他用户也能取得正确资源。

这一小节记住:线上检查要定位具体请求,再沿平台、路由和产物寻找证据。

02

AI COLLABORATION

AI 如何参与

在第一次把网页发布到公网这一课,AI 负责根据真实材料解释源代码、构建产物和网站根目录并指出遗漏,学习者负责控制范围、执行修改和核对diff、提交记录、远端历史和公开页面。

推荐协作顺序

  1. 1

    把项目文件树和 package.json 给 AI,让它先判断是否需要构建。

  2. 2

    让它按当前托管平台列出入口、输出目录和环境配置。

  3. 3

    拿公开 URL 的真实结果回来核对,不用“部署成功”提示代替验收。

可直接使用的 Prompt
这是项目文件树、构建方式和目标托管服务。请给一份部署清单,分别写本地准备、平台配置、公开验证和回退步骤。不要索取令牌或密钥,不假设命令成功就代表网站可用。
应该得到什么

一份区分部署前、部署中、部署后验证的清单,并说明每项需要留下什么证据;第一次把网页发布到公网的人工验收必须回到真实页面、请求、终端、测试或数据结果,不能用 AI 的文字说明代替。

人工检查清单

  • 确认方案没有要求上传本地秘密,也没有把“平台显示成功”当成唯一验收。
  • 要求 AI 把构建、部署、发布和回滚写成不同步骤,并给每步验证证据。
  • 从无痕窗口和移动设备走完整主流程,确认不是只在开发者登录状态下可用。
03

COMMON TRAPS

常见误区

下面三类问题会让任务看似完成,却经不起刷新、错误输入或真实环境检查。先看现象,再找原因和修正方法。

误区 1

只看部署命令成功

你会看到
平台显示完成,但公开页面仍旧或打不开
为什么发生
部署任务结束只说明平台完成了一次操作,不能证明公网请求和用户流程可用。
怎样纠正
从独立浏览器访问并检查请求
误区 2

无法说明线上版本来源

你会看到
出现问题时不知道该回退到哪里
为什么发生
没有提交标识就无法把线上行为对应到代码,也无法选择可靠的回退点。
怎样纠正
记录部署对应的提交和时间
误区 3

把凭证写进仓库

你会看到
部署配置方便了,密钥却公开了
为什么发生
仓库会复制到开发机和构建环境,凭证的暴露范围因此难以控制。
怎样纠正
使用平台秘密管理并检查提交差异
04

HANDS-ON

动手任务

获得公开 URL,记录对应提交和回退方法,并从无痕窗口与手机宽度完成访问检查。

准备条件
  • 完成 3.7「GitHub:远程同步与协作」

跟着做

  1. 01

    确认 Git 工作区干净并记录待部署提交。

  2. 02

    检查入口文件与所有资源使用正确大小写路径。

  3. 03

    在托管平台导入仓库并选择静态发布。

  4. 04

    打开公开 URL,测试新增任务和空输入。

  5. 05

    用无痕窗口与手机再次访问,记录差异与回滚入口。

完成标志

获得公开 URL,记录对应提交和回退方法,并从无痕窗口与手机宽度完成访问检查。

加餐挑战

发布一个故意改变标题的新版本,再回滚到前一个版本并确认 URL 恢复。

离开本课前,自问四件事

  • 源代码、构建产物、项目根目录和网站根目录有什么区别?
  • 部署、发布和回滚分别改变什么?
  • 首页成功但某张图片 404 时,我会查看哪些证据?
  • 部署成功以后,我还要怎样证明真实用户可以使用这个版本?
完成本课了吗?

确认完成后,会同步更新学习中心的课程学习进度。