본문 바로가기
예바의 스터디/개념 정리

[VOISK] Netlify의 프록시 기능으로 HTTP 서버 연결하기

by 예바두비두밥바 2025. 3. 25.

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'로 프록시 요청을 보낸다.