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

Question

我正在尝试使用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"]

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;
  }
}

使用反向代理，您可以将请求映射到另一个服务器(您的服务器在:8080上)的特定路径(例如，/api)。
通过docker compose的上述配置，您将在path/(:80)上暴露自己的前面，在/api(:80)上暴露您的后面
更新
我尝试我在最后一条评论中建议的解决方案，正确的代理配置应该是这样(考虑我建议的第一个策略)

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

这样，docker compose的内部路由将被路由到名为“go”的容器(您在docker compose中分配的名称)