Skip to content

cdz-me/pastebin-ui

 
 

Repository files navigation

Deploy to Cloudflare Workers

开始开发

  1. 安装 wrangler-cli
npm i @cloudflare/wrangler -g

根据文档登录 cloudflare 账号:

wrangler login

执行上面的命令后,会在浏览器打开一个页面,跳转到 cloudflare 的登录页面,然后点击授权登录,然后会跳转到一个页面,然后在终端输入 wrangler whoami,如果显示你的用户名,说明登录成功了。

  1. 安装依赖
# 安装后端依赖
yarn install

# 安装前端依赖
cd static
yarn install
  1. 在 cloudflare 里创建 kv namespace

image

我们这里创建了两个 kv,一个用来存储文件,一个用来存储文字,然后分别取名为 PBIMGPB,其实名字无所谓,重点是要记住 id,后面会用到

  1. 修改 wrangler.toml
name= "pastebin-worker"
compatibility_date = "2023-11-28"
account_id= "<account_id>" # 这里改成你自己的 account_id
main = "src/index.ts"
workers_dev = false

vars = { ENVIRONMENT = "production" }
route = { pattern = "<your domain>", custom_domain = true }

kv_namespaces = [
  { binding = "PB", id = "<PB kv id>" },
  { binding = "PBIMGS", id ="<PB file id>" }
]

[site]
bucket = "./static/dist"

其中 account_idroute, kv_namespaces 需要根据自己的情况修改,我们这里用到了两个 kv,一个存储文件,一个存储文字。如果不需要自定义域名,注释掉 route 这行即可。

account_id 可以在 cloudflare 的 dashboard 中找到, route 是你的 worker 的路由(也就是自定义域名),kv_namespaces 是你创建的 kv 的 id

  1. 开发
# 启动后端
wrangler dev

# 启动前端
cd static
yarn dev

服务器启动后,后端的地址是 http://localhost:8787,前端的地址是 http://localhost:5173,如果想测试前端打包后的情况,直接在 static 目录执行 yarn build,然后访问 http://localhost:8787 就可以了

部署

手动部署

获取你的 cloudflare 账号的 api key,然后设置为 github aciton 的 secret,名字为CF_API_TOKEN,这样每次 push 代码到 main 分支,就会自动部署到 cloudflare

获取 API Token 的方法:

image

然后点击 Create Token:

image

选择 worker 的模版创建成功即可获取 api token

image

在 github action 里设置 secret

image

在这里设置你的 api token,而后每次 push 代码到 main 分支,就会自动部署到 cloudflare

自动部署

点击上面的 Deploy with Workers 按钮,然后根据提示操作即可。

About

内容中转站

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.0%
  • HTML 1.7%
  • Other 1.3%