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

Question

我发现了很多关于如何将 Angular 应用程序部署到 azure web 应用程序的文章。但是没有工作。我找到了一个解决方案，我创建了一个 Visual Studio Web 项目，从 Visual Studio Code Project 复制 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

但是剂量似乎有效。

标签： angularazureazure-web-app-service

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目录。接下来，我只需要将目录下的所有文件通过 Kudu 控制台或 FTP 或其他方式复制到 Azure WebApp的目录下即可。然后，它在浏览如下图所示的 url 时起作用。 my-appng builddist/my-appwwwroothttps://<your-website-name>.azurewebsites.net
3. 如果您想通过带有路径的网站主机显示您的角度应用程序，例如https://<your-website-name>.azurewebsites.net/docs，您可以通过在路径下ng build --prod --output-path docs --base-href创建一个docs目录来构建您的应用程序，然后直接将目录my-app复制到，然后它可以在您的浏览器中运行，如图以上。docswwwroothttps://<your-website-name>.azurewebsites.net/docs

这是我wwwroot在 Kudu 的路径截图。