使用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模块的支持。

构建应用

静态网站

1. 设置Wrangler配置文件：

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

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

单页应用（SPAs）

1. 使用Vite和React：

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

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

   {
     "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"
     }
   }
   

3. 使用Hyperdrive连接数据库。

服务器端渲染（SSR）

1. 使用React Router v7的SSR：

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