Deploying a Vue app to Azure App Services with Azure Pipelines/releases - azure

I'm trying to set up CI/CD with Azure pipelines to automatically deploy a frontend vue application, but am having trouble with deploying my frontend application from it.
When deploying manually from the VS Code IDE it works fine, with the /home/site/wwwroot looking as expected in the kudu file explorer:
However when it's deploying from Azure Pipelines, it seems that the zip file remains zipped and is stored in another directory within /home/site/wwwroot/Package (e.g /home/site/wwwroot/Client/.zip), resulting in the application being unable to
This is what it looks like in the kudu powershell debugger:
My pipeline and release is pretty standard. The steps are:
Uses Node 16.x
Downloads a .env file
Copies the .env file to the directory (/client) the application is in.
runs npm install
runs npm run build
archives the dist directory that is generated from the run build command
Publishes the archived dist folder as an artifact
An Azure release is then created and deploys the artifact to the correct Azure App Service. Currently the deployment method is set to default, although I have tried each of the different deployment methods (Web deploy, Zip deploy, and Run from package) but none have worked so far.
I've downloaded the resulting zip file from the pipeline deployment, unzipped and manually deployed (using VS Code) the dist folder within which was successful, so I'm quite sure that the pipeline part of the process which installs, builds, and packages the application is working as expected, but something is going wrong during deployment.
If anyone has any ideas of what the error may be, or is able to offer any help/sugestions, it would be greatly appreciated.
Thank you.

Ensure that the archive job option for "prepend root folder name to archive paths" is disabled in the pipeline.
Also ensure the Package or folder route in the release's deploy job is correct. It should be something like:
$(System.DefaultWorkingDirectory)/______ClientPipeline/ArtifactName/*zip

Related

Azure run from package (.zip) with parameters

I've found a way to run a dotnet app from a zip file.
My .zip only contains the build output of a regular dotnet build (an .exe and several .dlls).
My task is to pass an argument to the .exe file. I don't see any options neither on Azure Portal, nor on Kudu. Is there a way to run an Azure Web App from package with parameters? Thanks.

How can I combining Webpack project output with Asp.Net project output in VSTS build?

My repository contains an Asp.Net app, and a React app in seperate folder. I need to do a deployment to an Azure App service from a VSTS release.
Repository Root
MyAspNetApp
MyReactApp
The Asp.Net application is an MVC application. If it detects you on mobile it servers up the react app.
The react app is built using WebPack. When you do a production build, it copies the output into a folder called 'app' in the MyAspNetApp project. The production build can be run via 'npm run build-prod'.
When I was doing git deployments (kudu), I just added a command to the deploy.cmd to call 'npm install' and 'npm run build-prod'. Then another command to copy those files to the root of the deployment directory ('wwwroot').
Now that I am using VSTS to build and deploy (separate steps), I can't figure out how to get that 'app folder into wwwroot. In a build step I tried taking the stuff from the 'app' folder and putting it in an artifact called 'mobile'. Then in a deployment step, using a 'Copy Files' step to copy the 'mobile' artifact to $(build.artifactstagingdirectory)/app, but they don't show up in wwwroot on azure.
What am I missing here?
edit: cross posted here in MS VS Community site in hopes of getting a response. I will update this post if I get an answer there.
With Azure App Service Deploy task, if you check Publish using Web Deploy option, you need to put all necessary files in a zip file and specify this file in Package or folder input box.
You also can uncheck Publish using Web Deploy option and specify the root folder path of app.
Refer to these steps to do it:
Publish MVC application with File System publish method through Visual Studio build task
Run NPM commands to build React app through NPM task
Copy react app’s built files to necessary folder of MVC app deployed folder
(optional) Zip folder through Archive Files if you want to publish using web deploy
Add Azure App Service Deploy task (can be in release) and specify package or folder.

GitHub project deployment failed on azure

I want to deploy my .Net project from GitHub repository to the azure server.
In Deployment options I am getting Building failed error.
Here are screen shots of my Deployment details and Logs
1- Deployment Details:
2- Activity Log:
According to your description and logs, I found you have error in MSbuild step.
The error shows some files not found in your project. I suggest you could exclude the related files in the csproj file or make sure the related files is in your project.
Besides, I suggest you could firstly clone the project to your local and test it , make sure the project could build well without any error then publish to the GitHub and deploy to the azure.
Update:
I also write a test demo on my computer and I reproduce your error.
Error image:
I think in your project you have inclued the bin and obj folder into your project and then you push the project to the github.
Like below:
After you push the project to the github, the csporj file will include all the bin and obj references.
Like below:
This is the reason about your MSBuild fail.
So I suggest you uninclude all the bin and obj folder in the local and push to the github again. Then it will work well.
Azure looks in your site/repository/packages folder for all the packages your app uses. By looking through it you will find that visual studio doesn't deploy all of the files from your local packages folder to the azure one. MSBuild needs these files when you push to git and trigger a build. Ftp into your azure site and look for the packages folder. Upload every missing file (dll) from your local folder to the azure one. This worked for me and now I can trigger a build and deployment from bitbucket to azure app service upon a push.
Additionally, if you have other projects in your VS solution and you are using VS to build those projects and then put the dll into your main projects bin folder, that will cause a missing file error also. I create a folder in my packages folder and link the dll to my main folder from there. That way when you perform the fix above, the file needed by your main project is in the packages folder also.
I hope this helps!

Deploy the Gulp Build Folder To Azure from Visual Studio Team Services

I just started using VSO for one of my project. I have created the built definition and the built was successful. When I tried to create the release definition for that built its failing by throwing the error
System.Management.Automation.RuntimeException: No files were found to deploy with search pattern C:\a\858bddd5b\**\*.zip
Its expecting .zip files. Since I need to deploy the distributed folder created by gulp build, I have given the Web Deploy Package path as
$(System.DefaultWorkingDirectory)/{built name}
Any help is really appreciated
You should add a build step to create an archive with .zip extension for the output folder of the gulp step. Your steps should look like
VSO/VSTS build has a task available with Archive files to achieve the same.
Alternatively, if the standard Archive files step doesn't work for you, you can use a powershell step. The powershell command will look like the following.
[io.compression.zipfile]::CreateFromDirectory($Source, $Destination)
Source should be all the files/folders from gulp output you wish to deploy
Destination here should correspond to input for the webdeploy/ WebApp deployment step.
You can also use this extension to create a ZIP file. I used it for a situation similar to yours:
https://marketplace.visualstudio.com/items?itemName=trackyon.trackyonadvantage
"Azure Web App Deployment" task requires a web deploy zip package. You can either add one more task to create a zip package for the build output as other two answers indicated or add some code in your "gulpfile.js" to generate a zip package during the gulp build and then publish the zip package to artifact.
If you don't want to create a zip package for the build output, then you can use FTP Uploader task to deploy the build to Azure Web App via FTP Deploy.
You can create a zip file with PowerShell, assuming you're running on a Windows agent.
Command Line task
Command: powershell
Arguments: -Command "&{Add-Type -assembly 'system.io.compression.filesystem'; [io.compression.zipfile]::CreateFromDirectory('$(Build.StagingDirectory)\Zip', '$(Build.StagingDirectory)\$(BuildConfiguration)Deploy.zip')}"
Obviously, replace $(Build.StagingDirectory)\Zip with whatever folder you want zipped up and $(Build.StagingDirectory)\$(BuildConfiguration)Deploy.zip with whatever you want the file named.

Using WebDeploy with an Azure node website doesn't trigger npm install

I am using WebDeploy to deploy a node website to azure.
I've seen in samples and demos that it should trigger a npm install on deploy.
But it is not. I've also seen almost every demo uses git deployment.
Is automatic npm install not supported for WebDeploy or am I missing something?
when you use WebDeploy, it will just copy over all the file from your machine to cloud, it will not trigger any build process. You will have to responsible to make sure your app is ready to run.
if you want CI function, please setup continues deployment, here is tutorial for setting up local git
https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control/
and there are other options if you have repository in github/bitbucket/Visual studio Team Service etc ... (go to https://portal.azure.com, select your site --> all settings --> continuous deployment to see all supported optinos)
According to the doc Publish to Microsoft Azure Website using Web Deploy, it said
Deployment will include all the files in your project. Files in the node_modules folder are included automatically, even if they are not part of the project.
So all files under your project folder in VS, including the node_modules folder, will be deployed.

Resources