팀프로젝트 진행 후 Nodejs (백엔드)는 cloudtype으로 배포하고,
React (프론트) 는 Netlify로 배포했다.
그러나 Cloudtype에서 제공하는 무료 서버가 매일 서버를 다시 켜줘야하는 문제가 있어서 oracle cloud에서 제공하는 무료 서버 를 이용해서 배포했다.
문제는 그러고 나니, Netlify는 기본적으로 HTTPS를 사용하는 반면, 서버는 HTTP 방식이어서
배포환경에서 프론트와 서버간 통신을 못하게 되었다.
문제 해결
해결방법 1: 서버에 ssl인증 받아서 서버를 https로 바꾸기
서버에 SSL인증을 받아 HTTPS로 바꾸는 방법인데, 이 방법은 인증서를 발급받는데 비용이 들어서 채택하지 않기로 했다. ( 학원에서 교육목적으로 진행한 프로젝트라 비용을 부담하기에는 무리가 있었다. )
해결방법 2: 클라이언트측 설정 바꾸기
2번 방법으로 해결했는데, 이는 임시 방편이니 개발을 공부중인 사람들은 이렇게 해결하는 것을 추천한다.
1. public 폴더에 _redirects 파일 생성
_redirects 파일에는 아래와 같은 텍스트 입력.
/api/* http://{서버주소}/:splat 200
이 설정의 의미는 다음과 같음.
-
/api/*: 프론트엔드에서 /api로 시작하는 모든 요청을
http://{서버주소}/:splat: 이 백엔드 서버 주소로 리다이렉트 -
:splat은 /api/ 뒤에 오는 모든 경로를 그대로 유지
-
200은 성공 상태 코드
예시:
프론트엔드 요청: /api/users
실제 요청: http://{서버주소}/users
2. client 측 api 요청을 다음과 같이 지정
const BASE_URL = import.meta.env.PROD
? "/api" // 프로덕션 환경
: "http://{서버주소}"; // 개발 환경
import.meta.env.PROD는 Vite에서 제공하는 환경 변수로, 현재 애플리케이션이 프로덕션 모드로 빌드되었는지 여부를 나타냄.
삼항 연산자(? :)를 사용하여 프로덕션 환경과 개발 환경에서 다른 BASE_URL을 설정한다.
프로덕션 환경(import.meta.env.PROD가 true일 때)에서는 BASE_URL을 "/api"로 설정한다.
이는 Netlify의 redirects 파일과 함께 작동하여 실제 백엔드 서버로 요청을 프록시한다.
개발 환경에서는 BASE_URL을 직접 백엔드 서버 주소("http://{서버주소}")로 설정한다.
이렇게 설정함으로써 개발 중에는 직접 백엔드 서버에 요청을 보내고, 프로덕션 환경에서는 Netlify의 프록시를 통해 요청을 보내게 된다.
