如何在Kudu控制台中运行“ng serve”命令，使Azure服务于我的Angular网站

Question

我创建了一个网页，当我执行

时

  

ng serve

我可以浏览 localhost：4200 的索引页面。然后，我在Azure中创建了一个新的应用服务，并访问了Kudu Console从BitBucket克隆该页面。我似乎成功安装了Angular CLI工具，因为我可以通过

转换为 dist

  

ng build   但是当我运行服务命令时，我卡住了。

命令窗口说webpack编译成功但是当我浏览 whatever.azurewebsites.net 的网站时，我只收到错误说明

  

您无权查看此目录或页面

当然，因为我正在为应用程序提供服务，所以很奇怪。如果我通过 / src 后缀URL，我会看到静态 index.html 文件的内容，但这会带来两个问题：（a）它不在生产中文件但是存储库版本（或许公开分发代码并不明智，Webpack的服务根本不会创建物理垃圾）和（b）它不呈现Angular应用程序（标记 app-root 仍然是一个空的 app-root ，这个当然是实际问题。）

谷歌搜索了几个小时产生了很多信息，但所有这些都是针对CI和自动化的。在这一点上，我是手动完成这些事情以获得完全控制和理解。根据我诊断问题的程度，下列问题之一应该是问题。目前我有点困惑。如果我以愚蠢的方式提问，请耐心等待。

• 我应该如何曝光页面？
• 我服务得当吗？
• 我应该输入什么网址才能访问我的网页？

Answer 1

您应该 从不 在制作中使用touchstart！它实际上在命令行输出中表示如果你传递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! **************************************************************************************** 来创建应用程序的优化版本，然后使用Apache或NGINX等服务器（可能是IIS，因为您在Azure上）来提供文件。

可以在此处找到通过Azure上传和提供静态文件的一种方法示例：How to deploy a simple static micro site on Microsoft Azure

Answer 2

您尝试两次为网站提供服务：一次使用ng serve，一次使用Azure应用服务（在后台使用某种版本的IIS）。 ng serve正在http://localhost:4200上投放，http://whatever.azurewebsites.net:80正在投放IIS。

虽然您在http://localhost:4200上投放，但该机器无法在外部使用。要使其通过Azure应用服务工作，您需要进入应用程序设置（位于Azure门户中的应用服务下）并更新虚拟应用程序和目录部分以包含dist文件夹，如下所示：

正如您已经建议的那样，在Azure应用服务中提供Angular应用程序不是推荐的方法。我不会在这里介绍，因为你已经找到了更好的知识来源。