开发
从v2.0版本开始,我们采用了Functions Advanced Mode + Wrangler Pages Dev的开发模式
这意味着您可以非常轻松的在本地开发属于您自己的图床服务
准备工作
首先你需要克隆这个仓库
bash
git clone https://github.com/Stoeaves/Cf-Github-ImgBed.git然后进入项目根目录
bash
cd Cf-Github-ImgBed安装依赖
bash
npm install开始
在根目录下你可以创建一个wrangler.toml文件,用于储存您的本地开发变量
不用担心泄密,这个文件会被.gitignore忽略,所以不会上传到Github
以下是wrangler.toml文件的示例内容:
toml
[[kv_namespaces]]
binding = "KV"
id = "xxxxxxxxx"
[vars]
ADMIN_PASSWORD = "xxx"
GITHUB_TOKEN = "ghp_xxxxxxxxxxxxxxxxxxxx"
RSA_PRIVATE_KEY = "xxx"
RSA_PUBLIC_KEY = ""您仅需复制此示例内容,然后填入相应的值即可
然后我们就可以开始开发了,运行:
bash
npm run dev然后你大概会收到以下提示:
bash
> cloudflare-github-imgbed@2.0.0 dev
> npm-run-all -p dev:*
> cloudflare-github-imgbed@2.0.0 dev:build
> vite build --watch
> cloudflare-github-imgbed@2.0.0 dev:pages
> wrangler pages dev dist
vite v7.3.3 building client environment for production...
watching for file changes...
build started...
transforming (38) node_modules\@vue\reactivity\dist\reactivity.esm-bundler.js
⛅️ wrangler 4.93.1
───────────────────
✨ Compiled Worker successfully
✓ 38 modules transformed.
dist/index.html 0.90 kB │ gzip: 0.53 kB
dist/assets/index-Ch5P55Iw.css 49.97 kB │ gzip: 7.60 kB
dist/assets/index-DT0cRIPn.js 183.12 kB │ gzip: 61.82 kB
built in 1000ms.
Your Worker has access to the following bindings:
Binding Resource Mode
env.KV (xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx) KV Namespace local
env.CF_PAGES ("1") Environment Variable local
env.CF_PAGES_BRANCH ("main") Environment Variable local
env.CF_PAGES_COMMIT_SHA ("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...") Environment Variable local
env.CF_PAGES_URL ("https://xxxxxxx.Cloudflare-Github-Img...") Environment Variable local
env.ADMIN_PASSWORD ("xxxxxx") Environment Variable local
env.GITHUB_TOKEN ("ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...") Environment Variable local
env.RSA_PRIVATE_KEY ("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...") Environment Variable local
env.RSA_PUBLIC_KEY ("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...") Environment Variable local
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser [d] open devtools [e] open local explorer [t] start tunnel [c] clear console [x] to exit │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
[wrangler:info] Ready on http://127.0.0.1:8788此时你就可以在浏览器打开http://127.0.0.1:8788,进行本地调试
并且当你修改了代码后,会自动重新编译,您仅需重新刷新浏览器页面即可
如果您想修改本地调试地址的端口,可以在wrangler.toml里加入以下内容:
toml
[dev]
port = 8788部署
当您开发完成后,您可以通过以下命令进行部署:
bash
npm run build
npm run deploy注意事项
- 本地开发时,您需要确保您的
wrangler.toml文件中的ADMIN_PASSWORD、GITHUB_TOKEN、RSA_PRIVATE_KEY、RSA_PUBLIC_KEY的值是正确的,以及KV的id是正确的