Analog
Analog是Angular的全栈元框架,由 Vite 和 Nitro提供支持。
在本指南中,你将创建一个新的模拟应用程序,并使用 Cloudflare Pages 进行部署。
使用 create-cloudflare
创建一个新项目
创建新的模拟项目并部署到 Cloudflare 页面的最简单方法是使用
create-cloudflare
CLI(也称为 C3)。要开始使用,请打开终端并运行
C3 将引导你完成设置过程,并使用官方模拟创建工具 create-analog
创建一个新项目。它还会安装必要的适配器和 Wrangler CLI。
绑定
绑定(binding) 允许你的应用程序与 Cloudflare 开发人员产品交互,如 KV、Durable Objects、R2 和 D1。
如果打算在项目中使用绑定,必须首先为本地和远程开发设置绑定。
在 Analog 中,服务器端代码可通过
API Routes 添加。defineEventHandler()
方法用于定义你的 API 端点,你可在其中通过提供的 context
字段访问 Cloudflare 的上下文。通过 context
字段,你可以访问为你的应用程序设置的任何绑定。
以下代码块显示了在 Analog 中访问 KV 命名空间的示例。
在开发中设置绑定
通过 C3 创建的项目会安装一个 Nitro 模块,该模块可简化开发过程中的绑定工作:
该模块反过来会加载一个插件,在 dev 中为事件上下文添加绑定:
在上述代码中,getPlatformProxy
辅助函数将自动检测项目的 wrangler.toml
文件中定义的任何绑定,并在本地开发中模拟这些绑定。请查看Wrangler 关于绑定的配置信息,了解如何在wrangler.toml
中配置绑定的更多信息。
可使用以下命令从 wrangler.toml
生成 Env
类型(由 context.cloudflare.env
使用)的新类型定义:
每次向 wrangler.toml
添加新绑定时,都应执行此操作。
在部署的应用程序中设置绑定
要访问已部署应用程序中的绑定,你需要在 Cloudflare 控制面板中配置你的绑定。
部署
创建新项目时,C3 会让你选择通过 Direct Upload部署应用程序的初始版本。你可以在项目目录下运行以下命令,随时重新部署应用程序:
Git 整合
除了直接上传部署外,你还可以通过Git 集成部署项目。Git 集成允许你将 GitHub 或 GitLab 仓库连接到 Pages 应用程序,并在每次推送新提交后自动构建和部署 Pages 应用程序。
设置需要对 Git 有基本了解。如果你是 Git 新手,请参考 GitHub 的 Git 手册汇总,了解如何在本地机器上设置 Git。
创建 GitHub 仓库
访问 repo.new,创建一个新的 GitHub 仓库。创建新仓库后,进入新创建的项目目录,准备并在终端运行以下命令将本地应用程序推送到 GitHub: 创建一个页面项目
- 登录 Cloudflare 仪表板 并选择你的账户。
- 转到 Workers & Pages> Create application> Pages> Connect to Git并创建一个新的 Pages 项目。
如果你尚未授权访问你的 GitHub 帐户,系统将要求你进行授权。Cloudflare 需要这样才能从源代码监控和部署你的项目。如果你愿意,可以缩小对特定版本库的访问范围;但是,当你要向 Cloudflare 页面添加更多版本库时,必须手动更新此列表 在你的 GitHub 设置中。
- 选择创建的新 GitHub 仓库,并在
**设置构建和部署**
部分提供以下信息:
Configuration option | Value |
---|---|
Production branch | main |
Build command | npm run build |
Build directory | dist/analog/public |
你可以选择自定义项目名称字段。它默认为 GitHub 仓库的名称,但不必与之匹配。项目名称**值将被指定为*.pages.dev
子域。
- 完成配置后,选择保存并部署。
查看正在进行的第一个部署管道。Pages 按照指定安装所有依赖项并构建项目。Cloudflare Pages 会自动重建项目,并在每次推送新提交时进行部署。
此外,你还可以访问 预览部署,它可以重复拉取请求的构建和部署过程。有了它们,你就可以在将更改部署到生产环境之前,用一个真实的 URL 来预览对项目所做的更改。