Search code examples
azurevue.jsazure-pipelinescicdazure-appservice

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

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:

enter image description here

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:

enter image description here

My pipeline and release is pretty standard. The steps are:

  1. Uses Node 16.x
  2. Downloads a .env file
  3. Copies the .env file to the directory (/client) the application is in.
  4. runs npm install
  5. runs npm run build
  6. archives the dist directory that is generated from the run build command
  7. Publishes the archived dist folder as an artifact

enter image description here

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.

Solution

  • 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