如何通过Docker将API与React App连接 [英] How to connect API with React App through docker

问题描述

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

I have an API based on PHP (lumen) and an ecommerce based in React. Both of the work fine. The problem come when I try to make it work through Docker. I'd like to deploy the whole app running just a command.

问题在于react应用未与API连接.

The problem is that the react app doesn't connect with the API.

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

I tried the answer of @Suman Kharel on this post

在运行React应用的Docker容器中代理API请求

但是它不起作用.有人知道我该如何解决吗?

But it doesn't work. Any one know how can I sort it out?

这是我关于bitbucket的仓库.

Here is my repo on bitbucket.

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

希望有人知道我做错了.

Hopefully someone knows what i am doing wrong.

谢谢

推荐答案

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

Using docker-compose is just for test purposes or a very limited production infrastructure. Best approach is to have your artifacts in different host each one.

请阅读以下内容以了解一些要点:

Please read these to understand some points:

• 每个容器一项服务
• docker ip vs localhost
• docker:链接/网络与变量

• one service per container
• docker ip vs localhost
• docker : links/networks vs variables

使用docker-compose时，所有服务都部署在同一台机器上，但每个服务都部署在一个容器中.容器中仅运行一个进程.

When you use docker-compose, all the services are deployed in the same machine, but each one in a container. And just one process is running inside a container.

因此，如果您进入一个容器(例如，nodejs中的网站)并列出该过程，您将看到类似以下内容的内容:

So if you enter into a container (for example a web in nodejs) and list the process, you will see something like this:

nodejs .... 3001

并放入另一个容器，例如数据库postgres:

And into another container like a database postgres:

postgres .... 5432

因此，如果nodejs网站需要从内部连接到数据库，则必须使用postgress数据库的ip而不是 localhost ，因为在nodejs容器内部，本地主机中仅运行一个进程:

So, if the nodejs web needs to connect to the database, from inside, must need the ip instead localhost of postgress database because inside of nodejs container, just one process is running in the localhost:

localhost 3001

并使用localhost:5432将不起作用.解决方案是从nodejs容器内部使用postgres的ip:10.10.100.101:5432

And use localhost:5432 won't work. Solution for this is to use the ip of postgres from inside nodejs container : 10.10.100.101:5432

当我们有几个容器(docker-compose)之间相互依赖时，docker会建议我们:

When we have several container (docker-compose) with dependencies between them, docker proposes us :

• 已弃用:容器链接
• Docker网络

• Deprecated: container links
• Docker networks

作为总结，利用这些功能，泊坞窗创建了一种特殊网络".您所有的容器都可以安然无without地离开，而不会出现ips的复杂情况！

As a summary, with these features, docker create a kind of "special network" in which all your container leave in peace without complications of ips!

我认为，Docker链接或网络是一种错觉或欺骗，因为它只能在一台机器上(开发或登台)工作，对我们和其他复杂主题隐藏了依赖关系，而当您的应用离开笔记本电脑时，这是必需的.转到可供用户使用的真实服务器.

In my opinion, Docker links or networks are a kind of illusion or deceit because this only works in one machine (develop or staging), hiding dependencies from us and other complex topics, which are required when your apps leave your laptop and go to your real servers ready to be used by your users.

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

Anyway if you you will use docker-compose for developer or real purposes, these steps will help you to manage the ips between your containers:

• 获取计算机的本地ip并将其存储在诸如 $ MACHINE_HOST 之类的变量中，该脚本应为:startup.sh
• 从docker-compose.json中删除链接或网络
• 使用 $ MACHINE_HOST 引用容器中的另一个容器.

• get the local ip of your machine and store in a var like $MACHINE_HOST in a script like : startup.sh
• remove links or networks from docker-compose.json
• use $MACHINE_HOST to refer another container in your container.

示例:

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
• Finally just run your startup.sh which has the variables and the classic docker-compose up -d

还可以在您的react应用中使用var代替package.json中的proxy来读取api的url:

Also in your react app read the url of your api using a var instead proxy in package.json:

process.env.REACT_APP_API_BASE_URL

检查此，以了解如何从中读取环境变量反应应用程序.

Check this to learn how read environment variables from react app.

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

Here you can find a more detailed steps of how use MACHINE_HOST variable and its use:

• https://stackoverflow.com/a/57241558/3957754
• 在您的docker-compose.json文件中使用变量代替硬编码值
• 分隔您的环境:开发，测试和生产
• 内部版本尚处于开发阶段.换句话说，请勿在docker-compose.json中使用 build .也许对于本地发展可能是一种替代选择
• 在测试和生产阶段，只需运行容器
• 如果您使用代理或环境变量在react应用中读取api的url，则您的构建只能在一台机器上运行.如果您需要在测试，分期，uat等多种环境之间移动它，则必须执行新的构建，因为react中的代理或环境变量是硬编码在bundle.js中的.
• 这不仅仅是响应问题，还存在于角度，角度等中:检查限制1:每个环境都需要在 https://github.com/utec/geofrontend-server 进行修复如果您需要的话，可以参考前面解释的问题(以及其他类似身份验证的问题).
• 如果您打算将网络展示给真实用户，则Web和api必须具有不同的域，当然还有https.例子
  • ecomerce.zenit.com用于您的React应用
  您的php API的
  • api.zenit.com或ecomerce-api.zenit.com
  • Use variables instead hardcoded values in your docker-compose.json file
  • Separate your environments : development, testing and production
  • Build is just in development stage. In other words, don't use build in your docker-compose.json. Maybe for local development could be an alternative
  • For testing and production stages, just run your containers
  • If you use proxy or environment variable to read the url of your api in your react app, your build just will work in one machine. If you need to move it between several environment like: testing, staging, uat, etc you must perform a new build because proxy or environment var in react is hardcoded inside of your bundle.js.
  • This is not a problem just for react, also exist in angular, vue, etc : Check Limitation 1: Every environment requires a separate build section in this page
  • You can evaluate https://github.com/utec/geofrontend-server to fix the previous explained problem (and others like authentication) if apply for you.
  • If your plan is to show your web to real users, web and api must have a different domains and of course with https. Example
    • ecomerce.zenit.com for your react app
    • api.zenit.com or ecomerce-api.zenit.com for your php api

    这篇关于如何通过Docker将API与React App连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！