解决React应用程序和Go API之间的代理问题 - Docker化

在尝试将 React 应用程序与 Go API 进行 Docker 化时，用户遇到了代理错误。在尝试了多种解决方案后，发现错误源自 Docker 端口映射配置不当。修改端口映射后，错误得以解决。然而，用户随后遇到了另一个问题，即 React 容器无法访问 Go 容器上的端口 8080。通过在 Docker Compose 中添加一个网络并相应地更新代理配置，这个问题也得到了解决。现在，容器可以相互通信，并且代理能够将流量正确地定向到 Go API。

我正在尝试使用 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).

所以我在谷歌上发现了这个，我需要将这些行添加到我的 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"

这是我的后端泊坞窗；

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

还有我的前端泊坞窗；

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 中分配的名称）

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

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 文件中的代理更改为：

“代理”：“http://go:8080”

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

以上就是《解决React应用程序和Go API之间的代理问题 - Docker化》的详细内容，更多关于的资料请关注golang学习网公众号！