How do I access FastAPI URL from my docker application?

Question

I have a front end react application hosted on a subdomain (www.admin.example.com). I also have a backend application that uses FastAPI to communicate with the front-end react application. This backend application is deployed using docker. The front end is built using npm run build command and deployed manually i.e build files are copied to the subdomain's root directory.

I am however having issues accessing this FastAPI backend application which is hosted using docker. I have tried using the IP address of my server + the port (https://server_ip_address:8000) but I do not get the response set on the / path from my FastAPI backend. That url (https://server_ip_address:8000), in fact, doesn't load a page. I get the error: This site can’t be reached.

But when I access https://server_ip_address I get a page loaded talking about nginx. I checked the docker logs and there's no error or response from the FastAPI application. I was told docker has it's own IP address too but I tried that and it doesn't work. I also can't access a URL such as https://server_ip_address:8000 from my front-end application else I get a CORS policy error. The overall question is, how do I access my FastAPI application listening on docker?

Docker Compose File:

services:
  db:
    build: .
    ports:
      - "8000:8000"
    expose:
      - "8000"
    secrets:
      - MONGODB_URI
      - LOGIN_SECRET_KEY

secrets:
  LOGIN_SECRET_KEY:
    file: admin_login_secret_key.txt
  MONGODB_URI:
    file: mongo_db_uri.txt

Docker File:

# Use an official Python runtime as a base image
FROM python:3.9

# Set the working directory in the container
WORKDIR /app

# Copy the dependencies file to the working directory
COPY requirements.txt .

# Install dependencies
RUN pip install --no-cache-dir -r requirements.txt

# Copy the content of the local src directory to the working directory
COPY . .

# Specify the command to run on container start
CMD ["uvicorn", "db:app", "--host", "0.0.0.0", "--port", "8000"]

Server nginx.conf File (Only the server setting)

server {
        listen 8080;
    server_name admin.example.com;

    location /backend/ {
            proxy_pass http://127.0.0.1:8000;
            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;
        }
}

I tried accessing like this https://admin.example.com:8080/backend but it doesn't route to http://127.0.0.1:8000.

Answer 1

Please check the following possible reasons:

• You have not configured Nginx properly. If you want to access your FastAPI application via the ip address and 80 port, you will need to configure a reverse proxy mapping port 80 to port 8000.
• Your security policy restricts the 8000 port. Therefore, you cannot access port 8000 externally. That's why https://ip_address:8000 does not work.

Some advice:

• Configure a reverse proxy for your backend instead of trying to access it through ip address and port. Personally, I will put built React file in the www root and proxy /api to my backend server.