How to create correct endpoints within an isolated network in Docker, NextJS and Nginx

Question

I have a Docker network that is an isolated network and reverse proxy that serves the NextJS app to the localhost. Unfortunately, fetch to the backend gets failed whenever I open the browser. However, curl http://rustserver-dc:10000/ responds with the data. I do not want the DB and backend to get exposed, only is available from NextJS app when browsing.

Nginx conf:

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  sendfile on;

  upstream api {
    server nextjs-app:3000;
  }

  server {
    listen 80 default_server;

    location / {
      proxy_pass http://api;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
}

docker-compose:

version: '3.8'

services:

  nginx:
    image: nginx:latest
    restart: always
    depends_on:
      - rust-server
      - nextjs-app
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - "80:80"
    networks:
      - app_network
 

  nextjs-app:
    build: 
      context: ./client
      dockerfile: Dockerfile
    container_name: nextjs-app
    environment:
      - CHOKIDAR_USEPOLLING=true
      - DB_USER=${DB_USER}
      - DB_PASS=${DB_PASS}
    expose:
      - "3000"
    networks:
      - app_network

  rust-server:
    build:
      context: ./userserver
      dockerfile: Dockerfile
    container_name: rustserver-dc
    expose:
      - "10000"
    networks:
      - app_network
    volumes:
      - './userserver:/usr/src/userserver'
      - '/usr/src/userserver/target'
    environment:
      - MY_LOG_LEVEL=info
      - MY_LOG_STYLE=Always
      - DATABASE_URL=${DATABASE_URL}
      - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
      - STRIPE_PUBLISH_KEY=${STRIPE_PUBLISH_KEY}
      - ACCESS_TOKEN_SECRET=${ACCESS_TOKEN_SECRET}
      - REFRESH_TOKEN_SECRET=${REFRESH_TOKEN_SECRET}
      - RESET_PASSWORD_SECRET=${RESET_PASSWORD_SECRET}
      - REDIS_URL=${REDIS_URL}

  surrealdb:
    image: surrealdb/surrealdb
    environment:
      - DB_USER=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
    expose:
      - "8000"
    networks:
      - app_network
    volumes:
      - data:/var/lib/surrealdb/data
    command: "start --user ${DB_USER} --pass {DB_PASSWORD} --log full 
file://var/lib/surreal/data"

networks:
  app_network:
    driver: bridge
    

volumes:
  data:

Next js index page:

import Head from 'next/head'
import axios from 'axios';
import { useState, useEffect } from 'react';

export default function Home() {
  const [data, setData] = useState(null);
  useEffect(() => {
    axios.get('http://rustserver-dc:10000')
      .then(res => {
        setData(res.data);
      })
      .catch(err => {
        console.log(err);
      })
  }, []);

  console.log(data);
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div>Welcome to the app</div>
      </main>
    </>
  )
}

Error occurring in console:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED rustserver-dc:10000/:1

Had the same issue when I was trying to connect two nodes in Kubernetes, and exposing only NextJS app via Nginx reverse proxy

The web browser can't resolve rustserver-dc or connect to it as they are both internal to the docker network. The fetch either needs to be proxied from nginx/localhost to rustserver-dc:10000 or mapped through the existing nextjs-app:3000 pathway. — Matt
– Matt, Commented Feb 20, 2023 at 4:19
Thank you for your reply. Do you have an idea how to achieve this? My goal is to achieve that backend & db is not accessible from the browser. — Arturs Radionovs
– Arturs Radionovs, Commented Feb 20, 2023 at 13:59

Matt · Accepted Answer · 2023-02-21 00:54:09Z

1

If you want next to fetch the data on the docker network and send it to the client you could use getServerSideProps to fetch the data when the page is requested, or getStaticProps to retrieve the data build time.

export async function getServerSideProps(context) {
  const res = await axios.get('http://rustserver-dc:10000')
  return {
    props: res.data, // will be passed to the page component as props
  }
}

If you need the client to make requests for rustserver-dc outside of those times, you could add an API route to next that proxies the request onto the rustserver-dc service.

answered Feb 21, 2023 at 0:54

Matt

75.7k11 gold badges172 silver badges167 bronze badges

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

Collectives™ on Stack Overflow

How to create correct endpoints within an isolated network in Docker, NextJS and Nginx

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related