alchmenyrun (Brendadeeznuts1111)

Alchemy Cloudflare演示

 

一个用Alchemy构建的全面的Cloudflare基础设施演示，展示了TypeScript本机基础设施作为带有Workers、D1数据库、R2存储、KV缓存、持久对象和工作流的代码。

现场演示: https://cloudflare-demo-website-prod.utahj4754.workers.dev

🚀 快速开始

先决条件

1. 安装Bun

   curl -fsSL https://bun.sh/install | bash

1. Cloudflare帐户

- 注册地址： cloudflare.com - 从仪表板获取您的帐户ID

安装

# Clone the repository
git clone https://github.com/brendadeeznuts1111/alchmenyrun.git
cd alchmenyrun

# Install dependencies
bun i

配置

1. 配置炼金术配置文件

   bun alchemy configure

这将在中创建配置文件配置 ~/.alchemy/config.json

1. 登录Cloudflare

   bun alchemy login

这将安全地将您的Cloudflare凭据存储在 ~/.alchemy/credentials/default/cloudflare.json

1. 设置环境变量（可选）

创建一个 .env 本地开发文件：

   # Alchemy Configuration (optional - can use profiles)
   ALCHEMY_PASSWORD=your_encryption_password

   # Override profile if needed
   # ALCHEMY_PROFILE=prod
   # CLOUDFLARE_PROFILE=prod

备注：炼金术配置文件是管理凭据的推荐方式。它们存储在本地 ~/.alchemy/ 其行为与AWS配置文件类似。环境变量只需要用于加密密码和配置文件覆盖。

发展

# Start development server with hot reload
bun run alchemy:dev

当您编辑代码时，您的应用程序将在本地提供实时更新。

部署

# Deploy to your personal stage
bun run deploy

# Deploy to production (main branch)
bun run deploy:prod

📁 项目结构

├── src/
│   ├── backend/           # Cloudflare Worker code
│   │   ├── server.ts      # Main worker entrypoint
│   │   ├── durable-object.ts # Durable Object for chat
│   │   └── workflow.ts    # Workflow definitions
│   ├── frontend/          # React frontend application
│   │   ├── components/    # React components
│   │   ├── App.tsx        # Main app component
│   │   └── main.tsx       # Frontend entrypoint
│   ├── tests/             # Test files following Alchemy patterns
│   │   ├── integration.test.ts
│   │   ├── unit.test.ts
│   │   └── util.ts
│   ├── db/               # Database schema and utilities
│   │   ├── schema.ts     # Drizzle ORM schema
│   │   └── index.ts      # Database utilities
│   └── mcp/              # Model Context Protocol implementation
├── docs/                 # Comprehensive documentation
│   ├── cloudflare.md     # Provider documentation
│   └── guides/           # Getting started guides
├── scripts/              # Helper scripts
│   └── pre-commit.sh     # Pre-commit automation
├── alchemy.run.ts        # Infrastructure definition
├── package.json          # Dependencies and scripts
└── README.md            # This file

🛠️ 特性

基础设施组件

• Cloudflare员工：边缘无服务器计算
• D1数据库：带Drizzle ORM的SQLite数据库
• R2存储：用于文件上传的对象存储
• KV缓存：用于缓存的键值存储
• 耐用物品：实时功能的状态计算
• 工作流：多步骤流程的编排

应用程序功能

• 实时聊天：基于WebSocket的持久对象聊天
• 文件上传/下载：R2存储集成
• 用户管理：D1数据库的CRUD操作
• 缓存层：KV性能存储
• API终点：RESTful API，具有正确的错误处理
• 反应前端：采用Tailwind CSS的现代用户界面

🧪 测试

遵循Alchemy的测试最佳实践：

# Run all tests
bun test

# Run integration tests
bun test:integration

# Run specific test
bun vitest ./src/tests/integration.test.ts -t "should create and deploy website"

# Run tests in watch mode
bun test:watch

📚 文档

• 供应商文件 -完整的资源参考
• 入门指南 -分步教程
• 概念指南 -阶段、秘密、绑定和资源
• 个人资料指南 -使用Alchemy配置文件管理凭据
• 贡献指南 -开发指南

🔄 开发工作流程

🔥 完美的开发工作流程锁定！

⚡ 您的三步流程

# 1️⃣ Development
bun run alchemy:dev  # Code → hot reload → test

# 2️⃣ Before commit  
bun format           # Auto-fix formatting
bun run test         # Verify all tests pass

# 3️⃣ Ship it
git commit -m "feat: new feature"  # Pre-commit hook validates
git push origin feature           # PR → preview URL

🎯 是什么让这种流动变得强大

• 即时反馈：热重载立即显示更改
• 零摩擦：预提交钩子处理所有验证
• 安全网：自动执行测试和格式化
• 预览隔离：每个PR都有自己的基础设施
• 生产就绪：合并→ 部署→ 自动清理

🚀 您已准备好构建

您的堆栈是：

• ✅ 炼金术兼容 （完全遵循官方指导方针）
• ✅ 全范围 （数据库→ 存储→ 计算层次结构）
• ✅ 类型安全 （完全覆盖TypeScript）
• ✅ 自动测试 （综合测试套件）
• ✅ 生产准备就绪 （零停机部署）

开始建造！ 🚀

添加功能

1. 创建要素分支

   git checkout -b feat/your-feature

1. 实现该功能

- 在中添加后端API终结点 src/backend/ - 在中创建前端组件 src/frontend/ - 在中编写测试 src/tests/ - 更新文档 docs/

1. 测试您的更改

   bun format          # Fix formatting
   bun test            # Run tests
   bun check           # Type-check and lint

1. 提交拉取请求

- 将创建自动预览URL - 测试将在CI中运行 - 查看并合并以进行部署

脚本

• bun run alchemy:dev –热装本地开发
• bun run deploy –部署到个人阶段（升级阶段）
• bun run deploy:prod –将主分支部署到生产（升级阶段）
• bun run deploy:read –读取基础设施属性而不进行更改（读取阶段）
• bun run destroy –清理所有资源（销毁阶段）
• bun run destroy:prod –清理生产资源（销毁阶段）
• bun run build –构建前端资产
• bun run check –类型检查和棉绒
• bun run format –使用oxfmt格式化代码
• bun test –运行测试套件

阶段示例

# Normal deployment (up phase)
bun run deploy

# Read infrastructure without changes (read phase)
bun run deploy:read

# Destroy all resources (destroy phase)
bun run destroy

# Use specific stage with phase
PHASE=destroy bun run deploy --stage prod

🏗️ 建筑

此演示遵循Alchemy的架构原则和推荐设置：

范围层次结构

该项目实现了Alchemy的分层范围结构，以实现最佳组织：

cloudflare-demo (Application Scope)
├── $USER/ (Stage Scope - your username)
│   ├── database/ (Nested Scope) - Data storage resources
│   │   └── D1 Database
│   ├── storage/ (Nested Scope) - File and object storage
│   │   ├── R2 Bucket
│   │   └── KV Namespaces (cache + MCP)
│   ├── compute/ (Nested Scope) - Processing and workflows
│   │   ├── Queue
│   │   ├── Durable Objects
│   │   └── Workflows
│   └── website (Resource) - Main application
└── prod/ (Stage Scope - production)
    └── [same structure as above]

应用程序和阶段

此项目使用推荐的炼金术应用程序和阶段模式：

• 应用: cloudflare-demo -包含所有基础设施资源
• 阶段：用于不同目的的隔离环境

- 个人舞台：每个开发人员的个人环境($USER) - 拉取请求阶段：PR的预览环境(pr-123) - 生产阶段：生产环境(prod)

剧务

# Personal development (uses your username)
bun run alchemy:dev    # Development server
bun run deploy        # Deploy to your stage

# Production
bun run deploy:prod   # Deploy to production

# Pull Request (automatic)
bun run deploy --stage pr-123  # Deploy to PR stage

# Cleanup
bun run destroy       # Clean up your stage
bun run destroy:prod  # Clean up production

资源命名

资源会自动按照以下模式命名： ${app}-${stage}-${id}

• 例子： cloudflare-demo-website-username （个人舞台）
• 例子： cloudflare-demo-website-prod （生产阶段）

炼金术原理

• TypeScript原生：全类型安全和智能感知
• 最小抽象：Cloudflare API周围的薄包装
• 显式配置：清晰、声明性的基础架构
• 地方发展：用于本地测试的小型火炬
• 环境隔离：不同目的的单独阶段

🔧 配置

档案

炼金术配置文件管理凭据，无需 .env 文件夹：

# Configure profile
alchemy configure [--profile name]

# Login
alchemy login [--profile name]

# Deploy with profile
alchemy deploy --profile prod

配置文件存储: ~/.alchemy/

• config.json -配置文件设置（无秘密）
• credentials/{profile}/{provider}.json -凭据（敏感）

看 docs/PROFILES_GUIDE.md 了解详情。

执行阶段

运行基础设施的三种模式：

阅读阶段示例:

# Build frontend with infrastructure URLs
PHASE=read bun ./scripts/build-frontend.ts

看 docs/EXECUTION_PHASES.md 了解详情。

环境变量

基础设施定义

alchemy.run.ts 定义所有资源：

const phase = (process.env.PHASE as "up" | "destroy" | "read") ?? "up";
const stage = process.env.STAGE ?? process.env.USER ?? "dev";

const app = await alchemy("cloudflare-demo", {
  phase,
  stage,
  profile: process.env.ALCHEMY_PROFILE ?? "default"
});

// Resources use automatic naming: ${app}-${resource}-${stage}
export const website = await Worker("website", {
  script: "./src/backend/server.ts"
});

await app.finalize();

常见模式

# Deploy to dev
bun run deploy

# Deploy to prod
STAGE=prod bun run deploy

# Destroy dev
PHASE=destroy bun run deploy

# Read infrastructure
PHASE=read bun run deploy

# Use specific profile
alchemy deploy --profile prod

🚀 部署

预览部署

• 推送到功能分支→ 自动预览URL
• 隔离环境中的测试变化
• 预览URL作为PR评论发布

生产部署

• 合并到主分支→ 自动生产部署
• 用途 prod 生产资源阶段
• 零停机部署

🧹 清理

# Remove development resources
bun run destroy

# Remove production resources
bun run destroy:prod

🤝 贡献

我们欢迎捐款！请查看我们的 贡献指南 详细指南。

贡献之前

1. 阅读 贡献指南
2. 关注Alchemy的 测试最佳实践
3. 使用 预提交脚本
4. 确保所有测试通过

📄 许可证

Apache-2.0-见 许可证 了解详情。

🔗 链接

• 炼金术文档
• Cloudflare员工文档
• 淋ORM
• 反应
• 顺风CSS

💡 需要帮助？

• 查看我们的 文档
• 审查 现有问题
• 加入我们 不和谐社区
• 创建一个 新问题

______________________________________________________________________

🚀 去建！\ 您的repo是 Cloudflare Bun SPA火箭--只是：

bun run alchemy:dev   # start coding

其他一切都是自动发生的。\ 运输愉快！