3

I have Laravel backend API at https://backend.mysite.local and there is a URL that returns list of items at https://backend.mysite.local/api/items

When I type in the browser https://backend.mysite.local/api/items I can see the JSON output on the browser.

But when I call it using Axios in my React code Nginx throws 502 Bad Gateway error with the following message:

connect() failed (113: Host is unreachable) while connecting to upstream, 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"

I use a simple call with Axios:

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

I think the problem is with how I configured Docker and Nginx.

This is my 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


           

And this is my Nginx config file: (It's a little bit long but mostly redirections from http to 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;
      
    }
  }

1 Answer 1

1

Please make use of the container name to connect to your php container from react container, like: https://php:9000/api/items When connection through https://backend.mysite.local/api/items you are actuall connecting through host configuration of your local system. Alternatively, you could add: network_mode: host to all your container configs in the yml to make everything available on your local container.

Sign up to request clarification or add additional context in comments.

2 Comments

thank you, php:9000 doesn't work, but nginx:433 does. could it be because of the fact that in my case, the php is not the server, but nginx is and it does fastcgi_pass to the php:9000?
that sounds right, as facgi_pass here would be used to prevent port exposure from the php container

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.