跳转到内容
搜索文档
↵选择
↑↓导航
ESC关闭

直接上传

最后更新 查看 MarkdownAgent 设置

直接上传允许您将预构建资源上传到 Pages 并部署到 Cloudflare 全球网络。如果要集成自己的构建平台或从本地计算机上传，应选择直接上传而非 Git 集成。

本指南将指导您如何使用 Wrangler 或拖放方式上传资源。

前提条件

在使用直接上传部署项目之前，请运行适当的构建命令来构建项目。

上传方式

预构建资源准备好后，有两种上传方式：

支持的文件类型

以下是每种直接上传选项支持的文件类型：

  • Wrangler：单个资源文件夹。（不支持 Zip 文件。）
  • 拖放：Zip 文件或单个资源文件夹。

Wrangler CLI

设置 Wrangler

首先，安装 npm ↗。然后安装 Wrangler（Developer Platform CLI）。

创建项目

使用 wrangler login 命令 登录 Wrangler。然后运行 pages project create 命令：

npx wrangler pages project create

系统将提示您指定项目名称。项目将在 <PROJECT_NAME>.pages.dev 上提供服务（如果项目名称已被占用，则为项目名称加几个随机字符）。系统还会提示您指定生产分支。

后续部署将复用这两个值（保存在 node_modules/.cache/wrangler 文件夹中）。

部署资源

此时，您已创建空项目，现在可以部署资源以进行首次部署以及生产环境中的所有后续部署。为此，请运行 wrangler pages deploy 命令：

npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>

在框架预设下的构建目录中查找项目的适当构建输出目录。

生产部署将在 <PROJECT_NAME>.pages.dev 上可用。

要将资源部署到预览环境，请运行：

npx wrangler pages deploy <OUTPUT_DIRECTORY> --branch=<BRANCH_NAME>

对于创建的每个分支，您可以在 <BRANCH_NAME>.<PROJECT_NAME>.pages.dev 上使用分支别名。

如果希望简化项目创建与资源部署步骤，也可以使用 deploy 命令同时创建并部署资源。若首先执行此命令，仍会提示您指定项目名称和生产分支。如上所述，这些值仍会缓存以供后续部署使用。如果缓存已存在且您希望创建新项目，则需要运行 create 命令。

其他实用命令

如果要使用 Wrangler 获取直接上传所有可用项目的列表，请使用 pages project list：

npx wrangler pages project list

要以 JSON 格式输出用于编程或脚本，请使用 --json 标志：

npx wrangler pages project list --json

如果要使用 Wrangler 获取特定项目的所有唯一预览 URL 列表，请使用 pages deployment list：

npx wrangler pages deployment list

有关如何将 Wrangler 与 GitHub Actions、Circle CI 和 Travis CI 等持续集成工具一起用于持续部署的分步说明，请参阅将 Direct Upload 与持续集成一起使用。

拖放

使用拖放部署项目

要使用拖放部署：

  1. 在 Cloudflare 仪表板中，前往 Workers & Pages 页面。

    Go to Workers & Pages ↗

  2. 选择 Create application（创建应用） > Get started（开始使用） > Drag and drop your files（拖放文件）。

  3. 在提供的字段中输入项目名称并拖放资源。

  4. 选择 Deploy site（部署站点）。

项目将从 <PROJECT_NAME>.pages.dev 提供服务。接下来将构建输出目录拖放到上传框中。文件成功上传后，选择 Save and Deploy（保存并部署） 并继续访问新部署的项目。

创建新部署

创建项目后，选择 Create a new deployment（创建新部署） 开始站点的新版本。接下来，选择新部署是部署到生产环境还是预览环境。如果选择预览，可以创建新的部署分支或输入现有分支。

故障排除

限制

上传方式 文件数量限制 文件大小
Wrangler 20,000 files 25 MiB
拖放 1,000 files 25 MiB

如果使用拖放方式，资源过大导致上传失败时，资源旁会出现红色警告符号。此时，你可以选择删除该资源，但无法替换。要替换，必须重新上传整个项目。

生产分支配置

如果项目是 Direct Upload 项目，你将无法配置生产分支控制。要更新生产分支，需要手动调用 API 中的 Update Project 端点。

curl --request PATCH \
"https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}" \
--header "Authorization: Bearer <API_TOKEN>" \
--header "Content-Type: application/json" \
--data "{\"production_branch\": \"main\"}"

Functions（函数）

目前，从 Cloudflare 仪表板进行的拖放部署不支持编译 Pages Functions 的 functions 文件夹。要部署 functions 文件夹，必须使用 Wrangler。使用 Wrangler 部署项目时，如果运行命令的位置存在 functions 文件夹，该 functions 文件夹将与项目一起上传。

但请注意，Wrangler 和从仪表板进行的拖放部署都支持 _worker.js 文件。

这篇文档对您有帮助吗？