Facing issue of build taking longer time while copying and publishing npm and node.js in Azure Devops Pipeline

Question

I'm new to next.js build pipeline setup. Able to publish the artifacts but copying files and publishing the artifacts is taking loner time i.e., 30+ minutes. How can I reduce the build time. Included cache in the build but it did not work

Tried adding cache task

Answer 1

Try using the below yaml pipeline to build and publish your NextJs node app artifact and deploy it in Azure Web app:-

My yaml code:-

trigger:
- main

variables:

  
  azureSubscription: 'xxxxxxe94d93'

  
  webAppName: 'valleynextjsapp'

  
  environmentName: 'valleynextjsapp'

  
  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: |
        npm install
        npm run build --if-present
        npm run test --if-present
      displayName: 'npm install, build and test'

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

    - upload: $(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
            displayName: 'Azure Web App Deploy: siliconwebapp655'
            inputs:
              azureSubscription: 'xxxx subscription (0151xxxxx)'
              appType: 'webAppLinux'
              appName: 'siliconwebapp89'
              package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              runtimeStack: 'NODE|18-lts'
              startUpCommand: 'next start'

Output:-

You can also try below yaml code to caching your npm build :-

trigger:
- main

variables:
  azureSubscription: '5b7exxxxxe94d93'
  webAppName: 'valleynextjsapp'
  environmentName: 'valleynextjsapp'
  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'

    - task: Cache@2
      inputs:
        key: 'npm | "$(Agent.OS)" | package-lock.json'
        restoreKeys: |
           npm | "$(Agent.OS)"
        path: $(npm_config_cache)
      displayName: 'Cache npm'

    - script: |
        npm ci
        npm run build --if-present
        npm run test --if-present
      displayName: 'npm install, build and test'

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

    - upload: $(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
            displayName: 'Azure Web App Deploy: $(webAppName)'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|18.10'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'next start'

$(npm_config_cache) is the location of your npm cache:-

variables:  npm_config_cache:  $(Pipeline.Workspace)/.npm_cache

Output:-