In this post, a brief overview of NBA Player Search Project is shown.

Project Overview

Basic Settings

로컬에서 nginx와 uvicorn 이 동작할 때, main page (http://localhost:8080) 에서 선수 이름(e.g. lebron) 을 검색하면 같은 화면에서 검색 결과(e.g. lebron의 평균득점) 이 보이도록 하는 기본적인 setting과 code는 아래와 같다.

JS

<head>
  <script>
    function doSearch() {
      const query = document.getElementById("searchInput").value.trim();
      if (query) {
          window.location.href = `/api/${query}`;
      }
    }
  </script>
</head>
<body>
  <input type="text" id="searchInput" placeholder="enter nba player name" onkeyup="doSearch()">
</body>

fetch

동기와 비동기 관련 내용은 여기 와 여기 참고.

Interrput 관련 내용은 여기 참고.

NginX

location /api/ {
    proxy_pass http://127.0.0.1:8080;  # FastAPI 실행 포트 (예: uvicorn)
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

Nginx가 실행 중인 서버 자기 자신(로컬호스트)의 8080번 포트.

원래 클라이언트가 보낸 Host 헤더(example.com 같은 것)를 FastAPI 서버로 그대로 전달. 클라이언트 요청의 Host 헤더 값입니다.

클라이언트의 실제 IP 주소를 FastAPI에 전달.

안 하면 FastAPI 입장에서는 모든 요청이 127.0.0.1에서 들어온 것처럼 보입니다.

FastAPI