我有一个Vue.js应用。该应用是使用Vue-Cli创建的。目前,这是一个基本的“ hello world”应用程序。我在本地计算机上运行了此应用程序。我通过在Visual Studio Code的“终端”窗口中使用GeoJSONDataSource
来运行它。我现在正在尝试将此应用程序从Visual Studio代码部署到Azure应用程序服务。
我创建了一个Azure应用服务。我还安装了Azure App Service Visual Studio Code extension。在Visual Studio Code的“终端”窗口中,输入“ npm run build”。这创建了一个名为“ dist”的目录。然后,我右键单击该目录,然后选择“部署到Web App ...”。然后,选择我的订阅和应用程序服务名称,然后选择“部署”。我看到提示“ Deployment to”的提示,然后单击“ Browse Website”按钮。这将启动一个浏览器窗口。在浏览器中,我看到一个初始屏幕,上面写着“ Hey Node developers!”。但是,我期望来查看我的Node.js应用程序。我想念什么?
为尝试部署此应用程序,我从“终端”窗口中运行了npm run serve
。这创建了一个“ dist”目录。
答案 0 :(得分:0)
请参阅Microsoft文档中的Local Git Deployment。
如果失败,您可以尝试通过FTP手动部署。您可以通过转到Azure门户来做到这一点:
App Service => Deployment Center => FTP => Dashboard
然后,您会在该页面上找到一些FTPS凭据,而您所要做的就是将dist
文件夹最多部署到/site/wwwroot
,请查看更多here。
答案 1 :(得分:0)
由于Azure更新了一些功能,因此官方文档不太清楚,许多教程也不再适用。我尝试通过我的 API请求无法正常运行,直接在dist
下部署/site/wwwroot
文件夹。
经过一番挖掘,最终我将 vue.js 应用成功部署到Azure App Service上,并且具有路由和 API请求的功能。
此处的关键是将SPA作为静态网站部署在Azure App Service上。由于Azure将静态网站定义为
”“静态站点通常是用Angular,React或Vue编写的单页应用程序(或SPA)。但是,在设计应用程序时,您直接从存储而不是使用Web服务器托管和提供这些文件。与维护Web服务器相比,在存储中托管更简单且成本更低。“
点击下面的链接并使用 Azure Storage 和 VSCode ,即可完成工作。
https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial-vscode-static-website-node-01?tabs=bash