Search code examples
azurenext.jsazure-devopsazure-pipelinescloud

How to set up a simple Next.js web app with CI/CD on Azure?


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 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


Solution

  • 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.

    enter image description here

    Azure Output:

    enter image description here