Azure DevOps YAML流水线部署Next.js：替换.env为变量组

步骤1：创建Azure DevOps变量组 #

1. 进入Azure DevOps项目的管道 > 库
2. 点击**+ 变量组**，命名为如NextJS-Env-Vars的名称
3. 添加所有需要的环境变量：
   • SITECORE_API_KEY
   • SITECORE_API_HOST
   • GRAPH_QL_ENDPOINT
   • JSS_APP_NAME
   • SITECORE_SITE_NAME
   • SITECORE_EDGE_CONTEXT_ID
   • GRAPH_QL_SERVICE_RETRIES
   • FETCH_WITH
   • DEBUG
   • PUBLIC_URL
   • NEXTAUTH_SECRET
4. 对SITECORE_API_KEY、NEXTAUTH_SECRET这类敏感变量，勾选保密选项防止明文泄露
5. 保存变量组，并确保流水线拥有该组的访问权限

步骤2：修改YAML流水线 #

移除原有的.env文件下载、复制步骤，替换为引用变量组并生成.env文件的逻辑：

trigger: 
- none

pool:
  vmImage: 'ubuntu-latest' 

# 引用创建好的变量组
variables:
- group: NextJS-Env-Vars

stages:
- stage: fedbuild
  displayName: 'Build'
  jobs:
  - job: build
    displayName: 'Front-End Build'
    steps:
    # 新增：从变量组生成.env文件
    - task: Bash@3
      displayName: 'Generate .env file from variable group'
      inputs:
        targetType: 'inline'
        script: |
          cd $(System.DefaultWorkingDirectory)/pico-xmcloud-project/src/sxapico
          # 写入环境变量到.env文件
          cat > .env << EOF
          SITECORE_API_KEY=$(SITECORE_API_KEY)
          SITECORE_API_HOST=$(SITECORE_API_HOST)
          GRAPH_QL_ENDPOINT=$(GRAPH_QL_ENDPOINT)
          JSS_APP_NAME=$(JSS_APP_NAME)
          SITECORE_SITE_NAME=$(SITECORE_SITE_NAME)
          SITECORE_EDGE_CONTEXT_ID=$(SITECORE_EDGE_CONTEXT_ID)
          GRAPH_QL_SERVICE_RETRIES=$(GRAPH_QL_SERVICE_RETRIES)
          FETCH_WITH=$(FETCH_WITH)
          DEBUG=$(DEBUG)
          PUBLIC_URL=$(PUBLIC_URL)
          NEXTAUTH_SECRET=$(NEXTAUTH_SECRET)
          EOF
          # 验证文件生成（保密变量会被自动屏蔽）
          cat .env

    - task: NodeTool@0
      inputs:
        versionSpec: '21.7.1'
      displayName: 'Install Node.js'

    - script: |
        npm install
      displayName: 'npm install'
      workingDirectory: '$(System.DefaultWorkingDirectory)/pico-xmcloud-project/src/sxapico'

    - task: Npm@1
      displayName: 'npm bootstrap'
      inputs:
        command: 'custom'
        workingDir: '$(System.DefaultWorkingDirectory)/pico-xmcloud-project/src/sxapico'
        customCommand: 'run bootstrap'
  
    - task: Npm@1
      displayName: 'npm build'
      inputs:
        command: 'custom'
        workingDir: '$(System.DefaultWorkingDirectory)/pico-xmcloud-project/src/sxapico'
        customCommand: 'run next:build'
        verbose: true

    - task: CopyFiles@2
      inputs:
        SourceFolder: '$(System.DefaultWorkingDirectory)/pico-xmcloud-project/src/sxapico'
        Contents: '**/*'
        TargetFolder: '$(Build.ArtifactStagingDirectory)/output'
        CleanTargetFolder: true
        OverWrite: true
      displayName: 'Copy Files to Target'
    
    - task: ArchiveFiles@2
      inputs:
        rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/output'
        includeRootFolder: false
        archiveType: 'zip'
        archiveFile: '$(Build.ArtifactStagingDirectory)/nodeapp/$(Build.BuildId).zip'
        replaceExistingArchive: true
      displayName: 'Archive files'
    
    - task: PublishPipelineArtifact@0
      inputs:
        artifactName: 'package'
        targetPath: '$(Build.ArtifactStagingDirectory)/nodeapp/'
      displayName: 'Publish package'

补充说明 #

1. 变量注入逻辑：通过variables: - group: NextJS-Env-Vars将变量组中的值注入流水线，所有变量可直接通过$(变量名)调用
2. 保密变量安全：Azure DevOps会自动屏蔽日志中输出的保密变量值，避免敏感信息泄露
3. 无文件替代方案：如果不想生成.env文件，可直接在npm build任务中注入环境变量，示例：

   - task: Npm@1
     displayName: 'npm build'
     inputs:
       command: 'custom'
       workingDir: '$(System.DefaultWorkingDirectory)/pico-xmcloud-project/src/sxapico'
       customCommand: 'run next:build'
       verbose: true
     env:
       SITECORE_API_KEY: $(SITECORE_API_KEY)
       SITECORE_API_HOST: $(SITECORE_API_HOST)
       # 其余变量依次添加
   

内容的提问来源于stack exchange，提问作者Nopesound