构建并托管前端
本页负责把前端初始化主线推进到“可以产出构建结果并同步到宿主托管目录”的状态。这里先建立最小交付闭环，不在教程里直接展开完整 CI/CD。
这篇教程解决什么
- 前端构建产物应该落到哪里。
- 如何把
dist/同步到后端宿主的托管目录。 - 前端构建和后端托管的边界在哪里。
前置条件
- 已完成 配置开发代理与本地联调。
frontend-starter已能正常pnpm build。
配套代码
- 当前样例：frontend-starter
- 当前样例：fullstack-starter
- 当前关注文件：vite.config.ts
- 当前关注文件：sync-clientapp.sh
我们要做的事
- 产出前端
dist/目录。 - 用脚本把构建结果同步到宿主托管目录。
- 明确“前端构建”和“后端托管”各自负责什么。
操作步骤
- 在 vite.config.ts 中固定构建产物目录：
build: {
outDir: "dist"
}
- 在前端样例目录执行构建：
cd samples/tutorials/frontend-starter
pnpm build
- 参考 sync-clientapp.sh，把前端构建结果同步到宿主托管目录：
bash samples/tutorials/fullstack-starter/scripts/sync-clientapp.sh \
samples/tutorials/frontend-starter/dist \
samples/tutorials/fullstack-starter/apps/api/ClientApp/Portal
如果你的真实宿主已经在
ClientApp下托管前端，保持这个同步思路不变，只替换成项目自己的目录结构。后续如果你要进入项目级部署流程，再继续阅读：
验证结果
- 前端样例已经能生成
dist/。 - 同步脚本已经能把
dist/复制到目标目录。 - 你已经具备从“前端初始化”进入“宿主托管 / 发布流程”的最小闭环。