Deploy Vue.js App as Azure App Service from Visual Studio Code

10
votes

I have a Vue.js app. This app was created using the Vue-Cli. At this time, this is a basic "hello world" app. I have this app running on my local machine. I run it by using npm run serve from the Terminal window in Visual Studio Code. I'm now trying to deploy this app from Visual Studio Code to an Azure App Service.

I have an Azure App Service created. I also installed the Azure App Service Visual Studio Code extension. From the "Terminal" window in Visual Studio Code, I entered "npm run build". This created a directory named "dist". I then right-click on that directory and choose "Deploy to Web App...". I then choose my subscription and app service name and choose "Deploy". I see a prompt that says "Deployment to "." I then click the "Browse Website" button. This launches a browser window. In the browser, I see a splash screen that says "Hey Node developers!" However, I was expecting to see my Node.js app. What am I missing?

In an attempt to deploy this app, I ran npm run build from the "Terminal" window. This created a "dist" directory.

2
visual-studio-codeazure-web-app-servicevue-cli
Can you please navigate to sitename.scm.azurewebsites.net and go to debug console>cmd. Do you your site files show up here? – Bryan Trach-MSFT
@BryanTrach-MSFT When I visit sitename.scm.azurewebsites.net, I do not have a debug console > cmd option. Instead, I have "Environment", "SSH" and "Bash". I suspect you are referring to an App Service on Windows, however, this is apparently and App Service on Linux. When I use the Bash shell, I see a directory named "site". Inside of "site", I see a directory named "wwwroot". Inside of "wwwroot" I see my files. – Some User

2 Answers

2
votes

Please refer to the Local Git Deployment as per the Microsoft Docs.

Failing that, you could try to deploy manually via FTP. You can do that by going to your Azure Portal:

App Service => Deployment Center => FTP => Dashboard

You'll then find some FTPS credentials on that page and all you have to do is deploy your dist folder up to /site/wwwroot, see more here.

0
votes

The official documentation wasn't so clear and many tutorials no longer woking since Azure has updated some of its features. I tried directly deploy the dist folder under /site/wwwroot by my API requests were not functioning properly.

After some digging, I eventually got my vue.js app successfully deployed onto Azure App Service, with functioning routing, and API requests.

The key here is to deploy SPA on Azure App Service as Static website. As Azure defines static website as

"A static site is typically a single-page application (or SPA) written with Angular, React or Vue. However you design the app, you host and serve these files directly from storage rather than using a web server. Hosting in storage is simpler and less expensive than maintaining a web server."

Following this link below and using Azure Storage and VSCode should get the job done.
https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial-vscode-static-website-node-01?tabs=bash