angular - 将 Angular 7 应用程序部署到 Azure Web 应用程序

Question

我发现了很多关于如何将 Angular 应用程序部署到 Azure Web 应用程序的文章。然而没有一个工作。我找到了一个解决方案，可以创建 Visual Studio Web 项目，从 Visual Studio Code 项目复制 dist 文件并从 Visual Studio 进行部署。然而这并不是真正有效。我想网络应用程序需要一些 web.config 文件..难道没有比这更好的方法吗？我更愿意直接从 Visual Studio Code 进行部署，而无需使用 ASP.NET Web 项目。如果我只是部署，导航到该页面时会出现以下错误:

Cannot GET /

在这篇文章中，您似乎只需要更高版本的 NodeJS:

https://dzone.com/articles/deploy-an-angular-app-from-visual-studio-code-to-a-1

但似乎不起作用。

Answer 1

听起来您想在 Azure WebApps 上部署一个基于 Angular 7 的静态网站，而无需任何节点服务器端代码。

我会关注Angular官方 Getting started 解释部署步骤。

1. 在我的本地计算机上，这些步骤将创建 my-app项目，其中包括npm install -g @angular/cli , ng new my-app ，和cd my-app 。我将跳过有关编辑和 ng serve 的这些步骤直接按照下面的步骤构建。
2. 我会得到一个dist my-app下的目录执行 ng build 时的路径。接下来我只需要复制dist/my-app下的所有文件即可目录到目录wwwroot通过 Kudu 控制台或 FTP 或其他方式访问 Azure WebApp。然后，当浏览器访问 url https://<your-website-name>.azurewebsites.net 时，它就会起作用。如下图所示。
3. 如果您想通过带有路径的网站主机显示您的 Angular 应用程序，例如 https://<your-website-name>.azurewebsites.net/docs ，您可以通过 ng build --prod --output-path docs --base-href 构建您的应用程序这将创建一个 docs my-app下的目录路径，直接复制 docs目录进入wwwroot ，然后它适用于 https://<your-website-name>.azurewebsites.net/docs从您的浏览器中如上图所示。

这是我的 wwwroot 的屏幕截图Kudu 中的路径。