如何在 Kudu 控制台中使用 运行 "ng serve" 命令使 Azure 为我的 Angular 网站提供服务
How to run "ng serve" command in Kudu Console to make Azure serve my Angular website
我创建了一个网页，当我执行
ng serve
我可以浏览到位于 localhost:4200 的索引页面。然后，我在 Azure 中创建了一个新的应用程序服务并访问了 Kudu 控制台，从 BitBucket 克隆了页面。我似乎成功安装了 Angular CLI 工具，因为我可以通过
转换为 dist
ng build
but when I run the service command, I get stuck.
命令 window 说 webpack 编译成功，但是当我浏览到我的站点 whatever.azurewebsites.net 时，我只收到错误提示
You do not have permission to view this directory or page
这当然很奇怪，因为我正在为应用程序提供服务。如果我在 URL 后缀 /src，我会看到静态 index.html 文件的内容，但是带来两个问题：（a）它不在生产文件中，而是在存储库版本中（公开分发代码可能是不明智的，而且 Webpack 的服务根本不会产生物理垃圾）和（b）它不呈现Angular 应用程序（标签 app-root 仍然是空的 app-root 和 this当然是实际问题）。
谷歌搜索几个小时产生了很多信息，但所有这些都是针对 CI 和自动化。不过，在这一点上，我要手动完成这些事情以获得完全的控制和理解。根据我对问题的诊断程度，应该是以下问题之一。此刻我有点困惑。如果我问的是白痴问题，请耐心等待。
- 我应该如何公开页面？
- 我服务得当吗？
- 我应该输入什么 URL 才能访问我的页面？
您正在尝试为该网站提供两次服务：一次使用 ng serve，一次使用 Azure 应用服务（它在幕后使用某种类型的 IIS）。 ng serve 在 http://localhost:4200 上运行，IIS 在 http://whatever.azurewebsites.net:80 上运行。
尽管您在 http://localhost:4200 上提供服务，但无法在计算机外部使用。要通过 Azure 应用服务使其工作，您需要进入应用程序设置（在 Azure 门户中的应用服务下找到）并更新虚拟应用程序和目录部分以包含 dist 文件夹，如下所示：
正如您已经建议的那样，这不是推荐的方法在 Azure 应用服务中为您的Angular 应用程序提供服务。我不会在这里介绍，因为您已经找到了更好的知识来源。
你应该永远不要在生产中使用ng serve！如果你传递 -prod 标志，它实际上在命令行输出中说了很多：
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION USE!
****************************************************************************************
相反，您应该 运行 ng build -prod 创建应用程序的优化版本，然后使用 Apache 或 NGINX（可能是 IIS，因为您在 Azure 上）之类的服务器来提供文件。
可以在此处找到通过 Azure 上传和提供静态文件的一种方法的示例：How to deploy a simple static micro site on Microsoft Azure
我创建了一个网页，当我执行
ng serve
我可以浏览到位于 localhost:4200 的索引页面。然后，我在 Azure 中创建了一个新的应用程序服务并访问了 Kudu 控制台，从 BitBucket 克隆了页面。我似乎成功安装了 Angular CLI 工具，因为我可以通过
转换为 distng build but when I run the service command, I get stuck.
命令 window 说 webpack 编译成功，但是当我浏览到我的站点 whatever.azurewebsites.net 时，我只收到错误提示
You do not have permission to view this directory or page
这当然很奇怪，因为我正在为应用程序提供服务。如果我在 URL 后缀 /src，我会看到静态 index.html 文件的内容，但是带来两个问题：（a）它不在生产文件中，而是在存储库版本中（公开分发代码可能是不明智的，而且 Webpack 的服务根本不会产生物理垃圾）和（b）它不呈现Angular 应用程序（标签 app-root 仍然是空的 app-root 和 this当然是实际问题）。
谷歌搜索几个小时产生了很多信息，但所有这些都是针对 CI 和自动化。不过，在这一点上，我要手动完成这些事情以获得完全的控制和理解。根据我对问题的诊断程度，应该是以下问题之一。此刻我有点困惑。如果我问的是白痴问题，请耐心等待。
- 我应该如何公开页面？
- 我服务得当吗？
- 我应该输入什么 URL 才能访问我的页面？
您正在尝试为该网站提供两次服务：一次使用 ng serve，一次使用 Azure 应用服务（它在幕后使用某种类型的 IIS）。 ng serve 在 http://localhost:4200 上运行，IIS 在 http://whatever.azurewebsites.net:80 上运行。
尽管您在 http://localhost:4200 上提供服务，但无法在计算机外部使用。要通过 Azure 应用服务使其工作，您需要进入应用程序设置（在 Azure 门户中的应用服务下找到）并更新虚拟应用程序和目录部分以包含 dist 文件夹，如下所示：
正如您已经建议的那样，这不是推荐的方法在 Azure 应用服务中为您的Angular 应用程序提供服务。我不会在这里介绍，因为您已经找到了更好的知识来源。
你应该永远不要在生产中使用ng serve！如果你传递 -prod 标志，它实际上在命令行输出中说了很多：
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION USE!
****************************************************************************************
相反，您应该 运行 ng build -prod 创建应用程序的优化版本，然后使用 Apache 或 NGINX（可能是 IIS，因为您在 Azure 上）之类的服务器来提供文件。
可以在此处找到通过 Azure 上传和提供静态文件的一种方法的示例：How to deploy a simple static micro site on Microsoft Azure