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

问题描述

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

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"]

解决方法

我认为错误是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中分配的名称）

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

Docker 使用 its own DNS 作为容器，你必须了解它是如何工作的。要解决此问题，请将网络添加到 docker-compose.yml 文件中的 http://localhost:8080/ 和 react 容器：

go

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

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:

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

docker docker-compose go reactjs reactjs