使用付费npm包时GitHub Actions部署Azure静态Web应用失败

问题情况 #

尝试通过Azure/static-web-apps-deploy@v1 Action将静态Web应用从GitHub部署到Azure时，因构建环境无法识别私有npm仓库的授权凭证，导致付费npm包@infragistics/igniteui-react安装失败。

当前YAML工作流配置 #

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - dev
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - dev

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          submodules: true

      - name: Configure npm registry
        run: echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc

      - name: Configure npm authentication token
        run: echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc

      - name: Verify npm configuration
        run: npm config list

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "./Frontend" # Adjust this path if necessary
          output_location: "./build" # Adjust this path if necessary

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

报错日志 #

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@infragistics%2figniteui-react - Not found
npm ERR! 404 
npm ERR! 404  '@infragistics/igniteui-react@^18.6.0' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /github/home/.npm/_logs/2024-06-10T09_31_49_347Z-debug-0.log


---End of Oryx build logs---
Oryx has failed to build the solution.

解决方法 #

问题根源 #

Azure Static Web Apps使用Oryx进行构建，而Oryx的构建容器不会继承GitHub Actions步骤中配置的~/.npmrc文件，导致私有仓库的凭证无法被读取。

方案1：在应用目录添加.npmrc并注入环境变量 #

• 在前端应用目录（即配置中的./Frontend）下创建.npmrc文件，内容如下：

  @infragistics:registry=https://packages.infragistics.com/npm/js-licensed/
  //packages.infragistics.com/npm/js-licensed/:_auth=${NPM_TOKEN}
  

• 将该文件提交到GitHub仓库。
• 修改工作流中的Build And Deploy步骤，添加环境变量注入：

  - name: Build And Deploy
    id: builddeploy
    uses: Azure/static-web-apps-deploy@v1
    env:
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
    with:
      azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
      repo_token: ${{ secrets.GITHUB_TOKEN }}
      action: "upload"
      app_location: "./Frontend"
      output_location: "./build"
  

• 移除原工作流中的Configure npm registry、Configure npm authentication token和Verify npm configuration步骤。

方案2：在工作流中动态生成应用目录下的.npmrc #

如果不想将.npmrc提交到仓库，可以通过工作流动态生成：

• 移除原工作流中的Configure npm registry、Configure npm authentication token和Verify npm configuration步骤。
• 添加以下步骤，在应用目录生成.npmrc：

  - name: Generate .npmrc in app directory
    run: |
      echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" > ./Frontend/.npmrc
      echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.NPM_TOKEN }}" >> ./Frontend/.npmrc
  

• 保持Build And Deploy步骤不变即可。

注意事项 #

• 确保GitHub仓库的Secrets中已正确添加NPM_TOKEN，且该凭证拥有访问@infragistics私有npm包的权限。
• 若前端应用使用yarn，则需对应生成.yarnrc.yml文件，配置逻辑类似。

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