如何将GitHub Secrets注入NextJS应用的Vercel CI/CD部署

希望使用GitHub Secrets中的环境变量（而非.env文件或Vercel直接配置）构建并部署NextJS应用到Vercel，开发环境工作流配置如下：

on:
  push:
    branches:
      - development

jobs:
  Deploy-Development:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Configure node
        uses: ./.github/actions/setup-project

      - name: Format & Lint code
        uses: ./.github/actions/format-code

      - name: Build app
        run: npm run build
        env:
          DATABASE_URL: ${{ secrets.DEV_DATABASE_URL }}
          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
          NEXT_ENV: 'development'

      - name: Deploy app to Vercel development env
        uses: ./.github/actions/vercel-deployment
        with:
          mode: 'development'
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
        env:
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
          VERCEL_FORCE_NO_BUILD_CACHE: 1
          DATABASE_URL: ${{ secrets.DEV_DATABASE_URL }}
          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
          API_KEY: ${{ secrets.API_KEY }}
          NEXT_ENV: 'development'

对应的action配置如下：

inputs:
  vercel-token:
    description: 'Vercel token'
    required: true
  mode:
    description: 'Deployment mode'
    required: true

runs:
  using: 'composite'
  steps:
    - name: Install Vercel CLI
      run: npm install --global vercel@canary
      shell: bash

    - name: PRODUCTION Vercel Deployment
      if: ${{ inputs.mode == 'production' }}
      run: |
        vercel pull --yes --environment=production --token=${{ inputs.vercel-token }}
        vercel build --prod --token=${{ inputs.vercel-token }}
        vercel deploy --prebuilt --prod --token=${{ inputs.vercel-token }}
      shell: bash

    - name: DEVELOPMENT Vercel Deployment
      if: ${{ inputs.mode == 'development' }}
      run: |
        vercel pull --yes --environment=development --token=${{ inputs.vercel-token }}
        vercel build --token=${{ inputs.vercel-token }}
        vercel deploy --prebuilt --token=${{ inputs.vercel-token }}
      shell: bash

需要做出哪些修改才能正确注入环境变量？要求为开发和生产环境配置不同的数据库，且了解NextJS的环境变量优先级规则。

根据需求，需调整工作流和Vercel部署Action的配置，确保GitHub Secrets的环境变量能正确注入到Next.js构建和部署流程中，具体修改如下：

1. 移除冗余的本地构建步骤 #

当前工作流中先执行npm run build，之后又在Vercel Action里执行vercel build，导致构建重复，且本地构建的环境变量无法传递到Vercel的构建流程。直接删除工作流中的Build app步骤即可。

修改后的开发工作流片段：

# 移除以下整个步骤
# - name: Build app
#   run: npm run build
#   env:
#     DATABASE_URL: ${{ secrets.DEV_DATABASE_URL }}
#     NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
#     NEXT_ENV: 'development'

2. 修改Vercel部署Action，避免变量冲突并显式注入环境变量 #

vercel pull会拉取Vercel平台上配置的环境变量，会覆盖我们从GitHub Secrets注入的值，因此需要移除该命令；同时在Action的对应环境步骤中直接注入GitHub Secrets的变量，确保构建时能读取到正确的值。

修改后的Action配置：

inputs:
  vercel-token:
    description: 'Vercel token'
    required: true
  mode:
    description: 'Deployment mode'
    required: true

runs:
  using: 'composite'
  steps:
    - name: Install Vercel CLI
      run: npm install --global vercel@canary
      shell: bash

    - name: PRODUCTION Vercel Deployment
      if: ${{ inputs.mode == 'production' }}
      run: |
        vercel build --prod --token=${{ inputs.vercel-token }}
        vercel deploy --prebuilt --prod --token=${{ inputs.vercel-token }}
      shell: bash
      env:
        DATABASE_URL: ${{ secrets.PROD_DATABASE_URL }}
        NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
        API_KEY: ${{ secrets.API_KEY }}
        NEXT_ENV: 'production'

    - name: DEVELOPMENT Vercel Deployment
      if: ${{ inputs.mode == 'development' }}
      run: |
        vercel build --token=${{ inputs.vercel-token }}
        vercel deploy --prebuilt --token=${{ inputs.vercel-token }}
      shell: bash
      env:
        DATABASE_URL: ${{ secrets.DEV_DATABASE_URL }}
        NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
        API_KEY: ${{ secrets.API_KEY }}
        NEXT_ENV: 'development'

3. 简化工作流中传递给Action的变量 #

由于已在Action内部配置了业务环境变量，工作流中只需保留Vercel平台相关的组织、项目ID等变量即可：

修改后的工作流部署步骤：

- name: Deploy app to Vercel development env
  uses: ./.github/actions/vercel-deployment
  with:
    mode: 'development'
    vercel-token: ${{ secrets.VERCEL_TOKEN }}
  env:
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    VERCEL_FORCE_NO_BUILD_CACHE: 1

4. 确认Next.js环境变量前缀（按需调整） #

如果变量需要在客户端组件中使用，记得添加NEXT_PUBLIC_前缀（例如NEXT_PUBLIC_API_KEY），否则变量仅能在服务端生效。根据实际需求调整变量名即可。

关键注意事项 #

• 利用Next.js环境变量优先级：系统环境变量优先级高于.env文件，直接注入系统环境变量会覆盖本地.env配置，符合需求；
• 清空Vercel平台配置：确保Vercel项目中未配置同名环境变量，避免部署时覆盖GitHub Secrets注入的值。

内容的提问来源于stack exchange，提问作者Paweł Gnat