在这个云原生时代，我们甚至不需要一台服务器就能构建和部署高性能的全栈应用。本文将以我开发的  "Won A Million - AI彩票预测助手"  为例，带您手把手走通基于 Cloudflare 的全栈开发与部署流程，并分享如何通过 Google AdSense 实现流量变现。

🛠️ 技术栈概览

• 前端: Vue 3 + Vite (单页应用)
• 后端: Cloudflare Workers (JavaScript/Serverless)
• 数据库: Cloudflare D1 (基于 SQLite 的边缘数据库)
• 部署: Cloudflare Pages (前端) + Cloudflare Dashboard/CLI (后端)
• 变现: Google AdSense

---

第一部分：前端部署 (Vue 3 -> Cloudflare Pages)

我们使用 Vue 3 开发了酷炫的 UI，现在要让它被全世界访问。

1.1 项目构建

在本地项目根目录下运行构建命令，生成静态文件：

构建完成后，你会得到一个 dist 目录，里面包含了所有 HTML/CSS/JS 文件。

-assets
 -images
  -...
-ads.txt
-index.html

1.2 部署到 Cloudflare Pages

不需要复杂的服务器配置（Nginx/Apache 都走开！）：

1. 登录 Cloudflare Dashboard。
2. 点击 Workers & Pages -> Create Application -> Pages -> Upload assets。
3. 输入你的项目名称（例如 won-a-million）。
4. 直接拖拽上传刚才生成的 dist 文件夹。
5. 点击 Deploy，几秒钟后，你的网站就上线了！你会获得一个类似 https://won-a-million.pages.dev 的永久免费域名。

---

第二部分：Serverless 后端 (Workers + D1)

前端只是皮囊，后端才是灵魂。我们需要一个 API 来处理 AI 预测请求、存储历史记录以及定时抓取开奖结果。

2.1 创建 D1 数据库

D1 是 Cloudflare 的原生 SQL 数据库，速度快且免费额度大。

1. 在 Cloudflare 后台 -> Workers & Pages -> D1。
2. 创建一个新数据库，命名为 lottery-db。
3. 进入数据库 -> Console，运行 SQL 语句创建表（参考 schema.sql）：

CREATE TABLE IF NOT EXISTS predictions (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id TEXT,
    lottery_type TEXT, -- 'ssq' or 'dlt'
    issue TEXT,
    red_predicted_nums TEXT, -- JSON array
    blue_predicted_nums TEXT, -- JSON array
    create_time INTEGER
    -- 其他字段省略...
);

2.2 部署 Worker 代码

我们使用单文件模式直接在 Cloudflare 后台编辑器部署，无需本地安装 Wrangler 环境。

1. 创建 Worker: 在后台创建一个名为 lottery-worker 的 Worker。

2. 绑定数据库:

   • 进入 Worker -> Settings -> Bindings。
   • 添加 D1 Database 绑定，变量名设为 DB，选择刚才创建的 lottery-db。

3. 编写代码:
   点击 Edit code，将整合好的 worker.js 代码粘贴进去。核心逻辑包括：

   • /api/predict: 处理 AI 算法选号逻辑。
   • /api/history: 从 env.DB 查询历史记录。
   • scheduled: 定时任务处理函数。

2.3 配置定时任务 (Cron Triggers)

我们的应用需要每天自动去新浪彩票抓取最新的开奖结果并核对中奖情况。

1. Worker 详情页 -> Triggers -> Cron Triggers。

2. 添加规则：0 14 * * 2,4,0

   • 解释：UTC 时间 14:00 (北京时间 22:00)，每周二、四、日执行（双色球开奖日）。

---

第三部分：流量变现 (Google AdSense)

有了流量，当然要考虑收益。我们通过 Vue 组件化的方式优雅地植入广告。

3.1 账号与基础配置

1. 注册 Google AdSense 并通过审核（注意：必须使用顶级域名，如 .com）。

2. 在 public 目录下创建 ads.txt 文件，填入 AdSense 提供的验证代码。

   • 注意：如果你的后端接管了域名路由，记得在 Worker 代码里加一个 /ads.txt 的路由返回纯文本内容。

3.2 封装 Vue 广告组件

为了避免页面切换导致广告加载失败，封装一个 GoogleAd.vue 组件：

<!-- client/src/components/GoogleAd.vue -->
<template>
  <!-- 支持底部悬浮模式 (:is-fixed="true") -->
  <div class="ad-container" :class="{ 'ad-fixed-bottom': isFixed }" v-if="isVisible">
    <div class="close-btn" v-if="isFixed" @click="closeAd">×</div>
    <ins class="adsbygoogle"
         :data-ad-client="client"
         :data-ad-slot="slotId"
         data-full-width-responsive="true"></ins>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
// ...Props 定义 (client, slotId, isFixed)...
onMounted(() => {
  try { (window.adsbygoogle = window.adsbygoogle || []).push({}); } catch (e) {}
});
</script>
<style scoped>
/* 底部悬浮样式 CSS */
.ad-fixed-bottom { position: fixed; bottom: 0; width: 100%; z-index: 999; }
</style>

3.3 植入策略

在 Home.vue 中巧妙植入：

1. 首屏横幅: 放在标题下方，用户第一眼就能看到。

<GoogleAd slot-id="YOUR_BANNER_ID" />

1. 底部悬浮 (高转化) : 这种样式常驻屏幕底部，点击率通常较高。

<GoogleAd slot-id="YOUR_ANCHOR_ID" :is-fixed="true" />

---

🎯 总结与成果

通过这套架构，我们实现了：

• 成本极低: Cloudflare Pages 免费，Workers 每日免费 10万次请求，D1 也有免费额度。
• 运维省心: 无需管理服务器，自动扩缩容，全球 CDN 加速。
• 收益闭环: 流量变现管道已打通，只需要专注于优化 AI 算法和推广。

这就是独立开发者的最佳实践：把时间花在核心业务逻辑上，基础设施交给 Cloudflare，收益变现交给 Google。