如何将前端应用程序Docker化，以便与已经Docker化的API应用程序通信

Question

3

目前，我正在开发一个应用程序，该应用程序利用完全基于Docker的Node API服务（由Docker Nginx本地提供服务）和一个简单的React前端，使用PHP valet本地提供服务。

运行docker-compose up可以成功构建基于Docker的应用程序，它在端口80上由Nginx托管，并将请求代理到端口9999上的Node API。

我遇到的问题是如何让React前端与Docker化的Node API通信。

理想情况下，我希望将Docker化的Node API服务移到由PHP valet提供服务，或者将前端Web应用程序移动到由Docker nginx服务提供服务。

如何完全将前后端服务基于Docker集成在一起，以便它们可以彼此通信（理想情况下都在端口80上），或者建议如何使用Valet或MAMP与容器化的Node API结合使用。

- Starks

2个回答

0

构建前端静态HTML并从静态目录从后端提供服务。

React前端加载到用户的计算机上，并在其浏览器中执行。它通过HTTP(S)与服务器通信。

现在你是如何提供React应用程序的？React应用程序只是通过HTTP提供的纯文本文件。

- Josh Wulf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidxxx · Accepted Answer

如何将前端和后端服务完全docker化，使它们可以相互通信（最好都托管在80端口上），或者建议我如何将Valet或MAMP与容器化的Node API一起使用。

无论是否使用Docker，前端请求后端（XMLHttpRequest和一些其他请求）都会受到同源策略的限制，即如果协议、端口和主机相同，则两个URL具有相同的源。

如果这两个应用程序是容器，由于这将是两个不同的容器，因此主机将因设计而异。如果您将前端应用程序保留在主机上，情况也是如此。

因此，在任何情况下，您都应该在后端（NodeJS）中启用CORS，以便至少为前端主机的请求进行资源共享协议。从前端方面来看，不需要做任何事情，因为CORS是浏览器的东西：它向目标主机发送预检请求以获取资源共享协议。

关于将前端制作为Docker容器，我认为如果前端设计为与Node后端一起工作，那么您应该也制作一个Docker镜像/容器，并使用docker-compose来管理它们：这将使它们更易于管理/维护。