企业官网建设流程全解析

网站策划人员需要做哪些工作,住房和城乡建设部网站城市稽查,2万元自己动手装修房子,苏州网站建设名字dev → test → staging → gray → prod环境 同一套代码#xff0c;在不同运行条件下的不同实例 目的#xff1a; 保护线上用户降低开发和发布风险让问题尽量提前暴露 本地环境 dev 开发者电脑上的运行环境 通过 npm / yarn 等打开开发服务器 用于 写代码、调试…dev → test → staging → gray → prod环境 同一套代码在不同运行条件下的不同实例目的保护线上用户降低开发和发布风险让问题尽量提前暴露本地环境 dev开发者电脑上的运行环境通过 npm / yarn 等打开开发服务器用于 写代码、调试可以debugger打印控制台、打断点在构建方面不压缩、不混淆测试环境 test由于本地环境的差异大Node版本、依赖只有在自己电脑能跑所以得有一个过渡-测试环境模拟线上环境但不对真实用户开放的环境部署在服务器上使用独立域名接近线上的配置例如text.example.com进行前后端联调功能测试回归测试QA测试UAT 产品验收VITE_API_BASEhttps://test-api.example.comif (import.meta.env.MODE test) { enableDebugPanel(); }本地测试localhost真实域名mock 接口真后端无 Nginx有 Nginx无 CDN有 CDNHTTPHTTPS预发布环境 staging上线前最后一次、最接近真实线上环境的验证环境一般是内部人员的真实数据test是QA和研发现在是其他例如产品等域名、环境等等都和 prod 一样灰度 gray新功能、新版本并不会一次性全量上线而是只对一部分用户或环境先生效观察效果稳定后再逐步扩大范围最终全量发布小范围试水 → 验证安全 → 再全面放开黑旧版本完全没变白新版本全部用户都用灰介于两者之间作用降低发布风险验证真实用户行为本地/测试环境都不是真实用户支持快速回滚只需要关闭灰度开关或把比例调回到0如何实现按「用户」灰度常见方式按 userId 哈希取模按账号白名单按新用户 / 老用户**userId** % 100 5 → 5% 用户走新逻辑按「流量」灰度网关/Nginx10% 请求 → 新服务90% 请求 → 旧服务split_clients $request_id $version { 10% new; * old; }功能开关Feature Flag是否开启由后台配置AB平台配置中心如 Apollo / Nacosif (featureFlags.newPayFlow) { renderNewPay() } else { renderOldPay() }灰度发布(金丝雀发布)安全上线AB 测试对比效果好坏线上环境 prod真实用户正在使用的环境用户访问的网站APP请求的接口真正产生业务数据错误不能暴露给用户在构建阶段会进行压缩、混淆日志非常精简// 线上禁止 console.log if (import.meta.env.PROD) { console.log () {}; }VITE_API_BASEhttps://api.example.com不能随便进行调试、发布徐岙发布流程 回滚机制发布流程本地环境 ↓ 测试环境CI 自动部署 ↓ 回归测试 / 产品验收 ↓ 线上环境灰度 / 全量本地 pnpm dev提 PR → 自动部署到 testQA 验证合并 main → CI 部署 prodproduction 生产环境用户正在真实使用的环境找出本地和线上的差异点环境变量不同.env.development 和 .env.production如 API_BASE_URL可以用console.log(import.meta.env)/console.log(process.env)查看打包产物和本地运行逻辑不同线上问题可能出现在某个函数被错误地 tree-shake 掉了CDN 缓存未更新、版本不一致解决本地执行一次真实打包npm run build npx serve dist环境差异浏览器版本使用错误出现的环境尝试复现Babel polyfill 补齐网络查看开发者工具的网络对比 CORS 的响应头查看是否是跨域问题对比一下 Cookie后端的线上逻辑与本地不一致