I'm trying to set up a simple next.js app with build and release pipelines, but I haven't found any reliable template for this, so I'm struggling a bit...

Here's the azure-pipeline.yaml I have so far...

trigger:
- master

pool:
  vmImage: ubuntu-latest

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

- script: |
    npm install
  displayName: 'npm install'

- script:
    npm run test:ci
  displayName: 'npm test'

- task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '**/test-report.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    failTaskOnMissingResultsFile: true
  displayName: 'Publish test results'

- task: PublishCodeCoverageResults@2
  inputs:
    summaryFileLocation: '$(Build.SourcesDirectory)/coverage/cobertura-coverage.xml'
    pathToSources: '$(Build.SourcesDirectory)'
  displayName: 'Publish code coverage results'

- script: |
    npm run build
  displayName: 'npm build'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/.next'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true
  displayName: 'Archive build files'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'
  displayName: 'Publish build artifacts'

Release Pipeline

There are currently no errors when running both the build and release pipelines, but when I check the website, it just shows the default Azure page that appears when no application is deployed.

I was thinking that this might have something to do with the .zip content, I tried doing some research but everyone suggests a different way of doing it. Right now the only files I have compressed are those in the .next/ folder. In some posts, people say you need to include node_modules, package.json, public/ folder, so here's the first question,** what files are required in the .zip**?

Also, there's the Startup Command that I saw some people filling in the webapp configuration, and once again, everyone uses a different command...Mine is empty right now. I tried a couple of commands but none of them worked, some printed "npm start is not recognized as an internal or external command", and well, no idea how to get around all those issues...

The WebApp is running on Linux with Node 20 LTS

I'm trying to set up a simple next.js app with build and release pipelines, but I haven't found any reliable template for this, so I'm struggling a bit...

Here's the azure-pipeline.yaml I have so far...

trigger:
- master

pool:
  vmImage: ubuntu-latest

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

- script: |
    npm install
  displayName: 'npm install'

- script:
    npm run test:ci
  displayName: 'npm test'

- task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '**/test-report.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    failTaskOnMissingResultsFile: true
  displayName: 'Publish test results'

- task: PublishCodeCoverageResults@2
  inputs:
    summaryFileLocation: '$(Build.SourcesDirectory)/coverage/cobertura-coverage.xml'
    pathToSources: '$(Build.SourcesDirectory)'
  displayName: 'Publish code coverage results'

- script: |
    npm run build
  displayName: 'npm build'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/.next'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true
  displayName: 'Archive build files'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'
  displayName: 'Publish build artifacts'

Release Pipeline

There are currently no errors when running both the build and release pipelines, but when I check the website, it just shows the default Azure page that appears when no application is deployed.

I was thinking that this might have something to do with the .zip content, I tried doing some research but everyone suggests a different way of doing it. Right now the only files I have compressed are those in the .next/ folder. In some posts, people say you need to include node_modules, package.json, public/ folder, so here's the first question,** what files are required in the .zip**?

Also, there's the Startup Command that I saw some people filling in the webapp configuration, and once again, everyone uses a different command...Mine is empty right now. I tried a couple of commands but none of them worked, some printed "npm start is not recognized as an internal or external command", and well, no idea how to get around all those issues...

The WebApp is running on Linux with Node 20 LTS

• azure
• next.js
• azure-devops
• azure-pipelines
• cloud

• Check the Kudu console for deployed files. – Aslesha Kantamsetti Commented Jan 21 at 3:55
• What does your Log stream Show? – Aslesha Kantamsetti Commented Jan 21 at 6:21

1 Answer 1

I created Sample Nextjs app and deployed to Azure App service Linux using Azure Dev-Ops Piplines.

Thanks @azure365pro for clear explanation, I have followed this Doc to successfully deploy nextjs App to Azure using Dev-Ops.

Before deploying I added below line to the package.json file.

 "start": "node_modules/next/dist/bin/next start"

This will resolve the issue; there's no need of startup command.

azure-pipelines.yml:

trigger:
  branches:
    include:
      - main
variables:
  azureSubscription:<Azure Subscription ID>
  webAppName: '$(appServiceName)'
  environmentName: '$(appServiceName)'
  vmImageName: 'ubuntu-latest'
stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '18.x'
      displayName: 'Install Node.js'
    - script: |
        yarn install
        yarn build 
      displayName: 'yarn install and build'
    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true
    - publish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop
- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            inputs:
              azureSubscription: <Connection Name>
              appType: 'webAppLinux'
              appName: '$(appServiceName)'
              package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              runtimeStack: 'NODE|18-lts'

I successfully deployed the app to Azure.

Azure Output: