Azure nodejs web app missing npm package in deployment - node.js

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?

Related

The app build failed to produce artifact folder Angular Azure Static Web App Deployment Issue

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

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

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

Deploy create-react-app with azure pipelines

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

How to link build result of "plain React"/node app with release pipeline

To try to make it short, I have a React application that's build on Azure DevOps Build Pipeline like so
trigger:
- Release
queue:
name: Hosted
demands: npm
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm ci
npm run build
displayName: 'Do npm ci and build'
This does what the build would do locally too. Locally the results of build go to build directory (unzipped).
Now when I try to create release pipeline there isn't an artifact to be found using Azure Deploy Web Service task.
If I try to add PublishPipelineArtifact#0 to the build pipeline to create a publication, the YAML editor just tells string does not match pattern... and doesn't let save the definition.
I suppose I should zip the contents of the generated build directory, but what would be the right way? Also, Is using the Azure App Service Deploy task the right way to deploy Azure WebApp? It works for ASP.NET Core apps so it finds the code drop artefact (zipped) and deploys it.
<edit: Adding
- task: PublishPipelineArtifact#0
inputs:
artifactName: 'drop'
targetPath: '$(Build.ArtifactStagingDirectory)/build'
Can actually be saved and the build run. Though it errors with
2019-01-25T22:42:27.6896518Z ##[section]Starting:
PublishPipelineArtifact 2019-01-25T22:42:27.6898909Z
============================================================================== 2019-01-25T22:42:27.6898962Z Task : Publish Pipeline Artifact
2019-01-25T22:42:27.6899006Z Description : Publish Pipeline Artifact
2019-01-25T22:42:27.6899034Z Version : 0.139.0
2019-01-25T22:42:27.6899062Z Author : Microsoft Corporation
2019-01-25T22:42:27.6899090Z Help : Publish a local directory
or file as a named artifact for the current pipeline.
2019-01-25T22:42:27.6899137Z
============================================================================== 2019-01-25T22:42:28.0499917Z ##[error]Path not exist: D:\a\1\a\build
2019-01-25T22:42:28.0708878Z ##[section]Finishing:
PublishPipelineArtifact
< edit 2: It appears removing the /build does the trick. Feels a tad odd since this is what's produced locally. It doesn't produce a zip file which is expected by the release job, namely Azure App Service Deploy.
Have to examine this problem later today (two o'clock at night here).
There was another problem: The script ran only npm ci and didn't run the building part. Separating it to two different steps made the difference. It appears PublishPipelineArtifact#0 in this case isn't an ideal option if I'd like to have the results as zipped to the staging area.
A currently working solution seem to be
resources:
- repo: self
trigger:
- Release
queue:
name: Hosted
demands: npm
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm ci
displayName: 'npm ci'
- script: |
npm run build
displayName: 'npm run build'
- task: ArchiveFiles#2
displayName: 'Archive files'
inputs:
rootFolderOrFile: '$(System.DefaultWorkingDirectory)/build'
includeRootFolder: false
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/artifact.zip'
replaceExistingArchive: true
- task: PublishBuildArtifacts#1
displayName: 'Publish Artifact'
inputs:
PathtoPublish: '$(build.artifactstagingdirectory)'
Maybe this can be simplified, but works for now and is flexible, it feels.

Resources