同一 Azure Web 应用服务上的 Vue 前端和 Express 后端

问题描述

我已经构建了一个具有 Vue 前端和 express 后端的 Web 应用程序.

我正在尝试将这些托管在 Azure Web 应用服务上，但我是 Azure 的新手.当我将客户端放在一个 Web 应用程序中而将服务器端放在另一个 Web 应用程序中时，我的 Web 应用程序工作正常.我希望两者都在同一个网络应用程序中运行.从网上研究看来我需要去:

我的网络应用程序->配置->路径映射 -> 虚拟应用程序和目录.

我使用虚拟路径/app"创建了一个新应用程序.和物理路径siteapp".我将后端部署(使用 Visual Studio 代码)到我的 azure Web 应用程序，因此它位于 wwwroot 内.在 filezilla 中，我在站点目录中创建了一个名为app"的新文件夹.并粘贴到我构建的 Vue 客户端.但是，当我尝试导航到

在门户中设置.

更多详情，您可以在另一篇文章中参考我的答案.

I have built a web app that has a Vue front-end and an express back-end.

I am trying to host these on an Azure Web App Service but I am a complete novice with Azure.I have gotten the web app working fine when I place the Client side in one web app and the Server side in a different one.I want to have both running in the same web app.From researching online it seems that I need to go to:

my web app-> configuration-> path mappings ->Virtual applications and directories.

I created a new application with Virtual Path "/app" and physical path "siteapp".I deployed (using visual studio code) my back-end to my azure web app and thus this sits inside wwwroot.In filezilla I create a new folder in the site directory called "app" and paste in my built Vue client side.However, when I try to navigate to www.myapp.azurewebsites.net/app I am not presented with the expected Vue index.html rather a 404. If I just navigate to www.myapp.azurewebsites.net/ I get the default route from the server side as expected.

What am I doing wrong?

解决方案

When creating a webapp, please choose Windows operating environment, because currently choosing Linux does not support Virtual Application and directories.

The directory structure should be like below.

Setting in portal.

For more details, you can refer my answer in another post.

这篇关于同一 Azure Web 应用服务上的 Vue 前端和 Express 后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！