前端部署

让你的网站飞得更快更远

讲师：乌鸦哥

静态网站 + 全球CDN = 超音速体验！

什么是静态网站生成？

把动态网站变成"罐头食品" 🥫

动态 vs 静态

动态网站（现做现卖）

用户访问时现场制作
需要服务器运算
速度受服务器影响
容易出故障
成本较高

静态网站（预制罐头）

提前制作好所有页面
直接发送文件
超快加载速度
几乎不会坏
成本超低

Nuxt3 的 generate 命令

一个神奇的"罐头制作机" 🏭


# 一键生成静态网站
npm run generate

# 或者
nuxt generate

这个命令会：

🔍 扫描所有页面路由
⚡ 预渲染每个页面
📦 打包所有资源文件
🎯 优化代码和图片
📁 生成 dist 文件夹

静态网站的好处

为什么大家都爱"罐头食品"？ 🌟

速度超快 ⚡

秒开体验 - 无需服务器计算
全球加速 - 就近访问服务器
缓存友好 - 浏览器记忆功能强
节省流量 - 文件压缩优化

对比数据：

• 动态网站：2-5秒加载
• 静态网站：0.5-1秒加载

安全可靠 🛡️

无服务器攻击 - 没有后端可攻击
无数据库风险 - 纯网页文件
攻击抗性强 - 天然防护能力
故障率极低 - 文件服务很稳定

就像把钱放在保险柜里，而不是钱包里

成本超低 💰

无服务器费用 - 不需要运行服务器
流量成本低 - 全球网络分担流量
维护成本零 - 无需专人维护
扩容免费 - 访问量再大也不怕

很多平台甚至免费！

SEO友好 📈

搜索机器人友好 - 纯网页易解析
手机优化 - 响应速度佳
移动优化 - 响应速度佳
结构清晰 - 利于搜索引擎理解

搜索引擎会把你的网站排得更靠前！

认识 Cloudflare

互联网界的"顺丰快递" 📦

Cloudflare 是什么？

全球最大的CDN和云安全公司

覆盖全球 - 320多个城市有服务器
安全专家 - 每天阻挡数十亿次攻击
性能优化 - 让网站提速30-60%
开发者友好 - 丰富的免费服务

知名客户：Discord、Shopify、Canva、路透社等

为什么选择 Cloudflare Pages？

🆓 完全免费

无限流量
无限访问量
无限项目数
免费安全证书

🚀 超级快速

全球网络加速
边缘计算优化
智能路由选择
最新协议支持

🔧 开发友好

代码库自动部署
预览环境
自定义域名
部署历史

🛡️ 安全可靠

攻击防护
网站应用防火墙
自动加密传输
99.9%可用性

Cloudflare vs 其他平台

功能	Cloudflare	Vercel	Netlify	GitHub Pages
免费额度	无限制	100GB/月	100GB/月	1GB
部署速度	超快	快	中等	慢
全球加速网络	320多个节点	有	有	无
自定义域名	免费	免费	免费	免费

部署到 Cloudflare Pages

五分钟让你的网站飞起来！ 🛸

第一步：准备项目


# 1. 配置 Nuxt3 为静态生成
# nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/'] // 可以添加更多路由
    }
  },
  // 或者使用 ssr: false 完全静态化
  ssr: false
})

# 2. 生成静态文件
npm run generate

# 3. 检查 dist 文件夹
ls dist/

确保所有页面都正确生成了

第二步：上传到 GitHub


# 初始化代码仓库（如果还没有）
git init
git add .
git commit -m "Initial commit"

# 创建 GitHub 仓库并推送
git remote add origin https://github.com/你的用户名/项目名.git
git branch -M main
git push -u origin main

💡 小贴士：

确保 dist 文件夹不在 .gitignore 中，或者配置 Cloudflare 自动构建

第三步：连接 Cloudflare Pages

访问 dash.cloudflare.com
登录或注册账号
点击 "Pages" → "Create a project"
连接 GitHub 账号
选择你的项目仓库
配置构建设置

第四步：配置构建设置

构建配置：

框架预设： Nuxt.js
构建命令： npm run generate
构建输出目录： dist
Node.js 版本： 18

点击 "Save and Deploy" 开始部署！

第五步：等待部署完成

部署过程：

🔄 克隆代码 - 从 GitHub 获取最新代码
📦 安装依赖 - npm install
🏗️ 构建项目 - npm run generate
🚀 部署到网络 - 分发到全球节点
✅ 完成！ - 获得访问链接

通常 2-3 分钟就能完成！

第六步：测试和优化

✅ 检查清单

所有页面都能正常访问
图片和资源正确加载
页面加载速度测试

自动化部署

推送代码，自动上线！ 🎯

代码推送工作流

🔧 本地开发
```
npm run dev
```
✅ 测试构建
```
npm run generate
```

📤 推送代码

git add . && git commit -m "Update" && git push

🚀 自动部署
Cloudflare 自动检测到推送，开始新的部署
🎉 上线完成
几分钟后新版本自动上线

高级功能

让你的网站更专业！ ⭐

自定义域名

步骤：

1. 在域名注册商购买域名
2. Pages 设置中添加自定义域名
3. 配置域名解析记录指向 Cloudflare
4. 等待安全证书自动配置

结果： www.你的域名.com

🎉 前端部署完成！

✅ 你已经掌握了：

Nuxt3 静态网站生成
Cloudflare Pages 部署
自动化流程
性能优化技巧
安全防护配置
自定义域名设置

🚀 你的网站现在：

全球访问速度超快
安全性企业级别
运行成本几乎为零
部署流程全自动

下一步：部署后端，实现全栈上线！ 🌟