I have the following goal: develop an app with React as Frontend and Java (+ spring-boot) as Backend and use AWS EC2 to put the app on internet.

To do so, I am using the following path:

1. I have my code on my machine: 1 folder with inside 1 folder for the frontend, 1 folder for the backend and 1 folder for nginx. Nginx will be used as reverse proxy. Frontend, Backend and nginx images are on the same docker network
2. I am building docker images and push this images on dockerhub
3. I am accessing my EC2 instance via ssh and pull these images.
4. I run the images on my EC2.

Nevertheless, before achieving this, I first try to make it work locally.
My goal is to run docker and have the frontend able to communicate with the backend.
Since the frontend, backend and nginx are on the same docker network, I used:

• http://frontend:3000
• http://backend:8080

for the communication. I tried it by entering each container and ping the other one: it is working.

Next step is using the browser. To do so I access my website via http://localhost:3000.
I set up the reverse proxy to redirect my demand to http://frontend:3000.
But now nothing is working.

When trying in postman: http://localhost:8080/api/auth/signin is working but the http://localhost:3000 is making calls to http://backend:8080/api/auth/signin and of course, unable to access it.

I know that, when requesting for outside docker, we need to use localhost and inside docker network, we can use specific names.

My issue is how should I configure my reverse proxy to be able to communicate from the browser to inside my docker container?

I could have chosen to put localhost everywhere but then, when I will push everything to me EC2 instance, I will have the same issue. My DNS will try to access backend without having access.

For now my nginx setup is the following:

user nginx;
worker_processes auto;

events {
    worker_connections 1024;
}

http {
  upstream coaching-app-fe {
      server frontend:3000;
  }

  upstream coaching-app-be {
      server backend:8080;
  }

  server {
      listen 80;
      server_name alexia-coaching.com;
      return 301 https://$host$request_uri;
  }

  server {
        listen 80;
        server_name localhost;

        location / {
            proxy_pass http://coaching-app-fe;
            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-Proto $scheme;
            proxy_redirect off;
        }

        location /api {
            proxy_pass http://coaching-app-be;
            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-Proto $scheme;
            proxy_buffering off;
        }
    }

  server {
      listen 443 ssl;
      listen [::]:443 ssl;
      server_name alexia-coaching.com;

      ssl_certificate /etc/nginx/fullchain1.pem;
      ssl_certificate_key /etc/nginx/privkey1.pem;

      # Add TLS configuration as needed (SSL protocols, ciphers, etc.)


    location / {
            proxy_pass http://coaching-app-fe;
            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-Proto $scheme;
        }

        # Backend application
        location /api {
            proxy_pass http://coaching-app-be;  # Docker service name and port
            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-Proto $scheme;
            proxy_buffering off;
        }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
      root   /usr/share/nginx/html;
    }

  }
}

And inside my frontend folder, I have:

#The “nginx.conf” file above defines the settings for the front-end server to be served on port 3000.

server {

  listen 3000;

  location / {
    root   /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
}

I have been working on this for 3 weeks now. So I am not asking without any research.

Thank you very much for any help,

Alexia