Dockerize React 应用程序和 Go API - 代理问题

Question

我正在尝试使用 Go API 对我的 React 应用程序进行 dockerize，但遇到了以下错误。

Proxy error: Could not proxy request /api/todos from localhost:3000 to http://localhost:8080.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

所以我在 google 上发现我需要将这些行添加到我的 package.json 中

"proxy": "http://localhost:8080","secure": false,

我已经尝试了上述解决方案的其他几种替代方案，但也没有奏效。

如果我在容器中启动我的 Go API，并且如果我从控制台使用 npm start 启动我的 React 应用程序，它确实可以工作。但是，如果我尝试编写它们，那是行不通的。 任何建议表示赞赏！

我的 docker-compose.yml;

version: '3'
services:
  go:
    build: backend
    restart: always
    ports:
      - '8080:8080'
  react:
    build: frontend
    restart: always
    tty: true
    ports: 
      - "8080:3000"

这是我的后端 docker；

FROM golang:latest
RUN mkdir /app
ADD . /app
WORKDIR /app
COPY main.go . 
RUN go get -v -u github.com/gorilla/mux
RUN go build main.go
CMD ["/app/main"]

还有我的前端 docker；

FROM node:14
RUN mkdir /app
ADD . /app
WORKDIR /app
COPY /package*.json /app
RUN npm install
COPY . /app
EXPOSE 3000
CMD ["npm","start"]

Answer 1

我认为错误是 docker-compose 端口映射

version: '3'
services:
  go:
    build: backend
    restart: always
    ports:
      - '8080:8080'
  react:
    build: frontend
    restart: always
    tty: true
    ports: 
      - "3000:3000"

package.json 中的这个属性

"proxy": "http://localhost:8080"

在开发模式下工作，而不是在生产中

响应代理响应请求到后端

要代理您的请求，我认为您应该使用另一种策略

• 创建一个实现代理的前端服务器（这里是一个例子）https://gist.github.com/saniaky/3a5e68acc2b1ee69ed49b6a3eaee094a

或

• 添加另一个使用 nginx 作为反向代理的容器（这里有一篇文章解释了与您的案例类似的内容https://medium.com/@frontendfoo/docker-react-express-reverse-proxy-15d7b37f8dc2）

version: '3'
services:
  go:
    build: backend
    restart: always
    ports:
      - '8080:8080'
  react:
    build: frontend
    restart: always
    tty: true
    ports: 
      - "3000:3000"

   revproxy:
    build: ../docker-reverseProxy
    image: "reverseproxy:1.0.0"
    ports:
      - "80:80"

server {
  listen 80;
  location /api {
    proxy_pass         http://backend/;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Host $server_name;
  }
  location / {
    proxy_pass         http://frontend;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Host $server_name;
  }
}

使用反向代理，您可以将请求映射到特定路径（例如 /api）到另一台服务器（您的服务器在 :8080 上公开）。

通过 docker compose 进行上述配置，您将在路径 / (:80) 上暴露您的正面，在 /api (:80) 上暴露您的背面

更新

我尝试了我在上一条评论中建议的解决方案，正确的代理配置应该是这个（考虑我建议的第一个策略）

....
    api: {
        target: 'http://go',
        pathRewrite: {
            '^/api': '/',
        },
    },
....

通过这种方式，docker compose 的内部路由将被路由到名为“go”的容器（您在 docker compose 中分配的名称）

Answer 2

当您从 react 容器内向 http://localhost:8080/ 发出请求时，您的系统会检查它是否可以解析该 URI。 问题是唯一可以从 inside react 访问的是端口 3000。在端口 8080 上 react 的本地主机上没有任何内容。 但是，服务go 可以从主机的机器上通过地址http://localhost:8080/ 访问。

Docker 将its own DNS 用于容器，您必须了解它是如何工作的。 要解决此问题，请在 docker-compose.yml 文件中将网络添加到 react 和 go 容器：

version: '3'
services:
  go:
    build: backend
    restart: always
    ports:
      - '8080:8080'
    networks:
      - some_network
  react:
    build: frontend
    restart: always
    tty: true
    ports: 
      - "3000:3000"
    networks:
      - some_network

networks:
  some_network:

既然您的容器可以通信，请将 package.json 文件中的代理更改为：

"proxy": "http://go:8080"

这会将流量定向到端口 8080 上的 go 容器，因为 Docker 将在其嵌入式 DNS 服务器上查找名为 go 的域。