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
Related
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 am facing this odd situation. I have the following setup.
React JS app created using create-react-app
Code on GitHub
Azure Web App - Create from the Azure Portal.
Azure DevOps + Pipelines + YAML
I have been doing a bunch of deployments this week and I noticed this situation. Every 1st deployment, always ends up with the following situation inside the wwwroot folder.
But, every subsequent deployment, works just fine.
To reproduce
Create a new app with create-react-app
Put it on GitHub
Link GitHub repository with Azure DevOps Pipelines
Target the Pipeline to deploy to a Azure Web App, which has been created brand new.
The initial deployment, will always fail, with the above image. And, please, remember, Subsequent deployments dont fail.
So, the question is, is there something I can do to prevent this?
I am planning to automate resource creation on Azure, along with automating deployment.
Update 1
as per the comment, including my YAML here. I use this in all of my react JS deployments, which show the same issue as above.
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install and build'
- task: CopyFiles#2
inputs:
Contents: 'build/**' # Pull the build directory (React)
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishBuildArtifacts#1
inputs:
pathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
ArtifactName: 'www' # output artifact named www
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/build/'
includeRootFolder: false
- task: AzureWebApp#1
inputs:
azureSubscription: 'ReactJSRecipeAppConnection'
appName: 'ReactJSRecipeAppSep232020'
package: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
FAILED TO INITIALIZE RUN FROM PACKAGE usually means the zip file is corrupted or not deflateable. Please check whether the WEBSITE_RUN_FROM_PACKAGE flag under App Service -> Application settings was set.
In addition, try to use task Azure App Service deploy v4, instead of task Azure Web App v1.
Taking off from the discussion about with #Cece Dong, here is what eventually worked for me.
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'
- task: CopyFiles#2
inputs:
Contents: 'build/**' # Pull the build directory (React)
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishBuildArtifacts#1
inputs:
pathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
ArtifactName: 'www' # output artifact named www
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/build/'
includeRootFolder: false
- task: AzureRMWebAppDeployment#4
inputs:
appType: webApp
azureSubscription: 'RandomStuffReactJSConnection'
WebAppName: 'randomstuffreactjsappsept24'
package: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
The above, I can confirm, no longer requires a second trigger for a proper deployment.
specifically, the usage of 'AzureRMWebAppDeployment#4' is what solved the original issue.
We have an Azure DevOps Pipeline that runs our application as ZIP package https://learn.microsoft.com/en-us/azure/app-service/deploy-run-package
as opposed to ZIP Deploy. So we are not able to SFTP into our Web App and change something. Why does the Pipeline runs our application as ZIP package and how can we change this?
This is the Pipeline:
trigger: none
pool:
vmImage: 'windows-latest'
steps:
- task: NuGetToolInstaller#1
- task: NuGetCommand#2
inputs:
restoreSolution: 'Solution1.sln'
- task: VSBuild#1
inputs:
solution: '$(agent.builddirectory)\s\Folder\Project.csproj'
msbuildArgs: '/p:OutputPath="$(build.binariesDirectory)\Folder\bin" /p:DeployOnBuild=true /p:DeployDefaultTarget=WebPublish /p:WebPublishMethod=FileSystem /p:SkipInvalidConfigurations=true /p:publishUrl="$(build.artifactStagingDirectory)\ProjectTempFolder"'
platform: '$(buildPlatform)'
configuration: '$(buildConfiguration)'
- task: CopyFiles#2
inputs:
SourceFolder: '$(build.artifactStagingDirectory)\ProjectTempFolder'
Contents: |
**
TargetFolder: '$(build.ArtifactStagingDirectory)\ProjectArtifacts'
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(build.ArtifactStagingDirectory)\ProjectArtifacts'
includeRootFolder: false
archiveType: 'zip'
archiveFile: '$(build.ArtifactStagingDirectory)\Project.zip'
replaceExistingArchive: true
- task: PublishBuildArtifacts#1
inputs:
PathtoPublish: '$(build.ArtifactStagingDirectory)\Project.zip'
- task: AzureRmWebAppDeployment#4
inputs:
ConnectionType: 'AzureRM'
azureSubscription: 'Subscription1'
appType: 'webApp'
WebAppName: 'CoolWebApp777'
packageForLinux: '$(build.ArtifactStagingDirectory)\Project.zip'
Why does the Pipeline runs our application as ZIP package and how can we change this?
It seems you want to disable to run your Web App from a package, AFAIK, the default version in the release pipeline is now set to Version 4. This version has the "Select deployment method" checkbox disabled, which in turn, allows the "Run as Package" feature by default as well. To change this value, go into the "Deploy Azure App Service" task for each environment and expand Additional Deployment Options. You’ll probably want to change it most often to Web Deploy:
Besides, you can turn that off by deleting the WEBSITE_RUN_FROM_ZIP or WEBSITE_RUN_FROM_PACKAGE application setting in the portal.
Note this will clear your web app until the next time you publish.
Hope this helps.
I'm unable to deploy my app to azure app service. I've created a pipeline that fails at the azure app service deploy stage. I've been trying to get this working for a few days now. I've finally gotten it past the deploy app stage, but it just says Application Error when I click URL? and I configure it to point to the correct subscription. Web App for Linux, then chose the app-service call gc-dev, but I get errors still. I also get the same application error when trying to deploy app from vscode. It's possible both deployment types are dealing with exact same issue. IDK though.
I feel like it has something to do with the startup command since nothing is calling ng serve to launch angular code, but I'm not sure. Another thing that might be relevant to the issue is that all my angular services still have http://localhost:3000/api/ instead of some cloud url. Not sure if that's the issue with the inital page load though. I feel like it should still at least load the login screen. I appreciate any help!
Deploy Stage
The steps are as follows:
steps:
- task: Npm#1
displayName: 'install the #anguliar/cli'
inputs:
command: custom
workingDir: glass/
verbose: false
customCommand: 'install #angular/cli -g'
steps:
- task: Npm#1
displayName: 'install the project'
inputs:
workingDir: glass/
verbose: false
steps:
- task: Npm#1
displayName: 'build project'
inputs:
command: custom
workingDir: my-app/
verbose: false
customCommand: 'run build'
steps:
- task: Npm#1
displayName: 'npm install the dist/folder for express'
inputs:
workingDir: my-app/dist/
verbose: false
steps:
- task: Npm#1
displayName: 'Build the project'
inputs:
command: custom
workingDir: my-app
verbose: false
customCommand: 'run build'
steps:
- task: AzureRmWebAppDeployment#4
displayName: 'Azure App Service Deploy: my-app dev'
inputs:
azureSubscription: 'Azure subscription 1 (99c421dc-5cf5-444c-8df5-c71[![enter image description here][2]][2]02)'
appType: webAppLinux
WebAppName: 'gc-dev'
packageForLinux: my-app
WebConfigParameters: '-Handler iisnode -NodeStartFile index.js -appType node'
enableCustomDeployment: true
TakeAppOfflineFlag: false
Well, for one thing, this cannot be correct:
WebAppName: 'My-app - Dev'
You can't have spaces in App Service app names. It's part of the default URL.
When releasing an new update for my web app service with azure devops the code is not showing in the wwwroot directory but its placed in a subfolder /s/
Problem:
https://i.ibb.co/MVjXG73/pasted-Image.png
My settings:
https://i.ibb.co/YhQd7bG/devops.png
In application settings i added:
SCM_TARGET_PATH = D:\home\site\wwwroot
I created a yml file with the following build:
trigger:
- master
pool:
vmImage: "Ubuntu-16.04"
steps:
- task: NodeTool#0
inputs:
versionSpec: "8.x"
displayName: "Install Node.js"
- script: |
npm install
displayName: "npm install"
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: "$(System.DefaultWorkingDirectory)"
archiveType: "zip"
archiveFile: "$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip"
replaceExistingArchive: true
- task: PublishBuildArtifacts#1
inputs:
pathToPublish: "$(Build.ArtifactStagingDirectory)"
artifactName: "drop"
I need the code to end up in the wwwroot directory to be published live.
Thanks in advance!
Try adding below line to ArchiveFiles#2 task
includeRootFolder: false