如何通过 docker 连接 API 和 React App

Question

我有一个基于 PHP (lumen) 的 API 和一个基于 React 的电子商务。两者的工作都很好。当我尝试通过 Docker 使其工作时，问题就来了。我想部署仅运行一个命令的整个应用程序。

问题是反应应用程序没有与 API 连接。

我在这篇文章中尝试了@Suman Kharel 的回答

在运行 react 应用程序的 Docker 容器中代理 API 请求

但它不起作用。有谁知道我怎样才能解决它？

这是我在 bitbucket 上的 repo。

https://bitbucket.org/mariogarciait/ecommerce-submodule/src/master/

希望有人知道我做错了什么。

谢谢

Answer 1

使用 docker-compose 仅​​用于测试目的或非常有限的生产基础设施。最好的方法是将您的工件分别放在不同的主机中。

请阅读这些以了解一些要点：

• 每个容器一项服务
• docker ip vs 本地主机
• docker：链接/网络与变量

当您使用 docker-compose 时，所有服务都部署在同一台机器上，但每个服务都在一个容器中。并且只有一个进程在容器内运行。

因此，如果您进入一个容器（例如 nodejs 中的 Web）并列出进程，您将看到如下内容：

nodejs .... 3001

并进入另一个容器，如数据库 postgres：

postgres .... 5432

因此，如果 nodejs web 需要连接到数据库，从内部，必须需要 ip 而不是postgress 数据库的localhost因为在 nodejs 容器内部，只有一个进程在 localhost 中运行：

localhost 3001

因此，localhost:5432在 nodejs 容器内无法使用。解决方案是使用 postgres 的 ip 代替 localhost ：10.10.100.101:5432

码头工人解决方案

当我们有多个容器 (docker-compose) 并且它们之间存在依赖关系时，docker 建议我们：

• 弃用：容器链接
• Docker 网络

总而言之，通过这些功能，docker 创建了一种“特殊网络”，您的所有容器都可以在其中安静地离开，而不会受到 ips 的影响！

环境变量方法

在我看来，Docker 链接或网络是一种幻觉或欺骗，因为这仅适用于一台机器（开发或登台），隐藏了我们和其他复杂主题的依赖关系，当您的应用程序离开您的笔记本电脑并转到您的准备好供您的用户使用的真实服务器。

无论如何，如果您将 docker-compose 用于开发人员或实际目的，这些步骤将帮助您管理容器之间的 ip：

• 获取您机器的本地 ip 并将其存储在类似$MACHINE_HOST 的变量中，例如：startup.sh
• 从 docker-compose.json 中删除链接或网络
• 使用$MACHINE_HOST引用容器中的另一个容器。

例子：

db:
  image: mysql:5.7.22
  container_name: db_ecommerce
  ports:
    - "5003:3306"
  environment:
    MYSQL_DATABASE: lumen
    MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}

api-php:
  container_name: api_ecommerce
  ports:
    - "8020:80"
    - "445:443"
  environment:
    - DATABASE_HOST=$MACHINE_HOST
    - DATABASE_USER=$DATABASE_USER
    - DATABASE_PASSWORD=$DATABASE_PASSWORD
    - ETC=$ETC

web-react:
  container_name: react_ecommerce
  ports:
    - 3001:3000
  environment:
    - API_BASE_URL=$MACHINE_HOST:8020/api

• 最后只需运行您的 startup.sh ，其中包含变量和经典 docker-compose up -d

同样在您的反应应用程序中，使用 package.json 中的 var 代替代理读取您的 api 的 url：

process.env.REACT_APP_API_BASE_URL

检查此以了解如何从 react 应用程序读取环境变量。

在这里您可以找到有关如何使用MACHINE_HOST变量及其使用的更详细步骤：

• /sf/answers/4006909091/

建议

• 在 docker-compose.json 文件中使用变量而不是硬编码值
• 分离您的环境：开发、测试和生产
• 构建只是在开发阶段。换句话说，不要在 docker-compose.json 中使用build。也许对于本地发展可能是另一种选择
• 对于测试和生产阶段，只需运行在开发阶段构建和上传的容器（docker 注册表）
• 如果您在 React 应用程序中使用代理或环境变量读取 api 的 url，则您的构建将仅在一台机器上运行。如果您需要在多个环境之间移动它，例如：测试、暂存、uat 等，您必须执行新构建，因为 react 中的代理或环境变量是在您的 bundle.js 中硬编码的。
• 这不仅仅是反应的问题，也存在于 angular、vue 等中：检查限制 1：每个环境都需要在此页面中单独的构建部分
• 如果您申请，您可以评估https://github.com/utec/geofrontend-server以解决之前解释的问题（以及其他问题，例如身份验证）。
• 如果您的计划是向真实用户展示您的网络，则 web 和 api 必须具有不同的域，当然还有 https。例子
  • eCommerce.zenit.com 用于您的 React 应用程序
  • api.zenit.com 或 ecomerce-api.zenit.com 用于您的 php api
• 最后，如果您想避免这种令人头疼的基础设施复杂性问题，并且您没有 DevOps 和系统管理员团队，您可以使用 heroku、数字海洋、openshift 或其他类似的平台。几乎所有这些都与 docker 兼容。因此，您只需要对每个包含 Dockerfile 的 repo 执行 git push。该平台将解释您的 Dockerfile，部署并为您分配一个现成的 http 域用于测试或一个很酷的域用于生产（在获取域和证书之前）。