# Dyad Vercel 部署：同步 GitHub 并核对线上路由与环境变量

本站已构建并在本地检查参考页面；未授权 GitHub、未推送代码、未部署 Vercel，也没有虚构公网 URL。

## 本地运行

需要 Node.js 20+，本参考工程没有 npm 第三方运行依赖。

```sh
npm ci --ignore-scripts
npm run check
npm run dev
```

服务只绑定 127.0.0.1:8456；修改端口可运行 `PORT=8457 npm run dev`。W03 与 W11 包含随包本地 React 18.3.1 UMD 运行库及许可，前者 hash 路由不需要服务器路径回退。

## 七步操作

### 1. 准备一个没有真实用户资料的发布副本

本题是虚构“山岚夜谈”活动站。index.html 与 event.html 可独立运行，部署前先确认内容与图片授权，检查不会把 .env、token 或业务数据打包进静态目录。

```sh
npm run check
```

### 2. 确认构建产物和路由类型

npm run build 将本题 HTML/CSS/JS复制到 dist；它不是 Dyad 默认 Vite 工程。实际生成应用应按自己的 package.json 选择 build 命令与 output directory，不要照抄本题的静态设置。

```sh
npm run build
```

### 3. 连接 GitHub 的独立练习仓库

在 Dyad 应用详情 Connect to GitHub，核对仓库可见性和内容后再 Sync to GitHub。同步会向远端写入代码；本次没有执行账户授权和推送，所以配图仅展示本地待发布工程。

### 4. 在 Vercel 导入并检查环境名

选择自己的练习仓库，核对 Framework Preset、Build Command、Output Directory 和变量适用环境。env-manifest.json 只记录变量名与公开/私有边界，没有真实密钥。前端 VITE_ 值会进入浏览器包，不放模型服务密钥。

```sh
cat env-manifest.json
```

### 5. 完成部署后填写真正的源站地址

只有 Vercel 实际显示成功且页面可访问后，才把该地址填给 check-origin.mjs。本包不预置似真域名，也不把 localhost 命名为上线结果；脚本默认拒绝未提供目标。

```sh
node check-origin.mjs "$PUBLISHED_ORIGIN"
```

### 6. 回读首页、深层路径与资源类型

脚本验证首页、event.html、style.css 的状态和 Content-Type，并用明确文案检查不是统一错误页。若你的应用使用 history 路由，还需验证直接打开深层路径与刷新，而非只点站内导航。

### 7. 保存证据并保留回退版本

记录真实部署 ID、commit、变量名和检查报告，不保存密钥。发布后用浏览器检查移动端、导航与表单；需要回退时选择前一实际 deployment，本页本地检查无法证明公网发布成功。

```sh
node verify.mjs
```

## 输入与许可

虚构业务、客户、活动及几何插图均为本站原创教学输入；参考源码采用 MIT（见 LICENSE）。不是 Dyad/bolt.diy/screenshot-to-code UI 或模型输出。不包含真实 API 密钥、账号、发布 URL 或客户资料。

官方依据：
- https://www.dyad.sh/docs/getting-started/publishing-your-app

查询词仅为任务意图，不是已验证 Google 月搜索量或抖音指数。