从 Visual Studio Code 将 Vue.js 应用程序部署为 Azure 应用程序服务答案

【问题标题】：Deploy Vue.js App as Azure App Service from Visual Studio Code从 Visual Studio Code 将 Vue.js 应用程序部署为 Azure 应用程序服务
【发布时间】：2019-10-14 00:38:54
【问题描述】：

我有一个 Vue.js 应用程序。这个应用程序是使用Vue-Cli 创建的。此时，这是一个基本的“hello world”应用程序。我有这个应用程序在我的本地机器上运行。我在 Visual Studio Code 的终端窗口中使用 npm run serve 运行它。我现在正尝试将此应用从 Visual Studio Code 部署到 Azure 应用服务。

我创建了一个 Azure 应用服务。我还安装了Azure App Service Visual Studio Code extension。在 Visual Studio Code 的“终端”窗口中，我输入了“npm run build”。这创建了一个名为“dist”的目录。然后我右键单击该目录并选择“部署到 Web 应用程序...”。然后我选择我的订阅和应用服务名称并选择“部署”。我看到一个提示说“部署到”。然后我单击“浏览网站”按钮。这将启动一个浏览器窗口。在浏览器中，我看到一个启动屏幕，上面写着“嘿节点开发人员！”但是，我期待查看我的 Node.js 应用。我错过了什么？

为了部署这个应用程序，我从“终端”窗口运行了npm run build。这创建了一个“dist”目录。

【问题讨论】：

您能否导航到sitename.scm.azurewebsites.net 并转到调试控制台>cmd。您的网站文件是否显示在这里？
@BryanTrach-MSFT 当我访问 sitename.scm.azurewebsites.net 时，我没有调试控制台 > cmd 选项。相反，我有“环境”、“SSH”和“Bash”。我怀疑您指的是 Windows 上的应用服务，但是，这显然是 Linux 上的应用服务。当我使用 Bash shell 时，我看到一个名为“site”的目录。在“站点”内部，我看到一个名为“wwwroot”的目录。在“wwwroot”中，我看到了我的文件。

标签： visual-studio-code azure-web-app-service vue-cli

【解决方案1】：

由于 Azure 更新了它的一些功能，因此官方文档不是很清楚，许多教程也不再适用。我尝试通过 API 请求 直接部署 /site/wwwroot 下的 dist 文件夹，但无法正常运行。

经过一番挖掘，我最终将我的 vue.js 应用程序成功部署到 Azure 应用程序服务上，并具有正常的路由和 API 请求 .

这里的关键是在 Azure App Service 上部署 SPA 作为静态网站。正如 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

【讨论】：

Azure 存储是不同的产品。虽然它会为您提供静态 SPA（因为它有一个 Web 服务器），但问题是您不能将自定义域指向它。
官方文档在此声明您可以将自定义域映射到 Azure 博客存储。 docs.microsoft.com/en-us/azure/storage/blobs/…
我确实遇到了更多使用博客存储将 Vue 部署到 Azure 的问题。所以我后来改用 Azure Devops 并设置 CI/CD 管道/发布并连接到 Azure 应用服务。

【解决方案2】：

请参阅 Microsoft Docs 中的Local Git Deployment。

如果做不到这一点，您可以尝试通过 FTP 手动部署。您可以通过转到您的 Azure 门户来做到这一点：

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

然后您会在该页面上找到一些 FTPS 凭据，您所要做的就是将您的 dist 文件夹部署到 /site/wwwroot，查看更多 here。

【讨论】：