Cannot reach domain defined by server_name

I'm trying to map my backend server at http://api:4000 to my-domain.site, where api is the name of my backend service in docker compose.

I run docker compose up and everything works fine, but I can only access my backend server at localhost, not my desired domain being my-domain.site.

Below are my docker-compose.yml file and nginx configuration file:

docker-compose.yml

nginx:
    image: nginx:alpine
    container_name: nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    command: nginx -g "daemon off;"
    volumes:
      - ./conf.d:/etc/nginx/conf.d
      - ./hosts:/etc/hosts
    depends_on:
      - api

api:
    container_name: backend
    build:
      context: ./backend
      dockerfile: Dockerfile
    command: npm start
    ports:
      - "4000:4000"

conf.d/default.conf

server {
  listen 80;
  server_name my-domain.site;
  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://api:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}