I am trying to deploy my vue app which is on an azure repository to an azure app service. I am using the pipeline provided by azure. All stages complete without any issues including deployment without any errros. But when I head over my azure app service URL I get an Application Error and the deployed Vue app does not show up. Here is my pipeline.yaml file being used for building and deployment. What am I doing wrong ?
https://imgur.com/a/fj4FwUL
# Node.js Express Web App to Linux on Azure
# Build a Node.js Express app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
variables:
# Azure Resource Manager connection created during pipeline creation
azureSubscription: 'a0dc973b-4faf-4d69-813f-17cc79ffb965'
# Web app name
webAppName: 'roiweurwoeur84934'
# Environment name
environmentName: 'roiweurwoeur84934'
# Agent VM image name
vmImageName: 'ubuntu-latest'
stages:
- stage: Build
displayName: Build stage
jobs:
- job: Build
displayName: Build
pool:
vmImage: $(vmImageName)
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.10'
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: roiweurwoeur84934'
inputs:
azureSubscription: $(azureSubscription)
appType: webAppLinux
appName: $(webAppName)
runtimeStack: 'NODE|10.10'
package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
startUpCommand: 'npm run serve'
Here is the error log
Container roiweurwoeur84934_0_46d79e91 couldn't be started: Logs = 2020-10-08T15:53:08.292628680Z _____
2020-10-08T15:53:08.292671580Z / _ \ __________ _________ ____
2020-10-08T15:53:08.292677981Z / /_\ \___ / | \_ __ \_/ __ \
2020-10-08T15:53:08.292680981Z / | \/ /| | /| | \/\ ___/
2020-10-08T15:53:08.292683881Z \____|__ /_____ \____/ |__| \___ >
2020-10-08T15:53:08.292686981Z \/ \/ \/
2020-10-08T15:53:08.292689581Z A P P S E R V I C E O N L I N U X
2020-10-08T15:53:08.292692181Z
2020-10-08T15:53:08.292694681Z Documentation: http://aka.ms/webapp-linux
2020-10-08T15:53:08.292697081Z NodeJS quickstart: https://aka.ms/node-qs
2020-10-08T15:53:08.292699581Z NodeJS Version : v10.10.0
2020-10-08T15:53:08.292702081Z Note: Any data outside '/home' is not persisted
2020-10-08T15:53:08.292704681Z
2020-10-08T15:53:08.333571514Z Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
2020-10-08T15:53:08.333677214Z Could not find operation ID in manifest. Generating an operation id...
2020-10-08T15:53:08.333828816Z Build Operation ID: 1e288eed-e9a6-4378-a8fb-52b980ca87d1
2020-10-08T15:53:08.947709015Z Writing output script to '/opt/startup/startup.sh'
2020-10-08T15:53:09.335664575Z Running #!/bin/sh
2020-10-08T15:53:09.335837476Z
2020-10-08T15:53:09.335891277Z # Enter the source directory to make sure the script runs where the user expects
2020-10-08T15:53:09.335970777Z cd "/home/site/wwwroot"
2020-10-08T15:53:09.336114879Z
2020-10-08T15:53:09.336186379Z export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
2020-10-08T15:53:09.336240480Z if [ -z "$PORT" ]; then
2020-10-08T15:53:09.336313280Z export PORT=8080
2020-10-08T15:53:09.336384281Z fi
2020-10-08T15:53:09.336563182Z
2020-10-08T15:53:09.336618983Z PATH="$PATH:/home/site/wwwroot" npm run serve
2020-10-08T15:53:09.592860470Z npm info it worked if it ends with ok
2020-10-08T15:53:09.593484175Z npm info using npm#6.9.0
2020-10-08T15:53:09.593975979Z npm info using node#v10.10.0
2020-10-08T15:53:09.700042643Z npm info lifecycle vuetify-dashboard#0.1.0~preserve: vuetify-dashboard#0.1.0
2020-10-08T15:53:09.703408170Z npm info lifecycle vuetify-dashboard#0.1.0~serve: vuetify-dashboard#0.1.0
2020-10-08T15:53:09.708303910Z
2020-10-08T15:53:09.708316710Z > vuetify-dashboard#0.1.0 serve /home/site/wwwroot
2020-10-08T15:53:09.708321010Z > vue-cli-service serve
2020-10-08T15:53:09.708324310Z
2020-10-08T15:53:11.013684241Z internal/modules/cjs/loader.js:583
2020-10-08T15:53:11.013737842Z throw err;
2020-10-08T15:53:11.013754342Z ^
2020-10-08T15:53:11.013757742Z
2020-10-08T15:53:11.013760642Z Error: Cannot find module '../package.json'
2020-10-08T15:53:11.013763542Z at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
2020-10-08T15:53:11.013766342Z at Function.Module._load (internal/modules/cjs/loader.js:507:25)
2020-10-08T15:53:11.013769142Z at Module.require (internal/modules/cjs/loader.js:637:17)
2020-10-08T15:53:11.013771942Z at require (internal/modules/cjs/helpers.js:20:18)
2020-10-08T15:53:11.013774642Z at Object. (/home/site/wwwroot/node_modules/.bin/vue-cli-service:4:25)
2020-10-08T15:53:11.013784742Z at Module._compile (internal/modules/cjs/loader.js:689:30)
2020-10-08T15:53:11.013788642Z at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
2020-10-08T15:53:11.013791442Z at Module.load (internal/modules/cjs/loader.js:599:32)
2020-10-08T15:53:11.013794142Z at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
2020-10-08T15:53:11.013796942Z at Function.Module._load (internal/modules/cjs/loader.js:530:3)
2020-10-08T15:53:11.021617006Z npm info lifecycle vuetify-dashboard#0.1.0~serve: Failed to exec serve script
2020-10-08T15:53:11.023369320Z npm ERR! code ELIFECYCLE
2020-10-08T15:53:11.024735531Z npm ERR! errno 1
2020-10-08T15:53:11.026685147Z npm ERR! vuetify-dashboard#0.1.0 serve: `vue-cli-service serve`
2020-10-08T15:53:11.027571354Z npm ERR! Exit status 1
2020-10-08T15:53:11.028555662Z npm ERR!
2020-10-08T15:53:11.029287868Z npm ERR! Failed at the vuetify-dashboard#0.1.0 serve script.
2020-10-08T15:53:11.030028274Z npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-10-08T15:53:11.034935414Z npm timing npm Completed in 1479ms
2020-10-08T15:53:11.035673120Z
2020-10-08T15:53:11.036461427Z npm ERR! A complete log of this run can be found in:
2020-10-08T15:53:11.037147032Z npm ERR! /root/.npm/_logs/2020-10-08T15_53_11_031Z-debug.log
You can check below solution to deploy your vue app to azure web app.
When you run npm run build --if-present in your pipeline. The build files will be output to folder dist. You can directly package this dist folder in ArchiveFiles task and deploy to azure web app service.
Then you need to change the start up command to npx serve -s in AzureWebApp task. I updated your yaml pipeline as below:
- task: ArchiveFiles#2
displayName: 'Archive files'
inputs:
rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist' #package the dist folder
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: roiweurwoeur84934'
inputs:
azureSubscription: $(azureSubscription)
appType: webAppLinux
appName: $(webAppName)
runtimeStack: 'NODE|10.10'
package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
startUpCommand: 'npx serve -s'
Related
When i try to build angular app using azure devops and deploy to azure static web app i'm receiving below error
The app build failed to produce artifact folder: 'dist/harmony-front'. Please
ensure this property is configured correctly in your deployment
configuration file.
I tried by changing output_location to / , dist, /dist , dist/harmony-front,
nothing seems to work
here's the yaml code for the deployment section
- task: AzureStaticWebApp#0
inputs:
app_location: "/"
api_location: "api"
output_location: "./dist/harmony-front"
app_build_command: 'npm run build:prod'
skip_api_build: true
verbose: true
env:
continueOnError: true
CUSTOM_BUILD_COMMAND: "npm install --force"
azure_static_web_apps_api_token: $(deployment_token)
What was the mistake i made
Thanks
I have tried to repro the same and got positive results after following the below steps.
Step 1: Create a simple angular project and build the project on a local machine and inspect the dist folder.
Step 2: Push the code to Azure Repos.
Step 3: Create azure pipeline as shown below.
trigger: none
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool#0
inputs:
versionSpec: '18.x'
displayName: 'Install Node.js'
- script: |
npm install -g #angular/cli
displayName: 'install angular cli'
- task: Npm#1
inputs:
command: 'install'
displayName: 'npm install'
- task: Npm#1
inputs:
command: 'custom'
customCommand: 'run build'
displayName: 'npm build'
- task: Bash#3
inputs:
targetType: 'inline'
script: |
pwd
ls -l
ls -l dist/
- task: AzureStaticWebApp#0
displayName: 'Deploy Azure static webapp'
inputs:
app_location: '/'
output_location: 'dist/my-app'
env:
azure_static_web_apps_api_token: $(static-webapp-token)
Step 4: Verify the result.
If you are still facing that issue, verify the AzureStaticWebApp#0
output location path in angular.json file as below. Both paths must be exact.
Actually I found the issue and will post for future reference. if someone had the same issue.
issue start when you override build command using CUSTOM_BUILD_COMMAND will overwrite the RUN_BUILD_COMMAND so based on the comment of the issue posted on Github instead of npm install --force command combined with build like npm install --force && npm run build works like charm
I am struggling to have the deployment of an Express app succeed.
I have an Nx Monorepo set up with Azure Repos. In this monorepo, I have 4 projects and I am trying to deploy one that uses Express. I can't seem to find anywhere how to do this and since this is my first deployment from a monorepo, I'm not sure how all the documentation from various sources fits together.
I have included my YAML file below. It succeeds in the Build Stage, but fails during Deploy.
Whenever I run the nx build command, it puts the output into the /dist/apps folder in the root directory.
Some of the kudu logs show a 409 conflict error but I'm not sure what could be causing this.
# Node.js Express Web App to Linux on Azure
# Build a Node.js Express app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- main
variables:
# Azure Resource Manager connection created during pipeline creation
azureSubscription: <hidden>
# Web app name
webAppName: 'mean-api'
# Environment name
environmentName: 'mean-api'
# Agent VM image name
vmImageName: 'ubuntu-latest'
stages:
- stage: Build
displayName: Build stage
jobs:
- job: Build
displayName: Build
pool:
vmImage: $(vmImageName)
steps:
- task: NodeTool#0
inputs:
versionSpec: '16.x'
displayName: 'Install Node.js'
- script:
npm install --force
displayName: 'npm install'
- script:
npx nx build mean-api --if-present
displayName: 'npm build'
- script:
npx nx test mean-api --if-present
displayName: 'npm 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: mean-api'
inputs:
azureSubscription: $(azureSubscription)
appType: webAppLinux
appName: $(webAppName)
runtimeStack: 'NODE|16-lts'
package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
I currently have a pipeline in Azure Dev Ops configured to build, copy, archive, and then deploy a Vue.js app to an Azure App Service running on Linux. When I SSH into the server I do see the outputs of the build appearing successfully in the wwwroot folder but when I pull up the URL of the App Service I'm just shown the default landing page. Below are screenshots of my wwwroot folder, the page I'm seeing when I pull up the URL and a copy of the yml file for the pipeline. Is there something else missing from the yml file that I need to add to tell the app service to start the vue.js app by chance, I'm fairly new to this stuff.
# Build a Node.js project that uses Vue.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install and build'
workingDirectory: $(Build.SourcesDirectory)/client-app
- task: CopyFiles#2
inputs:
Contents: '$(Build.SourcesDirectory)/client-app/dist/**'
TargetFolder: '$(Build.ArtifactStagingDirectory)'
flattenFolders: true
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
includeRootFolder: false
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
replaceExistingArchive: true
verbose: true
- task: AzureRmWebAppDeployment#4
inputs:
ConnectionType: 'AzureRM'
azureSubscription: 'Azure subscription 1 (f719f76c-c23e-4160-aa93-914eb7851fdb)'
appType: 'webAppLinux'
WebAppName: 'trashbot'
packageForLinux: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
You need to add startup command on portal.
pm2 serve /home/site/wwwroot --no-daemon --spa
Related Posts:
1. Application is not loading when deployed via azure app service
2. Default Documents (custom 404) on Azure AppService Linux website
So, I am trying to deploy an Azure web app using Azure Pipelines from a git repo. The project is working fine locally, but when uploaded it says a package is-docker is missing (actually I get an ENOENT file or dir not found error). I am not using docker, and I guess Azure is trying to just check if I am, although I have not installed this package.
I am using node 10.x and npm 6.14 both locally and on azure. I am deploying an azure web app on Linux (ubuntu 20).
I would really appreciate some help.
edit
I added package is-docker to package.json but the problem still exists.
edit 2
Azure pipelines yml file.
# Node.js Express Web App to Linux on Azure
# Build a Node.js Express app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
branches:
- dev
- master
variables:
# Azure Resource Manager connection created during pipeline creation
azureSubscription: 'XXXX'
# Web app name
webAppName: 'XXXX'
# Environment name
environmentName: 'XXXX'
# Agent VM image name
vmImageName: 'ubuntu-latest'
stages:
- stage: Build
displayName: Build stage
jobs:
- job: Build
displayName: Build
pool:
vmImage: $(vmImageName)
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.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: 'XXXXXX'
inputs:
azureSubscription: $(azureSubscription)
appType: webAppLinux
appName: $(webAppName)
runtimeStack: 'NODE|10.10'
package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
startUpCommand: 'npm run deploy'
The scripts in package json.
"scripts": {
"test": "echo \"Error: no test specified\"",
"start": "cross-env NODE_ENV=production node -r dotenv/config .",
"dev": "ts-node-dev -r dotenv/config ./src/app.ts",
"build": "tsc",
"deploy": "tsc && cross-env NODE_ENV=production node -r dotenv/config ."
},
Error Error: ENOENT: no such file or directory, stat '/home/site/wwwroot/node_modules/.bin/is-docker'
Thanks for all the help people. I just moved to Azure for Containers. I think I found the problem and had to do with the fact that I used many packages which had to do with complex libraries relevant to the host os (i am using windows and the other 3 members of my team are using Mac, and 2 different flavours of Linux) and the fact that Azure is not using the same image type everytime.
Anyways, the azure web app for containers seems a lot more stable and dockerhub is really easy and nice to have, so I do not have any problem for the time being. I was moving to containers anyways, so... how about you?
I am trying to deploy a react app I created with create-react-app locally to azure. I am trying to do this with azure pipelines.
The code I have so far:
# Node.js React Web App to Linux on Azure
# Build a Node.js React app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
- azure-pipelines
variables:
# Azure Resource Manager connection created during pipeline creation
azureSubscription: ###
# Web app name
webAppName: 'rafe-react'
# Environment name
environmentName: 'rafe-react'
# Agent VM image name
vmImageName: 'ubuntu-latest'
System.debug: true
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.1'
- task: Npm#1
inputs:
command: 'install'
- script: |
npm install
npm run build
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.BinariesDirectory)'
includeRootFolder: true
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
replaceExistingArchive: true
- task: AzureRmWebAppDeployment#4
inputs:
ConnectionType: 'AzureRM'
azureSubscription: $(azureSubscription)
appType: 'webAppLinux'
WebAppName: 'rafe-react'
packageForLinux: '$(Build.ArtifactStagingDirectory)/**/*.zip'
RuntimeStack: 'NODE|10.1'
StartupCommand: 'serve -s build'
enableCustomDeployment: true
Now when I run this, it deploys successfully. However, when I go to my app in azure and look at the log it gives me this error:
/opt/startup/startup.sh: 11: /opt/startup/startup.sh: serve: not found.
full error log:
2019-12-05T11:48:46.270966320Z _____
2019-12-05T11:48:46.271002720Z / _ \ __________ _________ ____
2019-12-05T11:48:46.271008020Z / /_\ \___ / | \_ __ \_/ __ \
2019-12-05T11:48:46.271012420Z / | \/ /| | /| | \/\ ___/
2019-12-05T11:48:46.271016320Z \____|__ /_____ \____/ |__| \___ >
2019-12-05T11:48:46.271020420Z \/ \/ \/
2019-12-05T11:48:46.271024320Z A P P S E R V I C E O N L I N U X
2019-12-05T11:48:46.271028420Z
2019-12-05T11:48:46.271032020Z Documentation: http://aka.ms/webapp-linux
2019-12-05T11:48:46.271035820Z NodeJS quickstart: https://aka.ms/node-qs
2019-12-05T11:48:46.271039720Z NodeJS Version : v10.1.0
2019-12-05T11:48:46.271043320Z Note: Any data outside '/home' is not persisted
2019-12-05T11:48:46.271047320Z
2019-12-05T11:48:46.387569226Z Oryx Version: 0.2.20191105.2, Commit: 67e159d71419415435cb5d10c05a0f0758ee8809, ReleaseTagName: 20191105.2
2019-12-05T11:48:46.387911428Z Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
2019-12-05T11:48:46.388236829Z Could not find operation ID in manifest. Generating an operation id...
2019-12-05T11:48:46.388474931Z Build Operation ID: 3c2e1218-c95a-418e-94c1-ce778f1b0604
2019-12-05T11:48:47.903969109Z Writing output script to '/opt/startup/startup.sh'
2019-12-05T11:48:48.190534098Z Running #!/bin/sh
2019-12-05T11:48:48.284305986Z
2019-12-05T11:48:48.284659388Z # Enter the source directory to make sure the script runs where the user expects
2019-12-05T11:48:48.284671288Z cd "/home/site/wwwroot"
2019-12-05T11:48:48.284675988Z
2019-12-05T11:48:48.284680088Z export NODE_PATH=$(npm root --quiet -g):$NODE_PATH
2019-12-05T11:48:48.284935189Z if [ -z "$PORT" ]; then
2019-12-05T11:48:48.284944789Z export PORT=8080
2019-12-05T11:48:48.284949089Z fi
2019-12-05T11:48:48.285155290Z
2019-12-05T11:48:48.285164490Z PATH="$PATH:/home/site/wwwroot" serve -s build
2019-12-05T11:48:50.410579239Z /opt/startup/startup.sh: 11: /opt/startup/startup.sh: serve: not found
I have tried to replace the startupCommand with npm run build and use the InlineScript parameter (see the Azure documentation and also this site) for serve -s build, but got a permission denied error.
Does anyone know how to successfully deploy a react app to azure with azure pipelines?
As an alternative you can use the following command directly in the main yml file.
StartupCommand: 'pm2 serve /home/site/wwwroot --no-daemon --spa'
I had the same problem. My Azure Pipeline was fine and the build and deploy worked fine and published the build folder to the /home/site/wwwroot folder.
When you create your App Service just install the PHP stack and you don't have to worry about serving anything because index.html is picked up by which ever webserver is running on there already for the PHP stack.
Slightly hacky but it works
I got it working. So what I had to do was serving the static files from the build folder. To let the react-router work on azure you have to create a file called ecosystem.config.js. At this file to your public folder. If pm2 environment detects this file it executes it. See here for reference.
This file executes the serve command. It looks as follows:
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
The azure-pipelines.yml looks as follows
trigger:
- none
variables:
# Azure Resource Manager connection created during pipeline creation
azureSubscription: ###
# Web app name
webAppNameStaging: 'rafeFrontendWebApp-staging'
webAppNameProduction: 'rafeFrontendWebApp-production'
# Environment name
environmentNameStaging: 'staging'
environmentNameProduction: 'production'
# Agent VM image name
vmImageName: 'ubuntu-latest'
System.Debug: true
stages:
- stage: Build
displayName: Build stage
pool:
vmImage: $(vmImageName)
jobs:
- job: Build_Staging
displayName: Build Staging
steps:
- script: |
npm install react-scripts
npm run build
- task: CopyFiles#2
displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
inputs:
SourceFolder: '$(System.DefaultWorkingDirectory)/build'
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishPipelineArtifact#1
inputs:
targetPath: $(System.DefaultWorkingDirectory)/build
artifact: 'drop'
publishLocation: 'pipeline'
- stage: Deploy_Staging
displayName: Deploy staging
dependsOn: Build
condition: succeeded()
jobs:
- deployment: Deploy
displayName: Deploy staging
environment: $(environmentNameStaging)
strategy:
runOnce:
deploy:
steps:
- task: AzureRmWebAppDeployment#4
inputs:
ConnectionType: 'AzureRM'
azureSubscription: $(azureSubscription)
appType: 'webAppLinux'
WebAppName: $(webAppNameStaging)
packageForLinux: $(Pipeline.Workspace)/drop
RuntimeStack: 'NODE|lts'
Since the Build.ArtifactStagingDirectory is cleared on a deploy you have to use the PublishPipelineArtifact task to still be able to access the files in a deployment