Deploying a Vue js Nuxt Universal App to Azure Web App Services
After a long struggle, I finally got a Nuxt Universal (Server and Client) App deployed to Azure. I have been trying to figure out how to do this for over a month and there is virtually no documentation around specifically for Azure.
Getting a Nuxt client side app deployed anywhere is a piece of cake. Just build the app and copy the contents of the Dist folder to any static hosting site. But if you want to use server side features like your own API or middleware, then finding a hosting site is difficult. Here is the Nuxt Documentation for deploying to AWS. I think I would rather pull all of my remaining hair out before trying this.
Since I am a long time user of Azure and have deployed many .Net Web Apps, this was the logical place to deploy my Nuxt App. I started by searching the web for articles and forums without much success. The next step was to create an empty Web App on Azure and see if I could get something running. I tried this on an off for over a month, creating the Webb App in the Azure Portal and tried using FTP, GIT, and VS Code to deploy my app without any success.
I decided to go back to basics and see if I could get a simple Node/Express app deployed to Azure. At first, I could not get anything working, then I created the Azure Web App from within VS Code instead of the Azure Portal. I knew something was different immediately because I was prompted to select the version of Node I wanted. I selected the suggested version and deployed my Node app and it looked like it was going to work, but of course, it wasn’t that easy. I suspected a port problem, and sure enough, as soon as I added const port = process.env.PORT || 3000to the Install.js file the Node App worked!
I tried this same process to deploy my Nuxt app to Azure. It also looked like it was going to work however I got an application error page instead of my web site. I knew I was close, so I looked at the Nuxt Documentation for different deployments again. I noticed in the Google App Engine Documentation that there was a couple of environment variables that were set, so I set these in the Azure Portal and bingo, the Application worked including the server API backend.
env_variables:
HOST: '0.0.0.0'
NODE_ENV: 'production'
You can run my demo Nuxt app here: http://psllc-nuxt.azurewebsites.net/ and call the API here: http://psllc-nuxt.azurewebsites.net/api/req?id=12345&pw=abcdef
Please let me know if you discover anything else. I’m not sure if there is an advantage to deploying a Nuxt App as an Azure Function instead of a Web App, but I would like to know your opinion.