如何通过Bazel将GitLab上的Next.js项目部署到Azure静态Web应用？

核心问题分析 #

• 当前Bazel构建的是Next.js的服务端渲染(SSR)产物（//web:server_start对应的.next文件夹），但Azure静态Web Apps默认需要静态导出的HTML文件（比如index.html），这是报错的根本原因。
• SKIP_APP_BUILD未生效，是因为Azure静态Web Apps部署工具的变量名称不是这个，需要用官方指定的SKIP_BUILD变量。

步骤1：调整Bazel构建规则，生成静态导出产物 #

修改web/BUILD文件，新增一个静态导出的Bazel target，调用Next.js的next export命令：

# 新增静态导出规则
genrule(
    name = "static_export",
    srcs = [":server"],  # 依赖已有的server target
    outs = ["out"],  # 静态导出产物输出目录
    cmd = """
        # 执行Next.js静态导出，指定输出路径为outs目录
        $(location //:next_js_binary) export web --out $(@D)/out
    """,
    tools = ["//:next_js_binary"],
    visibility = ["//visibility:public"],
)

如果使用的是rules_nodejs等专用Next.js Bazel规则，也可以直接在原next规则中添加导出配置，具体参考对应规则文档。

步骤2：修改GitLab CI配置 #

更新.gitlab-ci.yml，确保构建静态导出产物，并正确配置Azure部署参数：

stages:
- build
- deploy

variables:
  DEPLOY_OUT: bazel-cd-out
  API_TOKEN: $DEPLOYMENT_TOKEN
  # Azure部署工具的正确变量
  SKIP_BUILD: 'true'  # 替换无效的SKIP_APP_BUILD
  APP_LOCATION: 'bazel-bin/web/out'  # 指向静态导出产物目录
  OUTPUT_LOCATION: ''  # 静态文件无需额外输出路径

build_nextjs_static:
  image:
    name: cockroachdb/bazel:20230316-060229
    entrypoint: [""]
  stage: build
  script:
    - bazel clean
    - bazel --output_base $DEPLOY_OUT build //web:static_export  # 构建静态导出target
  artifacts:
    paths:
      - bazel-bin/web/out  # 上传静态产物
  cache:
    key: nextjs-static
    paths:
      - $DEPLOY_OUT

deploy_nextjs_prod:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - |
      az staticwebapp deploy \
        --name <你的Azure静态Web Apps名称> \
        --resource-group <你的资源组名称> \
        --token $API_TOKEN \
        --app-location "$APP_LOCATION" \
        --skip-build
  environment:
    name: nextjs_prod
    url: <你的Azure静态Web Apps URL>
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
      when: manual
  dependencies:
    - build_nextjs_static

关键配置说明 #

1. 静态产物路径：bazel-bin/web/out目录下会生成完整的静态HTML、CSS、JS文件，符合Azure静态Web Apps的检测要求。
2. 变量修正：使用Azure官方的SKIP_BUILD变量，确保部署工具跳过自动构建步骤。
3. 部署命令：直接调用az staticwebapp deploy并明确指定参数，避免工具自动路径检测出错。

备选方案（SSR部署需求） #

如果项目需要保留Next.js SSR功能，Azure静态Web Apps也支持SSR部署，但配置更复杂：

• 无需静态导出，直接部署.next文件夹及依赖
• 需要配置api_location指向Next.js服务端入口，并确保Azure运行环境支持Node.js

若无特殊SSR需求，优先选择静态导出方案，配置更简单、部署更稳定。

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