Repost from discussion
I've linked basically the same question. How do I deploy a Nuxt 3 app with DevOps pipelines? I've currently set up the following:
trigger:
- master
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool@0
inputs:
versionSource: 'spec'
versionSpec: '18.x'
- task: Npm@1
inputs:
command: 'install'
workingDir: 'frontend'
- task: Npm@1
inputs:
command: 'custom'
workingDir: 'frontend'
customCommand: 'run build'
- task: ArchiveFiles@2
inputs:
rootFolderOrFile: '$(System.DefaultWorkingDirectory)/frontend/.output'
includeRootFolder: false
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/frontend-plantool.zip'
replaceExistingArchive: true
- task: PublishBuildArtifacts@1
inputs:
PathtoPublish: '$(Build.ArtifactStagingDirectory)'
ArtifactName: 'drop'
publishLocation: 'Container'
After that a release pipeline runs and deploys it to an App Service (should I use something else?). I can verify everything from the .output folder is present within the app service. The actual URL is empty however, it just displays the default message:
Your web app is running and waiting for your content
Am I doing something wrong? How can I start actually running the front end.
I've already tried following the Nuxt documentation or Microsoft tutorials. However they all point to connecting your GitHub repository. Unfortunately my repository is not on GitHub.
I've followed this tutorial to get what I have now.
I finally managed to get it working by doing the following:
azure
as nitro preset in your nuxt.config.ts
export default defineNuxtConfig({
nitro: {
preset: "azure"
}
})
I know the tutorials say this gets automatically detected but it doesn't. Also don't use azure-swa
even though you're going to deploy to a Static Web App.
This should work with the pipeline Azure generates.
This should be all that's necessary when your nuxt project is in the root of your repository.
Figuring out this probably took most of my time. Make sure you have exactly this configuration:
- task: AzureStaticWebApp@0
inputs:
azure_static_web_apps_api_token: YOUR_TOKEN_HERE
# Point this to the root of your Nuxt application.
app_location: "/frontend"
# Should also point to the root of your application first, before going to .output/server.
# Even though the tooltip mentions something about a "relative" path.
api_location: "frontend/.output/server"
# Should NOT point to the root of your application first, point directly to .output/public.
# relative to your Nuxt root. Even though this tooltip doesn't mention anything about
# being relative.
output_location: ".output/public"
In this case the Nuxt project "root" is located in
main root/
|- frontend/ <--- NUXT PROJECT HERE
|--- package.json
|--- nuxt.config.ts
|--- App.vue
|--- etc.
|- backend/
|- etc.