# 前端部署流程（Next.js 静态导出为例）
# 1. 构建：npm run build（Next.js 构建，产出 .next/）
# 2. 静态导出：next export（产出 out/ 目录，包含所有静态文件）
#    或在 next.config.js 里设置 output: 'export'，build 时自动导出
# 3. 部署：把 out/ 目录的文件上传到静态托管平台/CDN
#    - Vercel/Netlify：连接 GitHub，push 自动构建部署（不用手动上传）
#    - 对象存储+CDN：上传到阿里云 OSS/腾讯云 COS/AWS S3，开启静态网站托管，绑定 CDN
#    - GitHub Pages：push 到 gh-pages 分支，自动托管（免费，适合个人项目/文档）
#    - Cloudflare Pages：连接 GitHub，自动构建部署，免费额度大，全球 CDN
# 4. 配置域名：把域名 CNAME 到托管平台的地址
# 5. HTTPS：托管平台自动签发 SSL 证书（免费）
# 6. 完成：用户访问 https://yourdomain.com 就能看到应用
print("前端部署=构建静态文件→上传到静态托管/CDN→配置域名HTTPS")

# CDN 缓存策略配置（以阿里云 CDN/Cloudflare 为例）
# 缓存规则：
# - HTML 文件：缓存时间短（5分钟-1小时），因为 HTML 会更新（引用新的 JS/CSS 文件名）
#   Cache-Control: public, max-age=300  (5分钟)
# - JS/CSS/图片/字体：缓存时间长（30天-1年），因为文件名带 hash（如 app.abc123.js），内容变了文件名也变
#   Cache-Control: public, max-age=31536000, immutable  (1年，immutable 表示不再验证)
# - 不缓存的文件（如 API 响应、用户数据）：
#   Cache-Control: no-cache, no-store, must-revalidate
#
# 缓存失效（Cache Invalidation）：
# - 文件名带 hash（content hash）：内容变了文件名变，旧文件名的缓存不影响，这是最优雅的方案（Webpack/Vite 自动做）
# - 手动刷新：CDN 控制台手动刷新某个 URL 或目录的缓存（发布后立即生效）
# - 版本号：URL 加 ?v=2.0，新版本用新 URL，旧缓存不影响
#
# 关键：HTML 短缓存 + 静态资源长缓存+文件名hash，是前端缓存的最佳实践
# - 用户访问 HTML（5分钟缓存，能较快拿到最新版本）
# - HTML 引用的 JS/CSS 文件名带 hash（内容变了文件名变，长缓存不影响）
# - 发布新版本：新 HTML 引用新的 JS/CSS 文件名，用户拿到新 HTML 就会加载新资源

// PWA 核心文件示例
// 1. manifest.json（应用清单）
// {
//   "name": "朋友好学 AI 学 Python",
//   "short_name": "朋友好学",
//   "description": "AI 驱动的 Python 学习应用",
//   "start_url": "/",
//   "display": "standalone",  // standalone=全屏像App，minimal-ui=最小UI，browser=浏览器
//   "background_color": "#0a0a0f",
//   "theme_color": "#6366f1",
//   "orientation": "portrait",
//   "icons": [
//     { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
//     { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
//     { "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
//   ]
// }
//
// 2. Service Worker（sw.js，注册后后台运行）
// const CACHE_NAME = 'pygood-v1';
// const ASSETS_TO_CACHE = ['/', '/index.html', '/styles.css', '/app.js', '/icon-192.png'];
//
// // 安装：缓存静态资源
// self.addEventListener('install', (event) => {
//   event.waitUntil(
//     caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS_TO_CACHE))
//   );
// });
//
// // 激活：清理旧缓存
// self.addEventListener('activate', (event) => {
//   event.waitUntil(
//     caches.keys().then((keys) =>
//       Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
//     )
//   );
// });
//
// // 拦截请求：缓存优先，回退网络
// self.addEventListener('fetch', (event) => {
//   event.respondWith(
//     caches.match(event.request).then((cached) => cached || fetch(event.request))
//   );
// });
//
// 3. 注册 Service Worker（在主 JS 里）
// if ('serviceWorker' in navigator) {
//   navigator.serviceWorker.register('/sw.js').then(() => console.log('SW registered'));
// }

# 前端部署工程实践清单
# 1. CI/CD 自动部署：
#    - push 到 main → 自动构建（npm ci && npm run build）→ 自动部署到 Vercel/Netlify/CDN
#    - 每个 PR 生成 preview 预览链接（Vercel/Netlify 自动），方便测试和审查
#    - 构建失败不部署（CI 里跑 lint/test/build，全过才部署）
#
# 2. 环境变量：
#    - 前端环境变量在构建时注入（Vercel/Netlify 环境变量管理，或 .env.production）
#    - 前端环境变量会打包进 JS（用户能看到），不要放密钥（API Key/数据库密码）
#    - 不同环境（dev/staging/prod）用不同环境变量
#
# 3. 版本管理和回滚：
#    - 每次部署生成唯一版本号（git commit hash 或时间戳）
#    - 保留历史版本（Vercel/Netlify 自动保留，一键回滚到任意历史版本）
#    - 回滚要快（出问题几分钟内能回到上一个稳定版本）
#
# 4. 缓存失效：
#    - 文件名带 content hash（自动），内容变了文件名变
#    - HTML 短缓存（5分钟），静态资源长缓存（1年）
#    - 发布后可手动刷新 CDN 缓存（或等 HTML 过期）
#
# 5. 监控：
#    - 前端错误监控：Sentry（自动捕获 JS 错误、白屏、性能）
#    - 性能监控：Core Web Vitals（LCP/INP/CLS）真实用户数据（RUM）
#    - 可用性监控：定时检查网站是否可访问（UptimeRobot/自建）
#    - 告警：错误率高、性能下降、网站不可用，及时告警
#
# 6. 安全：
#    - HTTPS 强制（HTTP 跳转 HTTPS，HSTS）
#    - CSP（Content Security Policy，内容安全策略，防止 XSS）
#    - 安全头：X-Frame-Options、X-Content-Type-Options、Referrer-Policy
#    - 依赖安全：npm audit / Dependabot 定期检查依赖漏洞，及时升级
#    - 不要把密钥放前端代码（会被打包进 JS，用户能看到）