mcpField
W
web-deploy

web-deploy

github.com/alphaonedev云与 DevOps49 次安装
代码仓库

关于 web-deploy

web-deploy 是用于部署 Web 应用并配置从构建到发布流程的技能，涵盖 Cloudflare、Vercel、Netlify、Docker 和 GitHub Actions。它既介绍平台部署步骤，也涉及 CI/CD 自动化。

主要功能

  1. 01部署静态站点到 Cloudflare Pages
  2. 02部署无服务器应用到 Cloudflare Workers
  3. 03配置 Vercel 和 Netlify 部署
  4. 04构建并发布 Docker 镜像
  5. 05用 GitHub Actions 自动构建和部署

适用场景

  1. 01将静态站点发布到 Cloudflare Pages
  2. 02将无服务器应用部署到 Cloudflare Workers
  3. 03配置定期发布的 CI/CD
  4. 04通过 GitHub Actions 部署容器应用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill web-deploy

安装后在 Claude Code 中输入/web-deploy确认已加载。

详细介绍

web-deploy

用途

此技能可自动将 Web 应用部署到 Cloudflare Pages/Workers、Vercel、Netlify、Docker 和 GitHub Actions CI/CD 流水线等平台。它专注于简化从代码提交到上线部署的流程，处理配置、构建和环境集成。

适用场景

在部署静态站点、无服务器函数或容器化应用时使用此技能。可将其用于设置频繁更新所需的 CI/CD、将项目迁移到云平台，或响应 GitHub 事件自动部署。适用于涉及版本控制和云服务的 Web 开发工作流。

主要功能

  • 使用 Git 集成或 CLI 将静态站点部署到 Cloudflare Pages。
  • 通过 API 或 Wrangler CLI 处理 Cloudflare Workers 的无服务器部署。
  • 使用 CLI 命令和环境变量自动执行 Vercel 部署。
  • 使用 Netlify API 或 CLI 设置站点构建和部署。
  • 使用 Docker 容器化应用，并通过 GitHub Actions 编排 CI/CD。
  • 管理包含构建步骤、测试和部署触发器的流水线。

使用模式

按照以下模式将部署集成到工作流中：

  • 对于新项目，使用特定平台的配置文件进行初始化（例如，用于 Vercel 的 vercel.json）。
  • 在 CI/CD 中，使用 GitHub Actions 工作流在拉取请求或合并时触发部署。
  • 使用环境变量保存机密信息，例如用于身份验证的 $CLOUDFLARE_API_TOKEN。
  • 示例 1：将 React 应用部署到 Vercel——克隆仓库，在项目根目录运行 npx vercel，选择选项，然后推送更改。
  • 示例 2：为 Docker 化应用设置 CI/CD——创建 .github/workflows/deploy.yml 文件，其中包含构建 Docker 镜像并通过 API 调用部署到 Netlify 的步骤。

常用命令/API

执行任务时使用以下准确的命令和 API：

  • Cloudflare Pages：运行 npx wrangler pages deploy ./build --project-name=my-site 部署构建目录；API 端点：POST https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments，请求正文为 JSON {"files": [...]}，使用 $CLOUDFLARE_API_TOKEN 进行身份验证。
  • Vercel：在项目目录中执行 npx vercel deploy --prod；在 vercel.json 中配置：{"version": 2, "builds": [{"src": "package.json", "use": "@vercel/node"}]}，使用 $VERCEL_TOKEN 进行身份验证。
  • Netlify：命令：netlify deploy --dir=build --prod；API：POST https://api.netlify.com/api/v1/sites/{site_id}/deploys，使用表单数据和 $NETLIFY_ACCESS_TOKEN。
  • Docker：使用 docker build -t my-app:latest . 构建镜像；推送到镜像仓库：docker push my-repo/my-app:latest。
  • GitHub Actions：在 YAML 文件中使用：run: echo "::set-env name=GITHUB_TOKEN::${{ secrets.GITHUB_TOKEN }}"，然后使用 run: gh workflow run deploy.yml；示例代码片段： 
    jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: docker build . -t my-app
  • 对于 CI/CD，在 .github/workflows/main.yml 中添加工作流触发器：on: [push, pull_request]。

集成说明

在 CI/CD 配置中设置环境变量以完成集成，例如，在 GitHub Actions 中添加 env: { API_KEY: ${{ secrets.SERVICE_API_KEY }} }。对于多平台设置，可使用包含独立配置的单体仓库（例如，netlify.toml 和 vercel.json）。通过添加 Webhook 与 GitHub 集成：向 https://api.github.com/repos/{owner}/{repo}/hooks 发送 POST 请求，并附上 JSON 负载。确保为部署正确标记 Docker 镜像，例如 docker tag my-app:latest registry.example.com/my-app:1.0。对于 API 集成，可通过检查 X-RateLimit-Remaining 等响应标头来处理速率限制。

错误处理

通过检查退出代码和日志来处理错误；对于 CLI 命令，请在脚本中使用 try-catch（例如，在 Bash 中：if ! npx vercel deploy; then echo "Deployment failed"; exit 1; fi）。常见问题：身份验证失败——请确认 $CLOUDFLARE_API_TOKEN 等环境变量已设置；可通过 export CLOUDFLARE_API_TOKEN=your_key 解决。对于 API 错误，请解析响应（例如，如果状态代码为 429，请等待后重试）。在 GitHub Actions 中，对非关键步骤使用 continue-on-error: true，然后检查输出。错误日志记录示例代码片段：

try {
  await fetch('https://api.cloudflare.com/...', { headers: { Authorization: `Bearer ${process.env.CLOUDFLARE_API_TOKEN}` } });
} catch (error) {
  console.error('API error:', error.message);
}

通过启用详细模式来调试部署，例如 npx vercel deploy --debug。

图关系

  • 关联的集群：web-dev（例如，与 web-build 或 api-integration 等技能共享节点）。
  • 通过标签连接：deployment（链接到 ci-cd 技能）、ci-cd（连接到 github-actions 工具）、cloudflare（关联到 web-hosting 技能）、web（关联到 frontend-dev 能力）。

评论

支持 Markdown