How to copy files from artifact directory to azure app service?

Question

A LITTLE BACKGROUND:

I had created the azure CI/CD pipeline for .NET and in the CI step there is a step to gulp the css/js. Somehow I noticed that in my generated artifacts the gulped css/js are not coming. So, as per the last answer in the post (Gulp-compiled CSS folder missing from the Azure DevOps pipeline Build Artifact ) I managed to find the path of generated css/js and copied it to $(Build.ArtifactStagingDirectory) (by adding copy files task after gulp and before publish artifact task). As in screenshot below you can see that folders marked in blue box are now copied to $(Build.ArtifactStagingDirectory).

NOW COMING TO QUESTION:

I think in the release pipeline, the artifact used for deploying it to azure app is "SampleWebApplication.zip". Now, I am not sure how to copy my css/js folders to azure app because when I see the azure app's site folder then still these css and js folders are not present there in assets folder.

EDIT-1

Attached the pipeline tasks' screenshot below:

Also attached the YAML for "Build Solution" and "Publish Artifact" task

Build Solution YAML:-

#Your build pipeline references an undefined variable named ‘Parameters.solution’. Create or edit the build pipeline for this YAML file, define the variable on the Variables tab. See https://go.microsoft.com/fwlink/?linkid=865972
#Your build pipeline references the ‘BuildPlatform’ variable, which you’ve selected to be settable at queue time. Create or edit the build pipeline for this YAML file, define the variable on the Variables tab, and then select the option to make it settable at queue time. See https://go.microsoft.com/fwlink/?linkid=865971
#Your build pipeline references the ‘BuildConfiguration’ variable, which you’ve selected to be settable at queue time. Create or edit the build pipeline for this YAML file, define the variable on the Variables tab, and then select the option to make it settable at queue time. See https://go.microsoft.com/fwlink/?linkid=865971

steps:
- task: VSBuild@1
  displayName: 'Build solution'
  inputs:
    solution: '$(Parameters.solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(build.artifactstagingdirectory)\\"'
    platform: '$(BuildPlatform)'
    configuration: '$(BuildConfiguration)'

Publish Artifact YAML

#Your build pipeline references an undefined variable named ‘Parameters.ArtifactName’. Create or edit the build pipeline for this YAML file, define the variable on the Variables tab. See https://go.microsoft.com/fwlink/?linkid=865972

steps:
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact'
  inputs:
    PathtoPublish: '$(build.artifactstagingdirectory)'
    ArtifactName: '$(Parameters.ArtifactName)'

Answer 1

You should recognize the difference between the published artifact drop and generated file SampleWebApplication.zip.

Not sure which task you use to deploy to Azure App Service, but as i know the related deploy tasks always take the xx.zip to be deployed to web application. That is to say, the deploy task only takes the SampleWebApplication.zip, it doesn't care about the published artifact.

So what you should do is to make sure the SampleWebApplication.zip contains the css/js folder. Deploy task only deploy the xx.zip, it won't care about whether the artifact contains the css/js folder. You should focus on how to include the css/js folder when generating the xx.zip instead of using copy task to copy those folders into drop artifact...

Please check this document for more useful info if you're configuring a asp.net core project. I think you should include the css/js folder before or during dotnet publish step, but not after that.

Answer 2

I managed to find two workarounds of this. The issue seems to be specific to the "Build Solution" task. When the build was going to the $(Build.ArtifactStagingDirectory), then it was not including the gulp generated CSS and JS files. But as per this post on stack overflow I changed the build output directory from /p:PackageLocation="$(Build.ArtifactStagingDirectory) to /p:PackageLocation="$(Build.BinariesDirectory) and then tested the

First workaround

Changed the "Publish artifact" task's "Path to Publish" as $(Build.BinariesDirectory) from $(Build.ArtifactStagingDirectory) it was including the gulped CSS and JS files also.

Second Workaround

1. I changed the "Build Solution" task's "Path to Publish"'s parameter from /p:PackageLocation="$(Build.ArtifactStagingDirectory) to /p:PackageLocation="$(Build.BinariesDirectory) as mentioned in first work around

2. Create a task "Archive $(Build.BinariesDirectory)" Files task to zip files from $(build.binariesdirectory) to $(Build.ArtifactStagingDirectory) as in the screenshot below:

3. Create "Extract File" task to unzip the .zip file present in the $(Build.ArtifactStagingDirectory)/GeneratedArtifacts.zip it will extract all the zipped artifacts, like .cmd and .zip files required for "Publish task", present in the GeneratedArtifacts.zip in $(Build.ArtifactStagingDirectory). THATS IT!!

For your reference the for the second workaround the GeneratedArtifacts.zip contains the final files like shown in below screenshot:

Finally, for first work around - publish artifacts task will publish all the files present in $(Build.BinariesDirectory) and for second workaround - publish artifacts task will publish all the files present in $(Build.ArtifactStagingDirectory)

To be more precise Below is the screenshot for the Publish Artifact task for the first workaround:

Below is the screenshot for the Publish Artifact task for the second workaround:

The first workaround seems to be clean and consisting of less build pipeline steps so I followed it but thought to write the second workaround also because it may be if the first workaround doesn't work for someone maybe second works.

Answer 3

I can see you're using Azure DevOps for your CI. An alternative solution is to zip your file(s) including directory structure from the web root and add them into DevOps as a 'secure file' (find this under library/secure files once you've configured an Azure KeyVault).

Then add a pipeline task to download the secure file (use "Download secure file" task) to your build server. Make sure you add a "Reference name" to this task so you can reference the downloaded file path in a later step.

Then add a stand-alone "Azure App Service Deploy" step to deploy just this zip file. Select deployment method of "Zip deploy" and reference your downloaded secure file in the "Package or folder" section, like $(secureFileReferenceName.secureFilePath).

This effectively downloads the zip file from secure storage to the build agent and unzips it to wwwroot in the App Service.

I wish there was an easier way!