使用Cloudflare Workers打造全栈应用：从静态网站到复杂后端

简介

Cloudflare Workers是一个强大的平台，允许你在一个地方构建、托管和部署静态网站、单页应用（SPAs）和服务器端渲染（SSR）应用。最近的更新使得开发者可以使用多种框架，如React Router、Next.js、Vue.js等，来构建全栈应用。

支持的框架和功能

框架支持：Cloudflare Workers现在支持多种框架，包括React Router v7、Next.js（通过@opennextjs/cloudflare）、Vue.js、Nuxt、Svelte等。
静态资产托管：可以托管静态资产，如JavaScript、HTML、CSS、字体和图片。
数据库连接：支持连接PostgreSQL和MySQL数据库，通过Hyperdrive实现连接池和缓存。
Node.js API支持：增加了对crypto、tls、net和dns模块的支持。

构建应用

静态网站

设置Wrangler配置文件 ：

json 复制代码

{
  "name": "my-static-site",
  "compatibility_date": "2025-04-01",
  "assets": {
    "directory": "./dist"
  }
}

使用静态站点生成器（如Astro）生成静态文件。
部署到Cloudflare Workers。

单页应用（SPAs）

使用Vite和React ：

bash 复制代码

npm create cloudflare@latest my-react-app -- --framework=react

配置Wrangler以支持单页应用模式：

json 复制代码

{
  "name": "example-spa-worker-hyperdrive",
  "main": "api/index.js",
  "compatibility_flags": ["nodejs_compat"],
  "compatibility_date": "2025-04-01",
  "assets": {
    "directory": "./dist",
    "binding": "ASSETS",
    "not_found_handling": "single-page-application"
  }
}

使用Hyperdrive连接数据库。

服务器端渲染（SSR）

使用React Router v7的SSR ：

javascript 复制代码

import { render } from 'react-dom/server';
import App from './App';

export default {
  fetch: async (request) => {
    const markup = renderToString();
    return new Response(markup, {
      headers: {
        'Content-Type': 'text/html',
      },
    });
  },
};

Workers Builds和部署

自动化部署：Workers Builds支持自动部署和预览URL。
性能改进：构建速度提高，API响应时间减少。

总结

Cloudflare Workers提供了一个灵活且强大的平台，用于构建从简单静态网站到复杂全栈应用的所有类型的应用。通过支持多种框架和数据库连接，开发者可以轻松部署和管理应用。