Can't deploy MEAN stack app to Azure App Service via pipeline - node.js

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.

Related

How to set up Azure deployment pipeline to App Service with Nx and Express

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

How to add tasks to azure dev ops starter?

I am new to azure dev ops and yml files. I recently created an Azure dev ops starter resource for a .NET Core site I built. I connected it to a github repo and pushed some files.
I am getting the error:
Build FAILED.
/home/runner/.dotnet/sdk/3.1.302/Microsoft.Common.CurrentVersion.targets(1177,5): error MSB3644: The reference assemblies for .NETFramework,Version=v5.0 were not found. To resolve this, install the Developer Pack (SDK/Targeting Pack) for this framework version or retarget your application
I researched the issue and came up with this solution https://stackoverflow.com/questions/65079876/error-msb3644-the-reference-assemblies-for-framework-netframework-version-v5#:~:text=assemblies%20for%20framework%20%22.-,NETFramework%2CVersion%3Dv5.,SDK%20or%20Targeting%20Pack%20installed.
However I have no idea how to actually implement this.
Do I create a separate yml file and it just fixes it when I push it to git?
I tried adding the following block to the devops-starter-workflow.yml file that was autogenerated by azure in the repo when it was auto created :
- task: UseDotNet#2
displayName: 'Use .NET Core sdk 5.0.100'
inputs:
packageType: 'sdk'
version: '5.0.100'
includePreviewVersions: true
- task: DotNetCoreCLI#2
displayName: 'dotnet restore'
inputs:
command: restore
projects: '**/*.csproj'
but I got the error "every step must define a uses or run key"
How do I actually add this to my build? I dont see a pipeline anywhere in my azure portal.
Are you specifying the MS Agent vs2017-win2016
Here is an example of one I have made should help you to figure it out your error looks to me like you are using the wrong agent as it cant find Visual Studio Code to be able to build the .Net App.
trigger:
branches:
include:
- master
pr: none
pool:
vmImage: vs2017-win2016
variables:
System.Debug: false
azureSubscription: 'AzureSub'
RG: 'myrg'
Location: UK South
appconnectionname: 'azuresub/serviceprinciplename'
jobs:
- job: job1
displayName: Create And Publish Artifact
steps:
- task: UseDotNet#2 ## Not Needed For MS Self Hosted Agent.
displayName: Use .Net Core 5.0.301 SDK
inputs:
packageType: 'sdk'
version: '5.0.301'
- task: DotNetCoreCLI#2
displayName: dotnet restore
inputs:
command: restore
projects: 'Website.csproj'
- task: DotNetCoreCLI#2
displayName: dotnet build
inputs:
projects: 'Website.csproj'
arguments: '--configuration Release'
- task: DotNetCoreCLI#2
displayName: dotnet restore unit tests
inputs:
command: restore
projects: 'UnitTests/UnitTests.csproj'
- task: DotNetCoreCLI#2
displayName: dotnet Test
inputs:
command: test
projects: 'UnitTests/UnitTests.csproj'
arguments: '--configuration Release'
- task: DotNetCoreCLI#2
displayName: dotnet publish
inputs:
command: publish
projects: 'Website.csproj'
arguments: '--configuration Release --output $(Build.ArtifactStagingDirectory)'
zipAfterPublish: true
modifyOutputPath: false
- task: PublishPipelineArtifact#1
displayName: Publish Pipeline Artifact
inputs:
targetPath: '$(Build.ArtifactStagingDirectory)'
artifact: 'Website'
publishLocation: 'pipeline'
- job: job2
displayName: Create Web App
dependsOn: job1
steps:
# Download Artifact File
- download: none
- task: DownloadPipelineArtifact#2
displayName: 'Download Build Artifacts'
inputs:
patterns: '**/*.zip'
path: '$(Build.ArtifactStagingDirectory)'
# deploy to Azure Web App
- task: AzureWebApp#1
displayName: 'Azure Web App Deploy: nsclassroom'
inputs:
package: $(Build.ArtifactStagingDirectory)/**/*.zip
azureSubscription: $(azureSubscription)
ConnectedServiceName: $(appconnectionname)
appName: 'nsclassroom'
ResourceGroupName: $(RG)
Please put this in a YAML formatter in Azure DevOps to just check spaces or install YML Extension in VS Code.
In the portal I created a seperate Web App and set the service to .Net version 5 instead of Core v3 and was able to build it properly. A new yml file was created and I had to just update the build and publish processes to the path with my csproj.
I think all along I needed the webapp - not devops starter

Vue.js does not start in Azure App Service

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

Azure DevOps First Time Web App Deployment Always Gives Error

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.

How to deploy Strapi to Azure?

I installed Strapi with Mongodb locally.
I need to deploy it to Azure.
Strapi is commitet on Azure Git-repository.
I have created a App Service with Ubuntu on Azure.
How to deploy my Strapi to this?
Can I use pipeline?
I can't find any good documentaion/example how to do it. Help!
*************
UPDATE
*************
My results after trying the method described here:
https://github.com/youkou2/Strapi-On-Azure-WebApp
Build pipeline works without any error
Deploy pipeline works without any error
Deployed web site is empty.
I can describe what I have done, may be somebody can help me to find what I did wrong.
a) Build pipeline is
pool:
name: Azure Pipelines
steps:
- bash: |
yarn install
set NODE_ENV=PRODUCTION
yarn build
rm -rf .cache
rm -rf .git
displayName: Build
- task: ArchiveFiles#2
displayName: 'Archive ./'
inputs:
rootFolderOrFile: ./
includeRootFolder: false
- task: PublishBuildArtifacts#1
displayName: 'Publish Artifact: drop'
*** It works ok, no errors ***
b) Deploy pipeline
steps:
- task: AzureRmWebAppDeployment#4
displayName: 'Deploy Azure App Service'
inputs:
azureSubscription: '$(Parameters.ConnectedServiceName)'
appType: '$(Parameters.WebAppKind)'
WebAppName: '$(Parameters.WebAppName)'
*** It works ok, no errors ***
c) Project is deployed to https://oskogencms.azurewebsites.net/
*** It is empty, why? ***
enter code here
Here is additional info around the deployment:
You can try to use zip deploy, The steps is npm install, create zip package, publish zip package, release zip package. For more information please have a look of this the offcial doc:
https://learn.microsoft.com/en-us/azure/app-service/deploy-zip
By the way, it seems deploy strapi to azure web app is not the recommended method.
https://strapi.io/documentation/3.0.0-beta.x/deployment/azure.html#azure
This is an article on deploying strapi to azure web app, the introduction is more detailed, also using zip deployment:(The only different between you is it is deployed to windows os. If you can use ftp, ftp deploy is also a choice.)
https://github.com/youkou2/Strapi-On-Azure-WebApp
Please check #ZiedBeta's sample in the following link:
https://github.com/strapi/strapi/issues/3580
Build pipeline:
pool:
name: Azure Pipelines
steps:
- bash: |
yarn install
yarn build
rm -rf .cache
rm -rf .git
displayName: build
- task: ArchiveFiles#2
displayName: 'Archive Strapi'
inputs:
rootFolderOrFile: ./
includeRootFolder: false
- task: PublishBuildArtifacts#1
displayName: 'Publish Artifact: drop'
Development pipeline:
steps:
- task: AzureRmWebAppDeployment#4
displayName: 'Deploy Azure App Service'
inputs:
azureSubscription: '$(Parameters.ConnectedServiceName)'
appType: '$(Parameters.WebAppKind)'
WebAppName: '$(Parameters.WebAppName)'
enableCustomDeployment: true
DeploymentType: zipDeploy

Resources