cloudflare 单Workers + D1实现全栈功能网站搭建流程

众所周知，cloudflare workers 是一个基于 cloudflare 平台的服务器less函数，它可以在 cloudflare 平台上运行，实现无服务器的架构。

而 D1 是 cloudflare 平台提供的一个无服务器数据库。cloudflare workers 与 D1 可以一起使用，实现无服务器的后端架构。

以前，Worker 只能作为单独后端服务，或者单独作为前端服务。不能同时作为后端服务与前端服务。

现在，Worker 更新了新的功能，详情见这里。现在可以前后端放在同一个Worker项目中了。

再加上静态资源的支持，就可以实现全栈功能网站的搭建。真正实现一个Worker全栈功能网站。

创建项目

先创建普通vue项目并运行

1
2
3

npm create vue@latest
npm install
npm run dev

进入项目并启动后，再安装wrangler

1	npm i wrangler -save -D

配置wrangler

然后创建wrangler配置文件 wrangler.jsonc

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "docs",
  "compatibility_date": "2026-06-22",
  "main": "server/index.js",
  "assets": {
    "not_found_handling": "single-page-application"
  },
  "observability": {
    "enabled": true
  },
  "upload_source_maps": true,
  "compatibility_flags": [
    "nodejs_compat"
  ]
}

注意配置后端服务文件入口地址 server/index.js ，这是后端服务的入口文件，可简单配置如下。

export default {
  async fetch(request) {
    const url = new URL(request.url);
    if (url.pathname.startsWith("/api/")) {
      return Response.json({
        name: "Cloudflare"
      });
    }
    return new Response(null, { status: 404 });
  },
};

安装worker的vite插件

1	npm i @cloudflare/vite-plugin -save -D

在vite.config.js中配置cloudflare worker

import { cloudflare } from "@cloudflare/vite-plugin"
export default defineConfig({
  plugins: [
    cloudflare()
  ]
})

最后，在 package.json 中配置发版流程。

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "deploy": "npm run build && wrangler deploy"
}

项目重新启动，在前端代码发起请求。

1
2
3

const res = await fetch('/api/user/login')
const data = await res.json()
console.log(data)

正常情况下前后端已经通了，至此基础前后端同项目就搭建完了。

后面可以做复杂前后端， server/index.js 只是入口文件，路由逻辑另外写。这属于后端工程化的范畴，此处不做赘述。

创建数据库

后面就是后端连接D1轻量数据库的方式。

首先创建数据库 common_db ，或者自己起一个名字。

1	wrangler d1 create common_db

一路默认就行，它会问你数据库别名，然后问你要不要自动帮你写进配置文件，最后问你本地开发的时候要不要连远程数据库。

这里会同时创建两个空数据库，本地一个，远程一个。这俩数据库的ID是相同的。

然后打开 wrangler.jsonc 文件，可以看到他帮你写好了数据库连接。

"d1_databases": [
  {
    "binding": "common_db",
    "database_name": "common_db",
    "database_id": "6f3d1d70-xxxx-xxxx-xxxx-61d821c4eeac"
  }
]

这里可以改一下 binding 字段，也就是后端代码里的数据库字段，此处可以该为 DB

1	"binding": "DB"

后端代码就可以直接写 env.DB 来操作数据库了。

然后创建数据库表，在项目根目录创建 schema.sql 文件：

CREATE TABLE users (
  user_id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_name TEXT NOT NULL UNIQUE,
  password TEXT NOT NULL,
  create_time TEXT DEFAULT CURRENT_TIMESTAMP
);

然后执行这个sql文件，初始化数据库表。

1	wrangler d1 execute common_db --file=./schema.sql

这会在本地创建一个SQLlite数据库，位置在 .wrangler\state\v3\d1 。对了，记得把 .wrangler 文件夹写入到 .gitignore 文件里。

连接数据库

接下来就是调用接口，后端连接数据库测试

const result = await env.DB.prepare(
  "SELECT 1 as ok"
).first();

return new Response(
  JSON.stringify({
    message: "D1 connected",
    result
  })
);

不建议在本地调试开发时连接远程数据库，这会很慢。非要连，问AI，wrangler本地开发怎么连远程D1数据库。

发版

最后是发版了，本地启动项目的时候连接的是本地的SQLlite数据库，发版后要连接远程D1数据库，但现在远程D1应该是个空库，所以需要把本地 schema.sql 文件里面的语句放到云端执行一遍。所以本地所有建表语句一定一定要保存，需要在云端运行一遍。

其实官方更推荐生成迁移文件的办法，但我没学，我就先用上面这个笨办法了。

然后执行发版命令

1	npm run deploy

wrangler会自动创建云端的worker。并自动绑定D1数据库。后续每次发版都执行这个命令即可。

以上就是搭建全流程了，剩下的就是前端工程化和后端工程化。这部分可以参考我写好的项目。