CODEWITHSUNDEEP
reactjsdockergonginxamazon-ec2
Alp Tahta
Alp Tahta

Reputation: 85

How to send request from react app inside nginx which is inside docker container to golang webservice which is inside docker container on same AWS EC2

Currently I have two container inside AWS EC2 instance.One of them is React app. It uses nginx. This app should send request to golang web service which is inside another container. They are both in same EC2 instance. When i open browser and go to EC2 instance's public IP address i am able to see my React app is working. When i try to send request to golang web service it says that "(failed)net::ERR_CONNECTION_REFUSED". I am able to use curl request inside EC2 and receive response. How can i do the same on React Request.

Here is the my axios post

axios.post('http://localhost:9234/todos', { "name": todo, "completed": false },).then((res) => {
      console.log(res)
      if (res.data.todo.name === todo) {
        setTodos([...todos, todo]);
      }
    }).catch((err) => { console.log(err) });

Here is my request with curl

curl -d '{"id":9,"name":"baeldung"}' -H 'Content-Type: application/json' http://localhost:9234/todos

Here image for docker networks Thanks for helps

Upvotes: 0

Views: 459

Answers (2)

Dipto Mondal
Dipto Mondal

Reputation: 764

As @Daniel said javascript gets served to the browser and it runs there. So when your browser requesting the address localhost it actually means your computer's localhost. To access the golang server you need to forward the 9234 port from the docker container.

services:
  web:
    ports:
      - "9234:9234"

And then also you need to open the 9234 port in firewall of your ec2 instance then you can access your go server using the public address of your ec2 from your browser.

axios.post('http://{{public_address_of_Ec2}}:9234/todos', { "name": todo, "completed": false },).then((res) => {
      console.log(res)
      if (res.data.todo.name === todo) {
        setTodos([...todos, todo]);
      }
    }).catch((err) => { console.log(err) });

But this is not recommended to expose the ports to access your server. You may use nginx to listen on your port 80 and then load balance the requests to your go server. Here is a yaml you can add in your docker-compose to use nigx:

nginx:
    image: nginx:latest
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
    depends_on: 
      - web #your web app service name
    ports: 
      - "80:80"
    networks: 
      - "web.network" #your existing network name

And the nginx conf should be:

user nginx;
# can handle 1000 concurrent connections
events {
    worker_connections   1000;
}
# forwards http requests
http {
        # http server
        server {
              # listens the requests coming on port 80
              listen 80;
              access_log  off;
              # / means all the requests have to be forwarded to api service
              location / {
                # resolves the IP of api using Docker internal DNS
                proxy_pass http://web:9234;
              }
        }
}

Upvotes: 1

erik258
erik258

Reputation: 16302

from your details it seems likely that one or more of the following is true:

  • you do not have port 9234 forwarded to the container
  • you do not have port 9234 open in the EC2 instance's security group

Furthermore, localhost as @Jaroslaw points out is from the persective of the browser. That localhost should also be the IP of the ec2 instance or dns that resolves to that IP.

To be clear, the react webapp doesn't run on the ec2 instance. Its static assets such as DOM elements and Javascript get served to the browser and it runs there.

Upvotes: 1

Related Questions