How to set up build and release pipeline for NestJS application to Azure using YAML

Question

I am having trouble understanding and getting the build/release pipelines setup for deploying a NestJS application to Azure DevOps (ADO).

I am deploying to a Linux Web App hosted in Azure.

As far as I understand, if I run the app locally using something like npm run start, it creates a dist folder under my root project directory.

So, when writing the YAML for the build and deployment. My thought process is to:

Run an NPM update.
Run npm run build to build the application and generate the dist folder.
Copy the contents of the application (or just the dist folder?) into the target folder (/home/site/wwwroot)
Run npm run start:prod to start the server.

Here is my YAML so far:

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:

- task: UseNode@1
  inputs:
    version: '14.x'
    checkLatest: true

- task: Npm@0
  displayName: Run NPM Update for NestJS
  inputs:
    cwd: '$(Build.SourcesDirectory)/ProjectName'
    command: update

- task: Npm@0
  displayName: Build NestJS
  inputs:
    cwd: '$(Build.SourcesDirectory)/ProjectName'
    command: run
    arguments: "build"

- task: CopyFiles@2
  inputs:
    Contents: 'dist/**'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

The issue is after the build process completes, I do not see a dist folder in /home/site/wwwroot/ProjectName. Can someone help me out with what I am missing?

Also, a side noob-y question about Azure DevOps, what does $(Build.SourcesDirectory) and $(Build.ArtifactStagingDirectory) refer to and how and where are those environment variables set?

user_11882186 · Answer

To deploy your app to the hosted in Azure. You need to use Azure App Service Deploy task or Azure Web App task.

Azure devops is the tool to build and deploy your app to your server(eg. the Linux Web App on Azure), it is not for hosting your app.

$(Build.ArtifactStagingDirectory) refer to the folder of the agent machine which runs your pipeline. (When your run your pipeline, it pick up a agent defined in pool to run your pipeline tasks)

The mapping to the folders in the agent machine is showing as below screenshot. Check the predefined variables for more information.

$(Agent.BuildDirectory) is mapped to c:\agent_work\1

$(Build.ArtifactStagingDirectory) is mapped to c:\agent_work\1\a

$(Build.BinariesDirectory) is mapped to c:\agent_work\1\b

$(Build.SourcesDirectory) is mapped to c:\agent_work\1\s

So back to the question how to deploying a NestJS application to Azure?

First you need to create a service connection in Azure devops to connect to your azure subscription. Check here for detailed steps.

Then add Azure App Service Deploy task/Azure Web App task to the end of your pipeline. See below example:

- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'SubscriptionServiceConnectionName'
    appType: 'webAppLinux'
    WebAppName: 'MyWebAppName'
    Package: '$(Build.ArtifactStagingDirectory)/dist/'
    StartupCommand: 'npm run start:prod'

You can check here for more information.

How to set up build and release pipeline for NestJS application to Azure using YAML

1 Answers