10分钟上手vercel-action从配置到部署的快速入门教程【免费下载链接】vercel-actionThis action make a deployment with github actions instead of Vercel builder.项目地址: https://gitcode.com/gh_mirrors/ve/vercel-action想要在10分钟内掌握Vercel Action的完整使用流程吗这个简单快速的入门教程将带你从零开始配置GitHub Actions工作流实现自动化部署到Vercel平台。vercel-action是一个强大的GitHub Action工具让你能够替代Vercel Builder通过GitHub Actions完成项目的构建和部署。为什么选择vercel-actionvercel-action提供了比原生Vercel集成更灵活的部署方案。它允许你完全控制构建过程支持自定义构建命令并且可以在GitHub Actions中处理复杂的构建流程。对于需要自定义构建步骤或希望在CI/CD管道中集成额外操作的项目来说vercel-action是完美的选择。准备工作获取Vercel配置信息在开始之前你需要准备好以下信息Vercel访问令牌- 从Vercel账户设置生成Vercel组织ID- 在项目设置中查找Vercel项目ID- 在项目设置中查找快速配置步骤 第一步禁用Vercel自动部署首先你需要禁用Vercel的原生Git集成以便让GitHub Actions接管部署流程。在你的项目根目录创建或更新vercel.json文件{ public: false, git: { deploymentEnabled: false } }或者使用TypeScript配置文件vercel.tsimport type { VercelConfig } from vercel/config/v1; export const config: VercelConfig { public: false, git: { deploymentEnabled: false, }, };第二步配置GitHub Secrets在你的GitHub仓库中进入Settings → Secrets and variables → Actions添加以下三个密钥VERCEL_TOKEN- 你的Vercel访问令牌VERCEL_ORG_ID- Vercel组织IDVERCEL_PROJECT_ID- Vercel项目ID第三步创建GitHub Actions工作流在项目根目录创建.github/workflows/deploy.yml文件添加以下基础配置name: Deploy to Vercel on: push: branches: [main] pull_request: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Deploy to Vercel uses: amondnet/vercel-actionv42 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} vercel-args: --prod高级配置选项详解 自定义构建流程如果你需要在部署前执行构建命令可以在工作流中添加构建步骤name: Deploy to Vercel on: [push] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Setup Node.js uses: actions/setup-nodev4 with: node-version: 20 - name: Install dependencies run: npm ci - name: Build project run: npm run build - name: Deploy to Vercel uses: amondnet/vercel-actionv42 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} working-directory: ./dist # 指定构建输出目录预构建部署模式推荐vercel-action支持预构建部署模式让你在GitHub Actions中完成构建然后将构建产物直接部署到Vercel- name: Deploy to Vercel uses: amondnet/vercel-actionv42 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} prebuilt: true vercel-output-dir: ./.vercel/outputPR评论和部署状态vercel-action可以自动在Pull Request中评论部署链接- name: Deploy to Vercel uses: amondnet/vercel-actionv42 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} github-comment: true # 在PR中自动评论 github-deployment: true # 创建GitHub部署状态实战示例不同框架的配置Next.js项目配置查看Next.js示例配置了解完整的配置- name: Deploy Next.js to Vercel uses: amondnet/vercel-actionv42 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} working-directory: ./example/nextjsAngular项目配置查看Angular示例配置获取详细配置- name: Deploy Angular to Vercel uses: amondnet/vercel-actionv42 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} working-directory: ./example/angular/dist/angular alias-domains: | staging.angular.vercel-action.amond.dev pr-{{PR_NUMBER}}.angular.vercel-action.amond.dev静态网站配置查看静态网站示例配置了解简单部署- name: Deploy static site to Vercel uses: amondnet/vercel-actionv42 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} working-directory: ./example/static常见问题解答 ❓如何获取Vercel项目ID和组织ID在本地项目目录运行vercel link查看生成的.vercel目录中的project.json文件文件中包含orgId和projectId如何为不同环境配置不同的域名使用alias-domains参数支持动态域名alias-domains: | staging.yourdomain.com pr-{{PR_NUMBER}}.yourdomain.com {{BRANCH}}.yourdomain.com如何处理环境变量通过env参数传递环境变量env: | API_URLhttps://api.example.com NODE_ENVproduction SECRET_KEY${{ secrets.MY_SECRET_KEY }}最佳实践建议 使用预构建模式- 在GitHub Actions中完成构建减少Vercel构建时间配置缓存- 为依赖安装步骤配置缓存加快工作流执行速度分离环境- 为开发、预发布和生产环境创建不同的工作流监控部署- 启用GitHub部署状态实时跟踪部署进度安全第一- 所有敏感信息都通过GitHub Secrets管理总结vercel-action为开发者提供了强大的GitHub Actions集成方案让你能够完全控制从代码到部署的整个流程。通过这个10分钟教程你已经掌握了vercel-action的核心配置方法可以开始为自己的项目配置自动化部署了。记住vercel-action的真正优势在于它的灵活性 - 你可以根据项目需求定制构建流程集成各种测试和检查步骤打造最适合你团队的工作流程。现在就去尝试配置你的第一个vercel-action工作流吧官方文档参考action.yml | 示例配置 | 项目源码【免费下载链接】vercel-actionThis action make a deployment with github actions instead of Vercel builder.项目地址: https://gitcode.com/gh_mirrors/ve/vercel-action创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考