Search code examples
reactjsnode.jsdockernginxdeployment

how to use custom domain in nginx, docker

Hi i need some help how to setting custom domain i'm used nginx in docker when i go to my domain it shows Bad gateway

events {
  worker_connections 1024;
}

http {
  include /etc/nginx/sites-enabled/*;
}

server {
    listen 80;
    listen [::]:80;
    
    server_name my-4portfolio.online;

    location / {
            proxy_pass http://frontend:3000;
            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;
    }
}

version: '3'
services:
  frontend:
    build:
      context: ./client
    ports:    
      - "3000:80"

  nginx:
    image: nginx:latest
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/sites-enabled:/etc/nginx/sites-enabled
    depends_on:
      - frontend

i tried to deploy react project it's work on 103.253.72.246:3000 and i need to use custom domain i'm already setting nginx.conf and dns point to my ip but it's not work

Solution

  • You can remove the port binding for the frontend service in the docker-compose file. Since your Nginx server can access the frontend service by name, use the frontend container's default port (port 80) in your Nginx configuration instead:

            proxy_pass http://frontend/;

    I'm unsure how you're currently serving your frontend through port 80 within that container. However, if you only have a frontend application, you can build it into static files and serve them directly from the default Nginx location. This eliminates the need for additional Docker images apart from Nginx.