10

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.

Some User
  • 5,257
  • 13
  • 51
  • 93
  • Can you please navigate to https://sitename.scm.azurewebsites.net/ and go to debug console>cmd. Do you your site files show up here? – Bryan Trach-MSFT May 30 '19 at 05:42
  • @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 May 30 '19 at 11:54

2 Answers2

3

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.

Charlie.H
  • 469
  • 2
  • 9
0

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://learn.microsoft.com/en-us/azure/developer/javascript/tutorial-vscode-static-website-node-01?tabs=bash

Gary Bao 鲍昱彤
  • 2,608
  • 20
  • 31
  • Azure Storage is a different product. And while it will serve up your static SPA (as it has a web server), the problem is you cannot point a custom domain to it. – alfreema Aug 18 '20 at 16:30
  • Here from the official doc it states you can map a custom domain to Azure blog storage. https://learn.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name?tabs=azure-portal – Gary Bao 鲍昱彤 Aug 18 '20 at 22:33
  • I did ran into more issues deploying Vue onto Azure using Blog Storage. So I later changed to use Azure Devops and set up CI/CD pipeline/release and connected to the Azure app service. – Gary Bao 鲍昱彤 Aug 18 '20 at 22:34