如何通过Azure Pipeline为Vercel预览环境添加自定义域名

我太懂这种尴尬了——不用GitHub，靠Azure Repo + Pipeline对接Vercel，主分支的生产环境已经搞定自定义域名，结果到develop分支的预览环境就卡壳了，连Pipeline还出了“本地构建失败但Vercel显示部署成功”的诡异问题。别慌，咱们一步步把这事儿理顺，给你的预览环境绑上专属自定义域名。

第一步：先把Vercel那边的前置准备做好 #

毕竟域名这事儿得先让Vercel认账，不然Pipeline再怎么跑也白搭：

• 打开你的Vercel项目设置，找到「Domains」选项，把你要给预览环境用的子域名（比如preview.yourdomain.com）加进去。
• 去你的域名服务商后台，给这个子域名配置DNS解析：把它CNAME到cname.vercel-dns.com，等个10分钟左右让解析生效。
• 顺手把Vercel的几个关键信息记下来：项目ID（在「General」设置里找）、团队ID（如果是团队项目，去团队设置里拿）、还有你的Vercel账户Token（在账户设置的「Tokens」里生成），这些后面要用到Azure Pipeline的变量里。

第二步：修正Azure Pipeline的配置，精准分分支部署 #

你之前的Pipeline里作业条件没写全，导致分支触发逻辑混乱，先把这个改了，同时加上预览环境的专属部署逻辑：

首先，把Pipeline拆成两个独立作业，分别对应main（生产）和develop（预览）分支，避免互相干扰：

trigger:
- main
- develop

pool:
  vmImage: ubuntu-latest

jobs:
- job: deploy_production
  displayName: 部署到生产环境（Main分支）
  # 只有main分支推送时才触发这个作业
  condition: eq(variables['Build.SourceBranch'], 'refs/heads/main')
  steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: '安装匹配项目的Node.js版本'

  - script: |
      # 全局安装Vercel CLI
      npm install -g vercel
      # 用Token免交互登录Vercel
      vercel login --token $(VERCEL_TOKEN)
      # 部署到生产环境，指定项目和团队ID
      vercel deploy --prod --project $(VERCEL_PROJECT_ID) --team $(VERCEL_TEAM_ID) --token $(VERCEL_TOKEN)
    displayName: 'Vercel生产环境部署'
    env:
      # 从Azure Pipeline的库变量中读取敏感信息，别硬写在代码里
      VERCEL_TOKEN: $(VERCEL_TOKEN)
      VERCEL_PROJECT_ID: $(VERCEL_PROJECT_ID)
      VERCEL_TEAM_ID: $(VERCEL_TEAM_ID)

- job: deploy_preview
  displayName: 部署到预览环境（Develop分支）
  # 只有develop分支推送时才触发这个作业
  condition: eq(variables['Build.SourceBranch'], 'refs/heads/develop')
  steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: '安装匹配项目的Node.js版本'

  - script: |
      npm install -g vercel
      vercel login --token $(VERCEL_TOKEN)
      # 重点！部署时指定咱们提前准备好的预览自定义域名
      vercel deploy --domain preview.yourdomain.com --project $(VERCEL_PROJECT_ID) --team $(VERCEL_TEAM_ID) --token $(VERCEL_TOKEN)
    displayName: 'Vercel预览环境部署（绑定自定义域名）'
    env:
      VERCEL_TOKEN: $(VERCEL_TOKEN)
      VERCEL_PROJECT_ID: $(VERCEL_PROJECT_ID)
      VERCEL_TEAM_ID: $(VERCEL_TEAM_ID)

第三步：解决“Pipeline构建失败但Vercel显示成功”的问题 #

这大概率是你之前的Pipeline里重复做了构建操作——既在Pipeline里跑了npm install+npm run build，又让Vercel在部署时自动拉代码再构建一次，两边环境不一样就容易出问题。解决办法二选一：

• 要么让Vercel全权负责构建：直接删掉Pipeline里的npm install和npm run build步骤，让Vercel自己拉取代码、装依赖、构建，这样能保证和Vercel控制台部署的环境完全一致。
• 要么在Pipeline里构建好再推给Vercel：如果你非要在Pipeline里做构建，那部署命令要改成vercel deploy --domain preview.yourdomain.com --dist 你的产物文件夹名（比如React项目是build，Vue是dist），让Vercel直接上传你已经构建好的产物，跳过它自己的构建流程。

第四步：配置Azure Pipeline的变量 #

把咱们之前记的Vercel Token、项目ID、团队ID，加到Azure Pipeline的「Library」变量组里，这样既安全又不用在代码里硬写敏感信息：

• 打开你的Azure DevOps项目，找到「Pipelines」->「Library」，新建一个变量组，把三个变量加进去，记得把VERCEL_TOKEN设为保密变量（勾选「Keep this value secret」）。
• 回到你的Pipeline编辑页面，在「Variables」里关联这个变量组。

最后测试一把 #

推个代码到develop分支，触发Pipeline，等作业跑完后，直接访问你设置的预览自定义域名，看看是不是已经成功部署了。要是还有问题，先检查Vercel的域名验证有没有过，再看Pipeline作业的日志里有没有具体的报错信息，对着改就行。

备注：内容来源于stack exchange，提问作者Nidhin Kumar