如何将前端应用程序 Dockerize 以与已经 dockerized api 的应用程序通信

How to Dockerise front-end application to communicate with already dockerised api application

目前,我正在开发一个应用程序,该应用程序使用完全 dockerised Node API 服务(由 Docker Nginx 在本地提供服务)和一个简单的 React 前端-使用 PHP 代客在本地服务的结束。

运行 docker-compose up,构建成功托管在 Nginx 端口 80 上的 dockerized 应用程序,代理将请求传递到端口 9999 上的节点 API。

我遇到的问题是让 React 前端与 dockerised 节点通信 API。

理想情况下我都愿意;将 dockerized Node api 服务移动到 PHP 代客服务或将前端 webapp 移动到 docker nginx 服务

我怎样才能完全 docker 将前端和后端服务放在一起,以便它们可以相互通信(最好都托管在端口 80 上)或者建议我如何使用 Valet 或MAMP 与容器化节点 API.

How can I fully dockerize the front-end and back-end services together so that they can talk to each other (ideally both hosted on port 80) or alternatively suggest how I can use Valet or MAMP together with containerised node API.

有或没有 Docker,自 two URLs have the same origin if the protocol, port and host are the same.

以来,您将面临前端到后端请求(XMLHttpRequest 和其他一些请求)的同源策略

如果这两个应用程序是容器,主机将在设计上有所不同,因为它们将是两个不同的容器。如果您将前端应用程序保留在主机上,情况也会如此。

所以无论如何,您至少应该 enable CORS in the backend side (NodeJS) 前端主机的请求。从前端来看,不需要任何东西,因为 CORS 是浏览器的东西:它向目标主机发送飞行前请求以获得资源共享协议。

关于让前端成为一个 Docker 容器,我认为如果前端被设计为与 Node 后端一起工作,你可能也应该把它做成一个 docker image/container 和使用 docker-compose 来管理它们:这将使它们更易于 manage/maintain。

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

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

您现在如何为 React 应用提供服务? React 应用只是通过 HTTP 提供的纯文本文件。