Angular

Angular ↗ 是一个非常流行的框架，用于构建响应式、功能强大的前端应用。

在本指南中，你将创建新的 Angular 应用并使用 Cloudflare Pages 部署。

使用 `create-cloudflare` CLI (C3) 创建新项目

使用 create-cloudflare ↗ CLI (C3) 设置新项目。C3 将创建新项目目录，启动 Angular 官方设置工具，并提供即时部署选项。

要使用 create-cloudflare 创建新的 Angular 项目，请运行以下命令：

npm create cloudflare@latest -- my-angular-app --framework=angular --platform=pages

yarn create cloudflare my-angular-app --framework=angular --platform=pages

pnpm create cloudflare@latest my-angular-app --framework=angular --platform=pages

create-cloudflare 将安装依赖，包括 Wrangler CLI 和 Cloudflare Pages 适配器，并询问设置问题。

Git 集成

除了 Direct Upload 部署外，你还可以通过 Git 集成部署项目。Git 集成允许你将 GitHub 或 GitLab 仓库连接到 Pages 应用，并在每次推送新提交后自动构建和部署 Pages 应用。

设置需要 Git ↗ 的基础知识。如果你是 Git 新手，请参阅 GitHub 的精简 Git 手册 ↗，了解如何在本地设置 Git。

创建 GitHub 仓库

访问 repo.new ↗ 创建新的 GitHub 仓库。创建新仓库后，进入新创建的项目目录，在终端中运行以下命令，准备并将本地应用推送到 GitHub：

# Skip the following three commands if you have built your application
# using C3 or already committed your changes
git init
git add .
git commit -m "Initial commit"

git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin main

创建 Pages 项目

要将站点部署到 Pages：

在 Cloudflare 仪表板中，前往 Workers & Pages 页面。
Go to Workers & Pages ↗
选择 Create application（创建应用程序）。
选择 Pages 选项卡。
选择 Import an existing Git repository（导入现有 Git 仓库）。
选择你创建的新 GitHub 仓库，然后选择 Begin setup（开始设置）。
在 Set up builds and deployments（设置构建和部署） 部分，提供以下信息：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`dist/cloudflare`

可选：你可以自定义 **Project name（项目名称）**字段。它默认为 GitHub 仓库名称，但不必一致。Project name（项目名称） 值将分配为你的 *.pages.dev 子域名。

完成配置后，选择 Save and Deploy（保存并部署）。

查看首次部署流水线进度。Pages 安装所有依赖并按指定方式构建项目。每次推送新提交时，Cloudflare Pages 都会自动重新构建并部署项目。

此外，你还可以使用预览部署，对 pull request 重复构建和部署流程。这样可以在将更改部署到生产环境之前，通过真实 URL 预览项目更改。

了解更多

完成本指南后，你已成功将 Angular 站点部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表。