Netlify란 무엇일까?
Netlify는 정적 웹 호스팅 및 웹 개발 서비스를 제공하는 플랫폼으로, 손쉽게 프론트 배포가 가능하다. 정적 웹 호스팅은 HTML, CSS, JavaScript와 같은 정적 파일을 서버에서 별도의 데이터베이스나 백엔드 로직 없이 클라이언트에게 전달하는 방식이다.
그렇다면 Netlify로 백엔드 로직 구현이 불가능할까?
아니다, Netlify + API 호출로 백엔드 로직 구현이 가능하다!
Netlify로 HTTP 서버에 바로 연결하면 안돼?
Netlify은 기본적으로 HTTPS를 사용하며 이때 HTTP 서버로 API 요청을 하면 보안 정책에 따라 요청이 막혀 오류가 발생한다.
클라이언트 → Netlify API 요청 (HTTPS) → 서버 (HTTP)
어떻게 해결해야할까?
이를 해결하기 위해, 우리가 어떻게 접근할 수 있을까?
1. 서버를 HTTPS로 변경
일반적인 방식으로 서버를 안전한 HTTPS로 수정하는 방안이 있다. Let's Encrypt 같은 무료 SSL 인증서를 이용해 서버에 설치하여 해결할 수 있으며 보안 상으로도 추천하는 방식이다. 하지만, 백엔드 팀원과 시도해보았지만 'ERR_CERT_AUTHORITY_INVALID' 에러가 계속 발생하여 프론트엔드 측에서 변경해보기로 하였다.
2. Netlify의 프록시 사용
Netlify로 프론트엔드를 배포하기에 Netlify를 HTTP로 변경할 수 없다. 그래서 Netlify의 프록시 기능을 사용하여 Netlify의 서버를 매개로 API 요청을 전달할 수 있다.
클라이언트 → Netlify API 요청 (HTTPS) → Netlify 프록시 서버 (백엔드) → 서버 (HTTP)
Netlify 프록시 기능으로 요청 경로를 외부 서버로 리디렉션할 수 있도록 하여 HTTPS 서버가 아니더라도 API 요청이 가능하다!
HTTPS 보안 통신은 Netlify와 브라우저 간에서만 유지되고 백엔드 서버는 SSL 인증서를 사용할 필요가 없다는 점을 이용하여 이와 같은 방식으로 프론트엔드 측면에서 해결할 수 있다.
Netlify에서 어떻게 설정해야 하는데?
_redirects 파일 생성 후 아래의 코드를 추가하면 된다.
/api/* http://211.000.00.00:8080/:splat 200
- /api/* : 사용자가 요청하는 API (코드에 따라 변경 가능)
- http://211.000.00.00:8080/:splat : Netlify가 프록시 서버로 요청
- 200 : 프록시 동작을 의미 (요청을 대신 서버에 보내서 응답을 그대로 사용자에게 전달해라)
EX. 사용자가 '/api/hello'로 API 요청을 보내는 경우에 Netlify가 'http://211.000.00.00:8080/hello'로 프록시 요청을 보낸다.
'예바의 스터디 > 개념 정리' 카테고리의 다른 글
[INSIGHT] Pytorch Profiler로 모델의 메모리 연산 및 실행시간 분석하기 (1) | 2025.02.20 |
---|---|
[투버킷] HTTP 서버의 React Native Android APK 빌드하기 (1) | 2025.01.31 |
[컴파일러] FOLLOW(𝞪)의 개념과 예제 (2) | 2024.10.13 |
MLFF(Machine Learning Force Fields)의 개념과 모델 (6) | 2024.09.17 |
[컴파일러] FIRST(𝞪)의 개념과 예제 (2) | 2024.09.16 |