How to deploy Next JS application to Azure App service via Azure Pipeline

Question

I am just starting out with Next.JS and am trying to understand how to deploy it to an Azure App Service via a pipeline in Azure. To start with I have literally created a basic create-next-app as my starting point. In my pipeline I am running next-build and am able to archive my .next folder. What I don't understand is what additional files I should include in the archive. The default next app includes 2 images in its Public Folder, so I assume I should also copy that. So my package currently looks like

• .next
• Public
• next.config.mjs
• package.json

I then execute npm run start as a Start up command. This isnt working though.

I have read elsewhere that I need to also deploy my node_moduiles folder, but cant understand why I would want / need to do this.

Can someone advise what I am missing and any additional steps to publish this most basic of applications? I have included my current XAML file

# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
 
trigger:
- master
 
pool:
  vmImage: 'windows-latest'
# Set variables
variables:
  directory: pipeline-test
  stage: development
  serviceConnection: xxxx
  appServiceName: pipeline-test
 
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'
 
- script: 
    npm install
  displayName: 'npm install'
  workingDirectory: $(directory)
 
- script: 
    npm run build
  displayName: 'npm build'
  workingDirectory: $(directory)

- task: CopyFiles@2
  displayName: 'Copy config files'
  inputs:
    sourceFolder: '$(directory)' 
    Contents: 
      next.config.mjs
      package.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
    cleanTargetFolder: true
 
- task: CopyFiles@2
  displayName: 'Copy .next directory'
  inputs:
    sourceFolder: '$(directory)/.next' 
    Contents: '**/*'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/_next'
    cleanTargetFolder: true

- task: CopyFiles@2
  displayName: 'Copy public files'
  inputs:
    sourceFolder: '$(directory)/public' 
    Contents: '**/*'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/public'
    cleanTargetFolder: true

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true
 
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: $(serviceConnection)
    appType: 'webApp'
    WebAppName: $(appServiceName)
    packageForLinux: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    StartupCommand: 'npm run start'

EDIT

Do in the end I achieved this using a Linux web app, but could not run next start command as it wasnt recognised and instead had to include the entire node_modules directory in the published package and then set start up command in the app service to 'npm run startAzure' which mapped to "./node_modules/next/dist/bin/next start" in config.json

It doesn't feel right that I should have to include node_modules in the package, but will take it as progress for now

Answer 1

From the YAML you shared, on the AzureRmWebAppDeployment@4 task, you set the appType (App Service type) as webApp (Web App on Windows).

The StartupCommand option is not available for Web App on Windows. The following are the available app types:

• webAppLinux (Web App on Linux)
• webAppContainer (Web App for Containers - Linux)
• functionAppContainer (Function App for Containers - Linux)
• functionAppLinux (Function App on Linux)
• webAppHyperVContainer (Web App for Containers (Windows))

For more details, see the documentation "AzureRmWebAppDeployment@4".

---

EDIT:

The limitation is from Azure App Services itself rather than the AzureRmWebAppDeployment@4 task.

The StartupCommand option on the AzureRmWebAppDeployment@4 task is just used to set an optional startup command for the support app types. It is not let the task directly run the command on Azure App Services to start the app. This option is equivalent to manually set the startup command for the Web App on the UI settings page of Azure Portal.

For the Web App on Windows, there is not such an option on the UI settings page.

In addition, the Npm@1 task is just used to run the npm commands on the agent machine, and it cannot run the commands on Azure App Services.

If you want to run some commands on Azure App Services after successfully deploying the web app, you can try the "Post Deployment Action" option on the AzureRmWebAppDeployment@4 task.

---