Remix + Cloudflare 项目

欢迎使用 Remix + Cloudflare 项目模板!

文档参考

• 📖 Remix 文档
• 📖 Remix Cloudflare 文档

Remix + Cloudflare Workers 项目分析

这个项目是一个使用 Remix 框架在 Cloudflare Workers 平台上运行的 Web 应用程序。让我们深入了解其主要特性和配置:

1. 项目结构和技术栈

• 前端框架: React + Remix
• 部署平台: Cloudflare Workers
• 构建工具: Vite
• 样式: Tailwind CSS
• 语言: TypeScript

项目遵循标准的 Remix 结构,主要包含:

• app/: 应用程序源代码
• public/: 静态资源
• functions/: Cloudflare Pages 函数
• 配置文件: 如 wrangler.toml, vite.config.ts 等

2. Cloudflare Workers 集成

项目专门为 Cloudflare Workers 平台优化。主要集成点包括:

1. functions/[[path]].ts 文件:

import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - the server build file is generated by `remix vite:build`
// eslint-disable-next-line import/no-unresolved
import * as build from "../build/server";

export const onRequest = createPagesFunctionHandler({ build });

这个文件使用 createPagesFunctionHandler 来处理请求,是 Cloudflare Pages 与 Remix 集成的关键。

2. wrangler.toml 配置:

#:schema node_modules/wrangler/config-schema.json
name = "remix-workers"
compatibility_date = "2024-09-25"
main = "./build/worker/index.js"
assets = { directory = "./build/client" }

# Workers Logs
# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
[observability]
enabled = true

这个文件定义了 Workers 的配置,包括入口点、资源目录等。

3. 类型生成: 项目使用 wrangler types 命令为 Cloudflare 绑定生成类型定义:

    "typegen": "wrangler types",
    "preview": "pnpm run build && wrangler dev",
    "cf-typegen": "wrangler types"

3. Remix 特性利用

1. 文件系统路由: 主页面在 app/routes/_index.tsx 中定义。

2. 数据加载和动作: 虽然当前示例中没有展示,但 Remix 支持通过 loader 和 action 函数进行服务器端数据处理。

3. 元数据处理:

import type { MetaFunction } from "@remix-run/cloudflare";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

4. 性能优化

1. 静态资源处理:

/favicon.ico
  Cache-Control: public, max-age=3600, s-maxage=3600
/assets/*
  Cache-Control: public, max-age=31536000, immutable

这个文件设置了静态资源的缓存策略,有助于提高性能。

2. 路由控制:

{
  "version": 1,
  "include": ["/*"],
  "exclude": ["/favicon.ico", "/assets/*"]
}

这个文件定义了哪些路径应该由 Workers 处理。

3. Tailwind CSS: 原则：使用 Tailwind 可以生成优化的 CSS,减少不必要的样式代码。 要求用户界面设计

• 使用Tailwind CSS进行响应式设计
• 简洁、直观的用户界面

5. 开发和部署流程

1. 开发:

pnpm run dev
# 生成类型定义，在wrangler.toml中添加bindings或修改后运行
npm run cf-typegen 

2. 构建:

pnpm run build

3. 部署:

pnpm run deploy

这些命令在 package.json 中定义,利用了 Wrangler CLI 工具。

6. 环境适配

项目配置支持在本地开发环境和 Cloudflare Workers 生产环境中运行。vite.config.ts 文件中的 remixCloudflareDevProxy 插件帮助模拟 Cloudflare 环境:

import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remixCloudflareDevProxy(),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
});

7. 安全性和最佳实践

1. ESLint 配置确保代码质量和一致性。
2. TypeScript 提供了类型安全。
3. 项目避免使用 Google Fonts,可能是出于性能或隐私考虑。

8. 扩展性

1. 项目结构允许轻松添加新路由和组件。
2. wrangler.toml 可以配置额外的 Cloudflare Workers 功能,如 KV 存储、Durable Objects 等。

9. 注意事项

1. 确保了解 Cloudflare Workers 的限制,如执行时间和内存限制。
2. 考虑使用 Cloudflare 的其他服务,如 KV 存储或 D1 数据库,以增强应用功能。

数据库处理：

命令行 插入数据表

npx wrangler d1 execute subtitle --remote --file=./schema.sql

插入数据

npx wrangler d1 execute subtitle --remote --file=./seed.sql

使用相关

1. 使用n8n 连接 cloudflare 数据库 /subtitles节点说明：
2. 通过 JSON 格式的 POST 请求添加记录
3. 通过 JSON 格式的 POST 请求删除记录
4. 通过表单提交添加记录
5. 通过表单提交删除记录 对于 HTTP POST 请求添加记录，您需要发送一个包含以下字段的 JSON 数据：

{
    "apiKey": "n8n_post_api_key",
    "_action": "create",
    "videoId": "video_id_here",
    "videoUrl": "video_url_here",
    "subtitleUrl": "subtitle_url_here",
    "videoTitle": "video_title_here",
    "subtitleContent": "subtitle_content_here"
}

确保设置正确的 Content-Type 头为 application/json。

对于 HTTP POST 请求删除记录，您需要发送一个包含以下字段的 JSON 数据：

{
    "apiKey": "n8n_post_api_key",
    "_action": "delete",
    "id": "record_id_here"
}