[React/Vite] 로컬과 배포 서버의 api request URL이 다를 때

🚨문제상황

: 배포서버와 로컬환경에서 api를 호출하는 URL이 다름 (여기서 상태 코드는 상관x)

1. 다른 api에서는 로컬과 서버의 api 요청 주소가 같음 

2. '썸네일 조회 api만 주소가 다르게 감 

=> 의심되는 점 : 썸네일 조회 부분만 api 요청 주소를 직접적으로 호출함

왼쪽이 배포서버, 오른쪽이 로컬환경

 const [imageError, setImageError] = useState(false);

 const thumbnailUrl = `${import.meta.env.VITE_API_BASE_URL}/api/teams/${teamId}/image/thumbnail`;

-> 문제 의심 코드 : 썸네일을 조회하는 api가 주소 형태로 오기 때문에 api 함수를 따로 만들지 않고 base url과 api 주소를 같이 적어 바로 호출되도록 해둠 

 

✅ 가설 

1. 로컬에서는 코드대로 호출됨 -> 코드에는 문제가 없음

2. 배포하면서 기존 api 코드 앞에 contest/undefined 부분이 갑자기 붙여져서 호출됨 -> 백엔드 문제 or 배포 서버 문제이지 않을까?

 

✏️ 해결

문제 코드에서 import를 UI 구성하는 부분에서 직접적으로 사용하게 되면 로컬에서는 설정해둔 base url 대로 설정이 가겠지만,

배포 서버에서는 import를 하는 과정에서 다른 api들과 꼬여 base url 이 내가 아는 것과 다르게 갈 수도 있다. (특히 지금처럼 풀로 개발하는 게 아니라 프론트의 상황만 아는 거라면!)

=> import를 안 할거면 실제 서버 도메인 주소가 바로 들어가도록 예외 처리를 해두기! 

export const getThumbnailTeams = async (teamId: number) => {
    const baseUrl = import.meta.env.VITE_API_BASE_URL || 'https://asdf.kr(임의)';
    try {
        const response = await apiClient.get(`/teams/${teamId}/image/thumbnail`);

        if (response.status === 200) {
            return `${baseUrl}/api/teams/${teamId}/image/thumbnail`;
        } else if (response.status === 202) {
            return null;
        }
    } catch (error: any) {
        if (error.response?.status === 404) {
            return null;
        }
    }
};

상태코드 200(ok) 일 때만 api 주소를 base 뒤에 오도록 설정한다 

  const [thumbnailUrl, setThumbnailUrl] = useState<string>(basicThumbnail);

  useEffect(() => {
    const fetchThumbnail = async () => {
      const url = await getThumbnailTeams(teamId);
      if (url) {
        setThumbnailUrl(url);
      }
    };
    fetchThumbnail();
  }, [teamId]);

외부에서 설정한 api 함수를 호출하여 사용한다. 

 

정리

사실 서버와 백 코드까지 분석하거나 개발에 참여를 했다면 프론트에서 처리할 수 있는 것 말고도 근본적인 문제를 찾을 수 있었겠으나, 아직 그런 레벨은 아니기 때문에 나의 위치에서 할 수 있는 예외 처리들은 놓치지 않고 하는 것이 목표이다. 추후 해당 문제의 직접적인 백 코드를 발견한다면 추가해 두도록 하겠다!