docker - 为什么我得到 Host is unreachable from React code 而不是浏览器？

Question

我在 https://backend.mysite.local 有 Laravel 后端 API并且在 https://backend.mysite.local/api/items

有一个返回项目列表的 URL

当我在浏览器中输入 https://backend.mysite.local/api/items我可以在浏览器上看到 JSON 输出。

但是当我在我的 React 代码中使用 Axios 调用它时，Nginx 会抛出 502 Bad Gateway 错误并显示以下消息:

connect() failed (113: Host is unreachable) while connecting toupstream, client: 172.20.0.1, server: www.mysite.local, request: "GET/api/items HTTP/1.1", upstream: "http://172.20.0.3:3000/api/items",host: "www.mysite.local"

我使用 Axios 进行简单调用:

  axios.get('https://backend.mysite.local/api/items').then(response => {
    console.log(response)
  })

我认为问题在于我如何配置 Docker 和 Nginx。

这是我的docker-compose.yml:

networks:
    mysite:
        driver: bridge

services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx
        ports:
            - "8088:8088"
            - "80:80"  
            - "443:443"          
   
        networks:
            - mysite                

    php:        
        build:
            context: ./laravel
            dockerfile: Dockerfile
        container_name: php
        ports:
            - "9000:9000"
        networks:
            - mysite

    node:
        build:
            context: ./react
            dockerfile: Dockerfile
        container_name: react
        
        ports:
            - "3000:3000"       

        networks:
            - mysite


           

这是我的 Nginx 配置文件:(它有点长，但主要是从 http 到 https 的重定向)

server {
    listen 443 ssl;
    server_name backend.mysite.local;
    ssl_certificate /etc/ssl/mysite.local.crt;
    ssl_certificate_key /etc/ssl/mysite.local.key;
    
    index index.php index.html;    
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location ~ \.php$ {        
        try_files $uri = 404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;

        
        set $METHODS  'GET, POST, OPTIONS, HEAD';
        set $HEADERS  'Authorization, Origin, X-Requested-With, Content-Type, Accept';
        
   
}

server {
    listen 80;
    server_name backend.mysite.local;
    return 301 https://backend.mysite.local$request_uri;

}

server {
    listen 80;
    server_name nginx;
    return 301 https://backend.mysite.local$request_uri;

}



server {
    listen 80;
    server_name www.mysite.local;
    return 301 https://www.mysite.local$request_uri;
}

server {
    listen 80;
    server_name mysite.local;
    return 301 https://www.mysite.local$request_uri;
}

server {
    listen 80;
    server_name localhost;
    return 301 https://www.mysite.local$request_uri;      
}


server {
    listen 443 ssl;
    server_name mysite.local;
    ssl_certificate /etc/ssl/mysite.local.crt;
    ssl_certificate_key /etc/ssl/mysite.local.key;
    return 301 https://www.mysite.local$request_uri;
}


  server {   
    listen 443 ssl;
    server_name www.mysite.local;     
    ssl_certificate /etc/ssl/mysite.local.crt;
    ssl_certificate_key /etc/ssl/mysite.local.key;
    

     location / {      
     proxy_pass      http://node:3000;
      
    }
  }

Answer 1

请使用容器名称从 React 容器连接到您的 php 容器，例如:https://php:9000/api/items通过https://backend.mysite.local/api/items连接时您实际上是通过本地系统的主机配置进行连接的。或者，您可以添加:network_mode: host 到 yml 中的所有容器配置，以使本地容器上的所有内容都可用。