应用程序构建无法生成工件文件夹：“.next”。请确保在您的部署配置文件中正确配置此属性

Question

我有一个 nextJs 应用程序，我正在尝试将其部署在 azure 静态网站上，但出现以下错误：

应用程序构建无法生成工件文件夹：“.next”。请确保在您的部署配置文件中正确配置此属性。

下面是我的yaml文件

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '20.x'
  displayName: 'Install Node.js'

- script: node --version
  displayName: 'Verify Node.js version'

- script: |
    cd code
    npm install
    npm run build
  displayName: 'Build Next.js application'

- task: PublishBuildArtifacts@1
  inputs:
    pathtoPublish: 'code/.next'  
    artifactName: 'next-js-artifact'


- task: AzureStaticWebApp@0
  inputs:
    azure_static_web_apps_api_token: 'My_Token_value_here'
    app_location: '/' 
    artifact_location: 'next-js-artifact'
    output_location: '.next' 

我执行了changeDirectory命令，因为我的代码存储库有一个文件夹“code”，因此我执行了“cd code” 下面是我的 package.json 代码

 "scripts": {
    "path":"cd code",
    "dev": "next dev",
    "build": "next build",
    "build:azure" :"next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },

Answer 1

首先，

artifact_location

不包含在AzureStaticWebApp@0任务的输入中。所以，你不能这样使用它。不需要publishBuildArtifacts@1。

我使用代码示例Next.js Starter（静态站点），我还将代码放在“code”文件夹中来测试问题。

与您的代码相比，package.json的构建命令存在差异。它在构建命令之后添加了导出命令，该命令变为

"build": "next build && next export"

。然后我们可以从构建任务的日志中找到导出文件的位置。

然后我们可以使用AzureStaticWebApp@0作为以下yaml：

  steps:
  - checkout: self
    submodules: true

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

  - script: node --version
    displayName: 'Verify Node.js version'


  - script: |
      cd code
      npm install
      npm run build
    displayName: 'Build Next.js application'
    
  - script: ls -R
    displayName: 'list files to check the out put file path'

  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: "my token"
      app_location: '/code'    #The directory location of the application source code, relative to the working directory. The default Working directory is  $(System.DefaultWorkingDirectory).
      output_location: 'out'    #The directory location of the compiled application code after building is complete, relative to the working directory.

您还可以从官方文档查看更多详细信息：在 Azure Static Web Apps 上部署静态渲染的 Next.js 网站。