我如何在不使用ng服务的情况下为Angular 5应用程序提供服务？

Question

我可以使用ng serve构建并提供Angular 5项目，并在我的浏览器中查看它。我想把文件移到docker容器上，因为我的最终应用需要一个php后端。

当我将与ng serve运行的相同文件系统移动到docker构建并尝试导航到它时，我收到一个服务器错误。

我知道容器工作正常，因为我可以在相应的本地主机端口向浏览器提供PHP文件，而不会出现任何问题。所以一定是角度引起了这个错误。

我注意到ng new angular-tour-of-heroes项目的根项目目录中没有index.html。当我将src/文件夹中的文件移动到根目录时，在浏览器中仍然什么也得不到。

如何使用Docker而不是ng serve为Angular应用程序提供服务

Answer 1

这个答案分为两部分，因为听起来您可能不熟悉构建过程。

建筑

对于大多数JavaScript框架来说，这更具一般性。通常有一个“构建”过程，它将以某种方式生成静态web应用程序，使其可以由web服务器提供服务。

对于Angular，它是ng build。您可以在https://github.com/angular/angular-cli/wiki/build上了解有关该命令的更多信息。ng build命令将在您的项目中创建一个dist目录，构建的CSS<和JavaScript存放在该目录中。此目录中的文件是您将推送到web服务器以提供服务的文件。

Docker

现在我们已经了解了如何让web应用程序的源代码提供服务，我们希望将其作为一个容器运行。根据你的问题，我假设你已经有了一个带有web服务器的Docker镜像。在这种情况下，可以将dist文件夹复制到构建web服务器的现有Dockerfile所在的位置，并在Dockerfile中添加一行，如下所示：

COPY dist/* /my/webserver/root

如果您能提供更多关于现有映像、Dockerfile和环境的信息，我可以提供一个更好的示例，说明如何构建Angular应用程序并将其生成到最终的web服务器映像。

但是，您不一定需要从PHP应用程序中为Angular应用程序提供服务。如果您的Angular应用程序连接到PHP应用程序，它们仍然可以是链接在一起的单独的Docker图像和容器。