开发教程部署到 Cloudflare

部署到 Cloudflare

使用 edge-runtime 分支

使用 ShipAny 开发新项目时,建议拉取 edge-runtime 分支,无需额外修改,支持一键部署到 Cloudflare。

Terminal
git clone -b edge-runtime [email protected]:shipanyai/shipany-template-one.git my-shipany-project

如果之前已经从 main 分支拉取了项目,可以参考下面的部署流程做必要修改,以便部署到 Cloudflare。

部署流程

  1. 修改 app 目录下的所有页面文件(page.tsx)和 API 文件(route.ts

添加一行:

app/[locale]/(default)/new-page/page.tsx
export const runtime = "edge";

add-runtime

  1. 在项目根目录创建一个 .env.production 文件
Terminal
cp .env.example .env.production

并把 .env.production 文件中的配置全部更新为生产环境配置。

  1. 在项目根目录创建一个 wrangler.toml 文件
Terminal
cp wrangler.toml.example wrangler.toml

把上一步在 .env.production 文件中配置好的生产环境变量,复制到 wrangler.toml 文件中的 [vars] 下面,并且修改 wrangler.toml 文件中的项目名称 name

wrangler

  1. 部署到 Cloudflare

在项目根目录运行以下命令:

Terminal
npm run cf:deploy

按照提示,输入要部署的项目名称和分支名称(main),连接上你的 Cloudflare 账号,然后等待部署完成。

cfdeploy

  1. 进入 Cloudflare 控制台,可以看到项目已经成功部署

cfconsole

  1. 访问项目

使用默认生成的域名可访问项目,绑定自定义域名可正式上线。

cfpreview

参考资料