码头工人群: React前端无法连接到Kong API网关

Question

我正在进行一个使用微服务的项目，我试图将我的前端与我的后端连接起来，后者是通过Kong API网关提供的。问题是，每当我向服务器发送请求时，我都会得到错误的net::ERR_NAME_NOT_RESOLVED。前端服务与API网关服务在同一个网络中运行，但很明显，DNS解析不起作用。

这就是我如何构建React前端Docker图像的方式：

FROM node:13.12.0-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

COPY . ./

CMD ["npm", "start"]

我是这样从前端发送请求的：

handleLogin(event) {
    event.preventDefault();
    console.log("Log in " + JSON.stringify(this.state.loginForm));
    axios.post(`http://${process.env.API_URL}:${process.env.API_PORT}/api/users/login`, this.state.loginForm)
      .then((response) => {
        const model: LoginModel = response.data;
        this.handleLoginResponse(model);
      })
      .catch((errors) => alert(`Error sending login request to server: ${errors}`));
  }

这是我的stack.yml配置文件，用于Docker群部署：

version: "3.8"

services:
  kong:
    image: kong:latest
    hostname: kong
    environment:
      KONG_DATABASE: "off"
      KONG_DECLARATIVE_CONFIG: /usr/local/kong/declarative/kong-plugins.yml
      KONG_PROXY_ACCESS_LOG: /dev/stdout
      KONG_ADMIN_ACCESS_LOG: /dev/stdout
      KONG_PROXY_ERROR_LOG: /dev/stderr
      KONG_ADMIN_ERROR_LOG: /dev/stderr
      KONG_ADMIN_LISTEN: 0.0.0.0:8001, 0.0.0.0:8444 ssl
    deploy:
      placement:
        constraints: [node.role == manager]
    ports:
      - 8000:8000
      - 8443:8443
      - 8001:8001
      - 8444:8444
    volumes:
      - ../../Kong:/usr/local/kong/declarative
    networks:
      - frontend-network
      - internal
      - logging

  frontend-service:
    image: virusx98/frontend
    environment:
      API_URL: kong
      API_PORT: 8000
    ports:
      - "3001:3000"
    networks:
      - frontend-network

  [...] /* other services */

  
volumes:
  [...] /* volumes for other services */

networks:
  frontend-network:
  [...] /* other networks */

secrets:
  [...] /* secrets for other services */

堆栈在后端完全正常工作。如果我使用Postman发送请求，它们将到达后端服务并返回结果。但是，如果我从前端发送请求，则会抛出上述错误，即使这两个服务都位于同一个网络中，DNS解析应该可以工作。React服务正确读取环境变量，但它表示无法解析主机名kong。我在这里错过了什么？

Answer 1

基于评论的编辑

无法到达API的原因是节点进程没有发送请求。您的浏览器正在发送请求。API必须可以从您(和其他人的)浏览器中访问。在这种情况下，您的URL在javascript中需要是localhost:8000，这样您的浏览器就能够到达kong容器。

最初的答案(只帮助使用env )

react脚本将只从Node加载几个环境变量。从他们的文件：

注意:您必须创建以REACT_APP_开头的自定义环境变量。除NODE_ENV之外的任何其他变量都将被忽略，以避免意外暴露可能具有相同名称的机器上的私钥。

这意味着您必须像这样更新docker-compose.yml：

    environment: 
      REACT_APP_API_URL: kong
      REACT_APP_API_PORT: 8000

这样做，console.log(process.env)就会产生：

{
  "NODE_ENV": "development",
  "PUBLIC_URL": "",
  "FAST_REFRESH": true,
  "REACT_APP_API_PORT": "8000",
  "REACT_APP_API_URL": "kong"
}

尽管如此，您不应该使用react脚本启动用于生产目的。总是做一个生产建设。相反，您应该向项目中添加一个.env文件，以便在构建中注入这些变量。你不能通过对接合成注射它们。

参考资料：

• https://create-react-app.dev/docs/adding-custom-environment-variables/