Docker-compose issues while exposing frontend through ngrok

Docker Engine Compose
1

Hello everyone, glad to see this beautiful subreddit!

My goal is to set up a frontend & backend inside a Docker Compose and make this app accessible through ngrok. I’ve been stuck pretty hard with organizing my docker-compose, so I believe my setup has some misconceptions. Here is my current setup:

docker-compose.yml

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '3000:3000'
    networks:
      - app-network
    environment:
      REACT_APP_BACKEND_URL=http://backend:3001

  backend:
    build:
      context: ./server
      dockerfile: Dockerfile
    environment:
      PORT=3001
    ports:
      - '3001:3001'
    networks:
      - app-network

  nginx:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - '80:80'
    depends_on:
      - app
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

nginx.conf

http {
  server {
    listen 80;
    location / {
      proxy_pass http://app:3000;
    }
  }
}

Inside the frontend, I’m doing:

fetch('http://backend:3001/').then(console.log)

which leads to ERR_NAME_NOT_RESOLVED. Using localhost:3001 works fine locally, but through ngrok, this setup is not working.
To expose it throught nginx I’m simply using ngrok http 80

The frontend is a Remix-Express app, and the backend is a simple Express Node.js app (no extra magic in Dockerfiles).

2

Try to change backend with localhost

fetch('http://localhost:3001/').then(console.log)
3

Frontend like client side javascript? The internal DNS server will not resolve that for your web browser. Please, read my post here as well, if I was right:

Also

It does not seem to be right either. You can either define a list of env variables using the equals sign or a mapping of key value pairs. What you defined is a string, but I’m surprised it allowed to start the project. Maybe compose supports a string syntax as well? Never tried and never read it in documentation. So valid ways:

    environment:
      - PORT=3001

or

    environment:
      PORT: 3001
1 Like
4

Thank you for sharing so comprehensive answer!

My goal is to wrap whole application into docker-compose and expose it through ngrok.
Client means web-app like React | Angular (whatever). I want to share locally hosted app through ngrok

Could you share please strategies | examples I could use to achieve this behavior. My docker knowledge unfortunately quite low, any help will be appreciated

6

As I often say, Docker is not a magic wand. client-server relationships still exist. Your webbrowser will have to communicate with the backend over network. There is no different stategy for that in docker containers. Docker just runs your server applications in an isolated way. The answer I shared from the other topic is all I can say about the problem. Please, point out which part you don’t understand if you feel you still need more help.

1 Like
7

example of my setup : GitHub - SirSerje/test-docker-compose
I can provide more information if needed

8

Of course, I understand that there is no magic behind docker :slight_smile:
My goal is to find strategy which will allow me to expose my app through ngrok with isolation from other env

9

in my case I changed nginx config:

    listen       80;
    server_name  localhost;
    location / {
        proxy_pass   http://app:3000;
    }

    location /api {
        proxy_pass   http://backend:3001;
    }

}

and called /api from the frontend end which is sufficient. thank you so much for the help