#How to set up a simple Next.js with CI/CD?

1 messages · Page 1 of 1 (latest)

upbeat granite
#

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'

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

image.png image.png image.png
agile shore
#

It looks like you are just publishing the build artifact to your pipeline. You actually need a deployment step to move the published artifact into your app service.

  - task: AzureWebApp@1
    displayName: 'Deploy to App Service'
    inputs:
      azureSubscription: 'Azure Service Connection'
      appType: 'webApp'
      appName: 'appService'
      package: $(Pipeline.Workspace)/$(Build.BuildId).zip
      runtimeStack: 'NODE|$(nodeVersion)'

replace azureSubscription with your service connection name and the appService with your azure web app name

If you need to deploy to a slot, use deployToSlotOrASE: true and slotName: 'staging' to deploy to the staging slot (staging can be any name)