프론트엔드 백엔드 서로 다른 서버로 수동 배포하고 연결하기(feat. CORS해결)

프론트엔드가 포함된 백엔드 프로젝트 수동 배포하기

지난번에는 프론트엔드가 포함되어 있는 백엔드 프로젝트를 수동배포해서

서비스가 정상적으로 동작하는지 확인해봤다.

이번에는 프론트엔드와 백엔드를 각각 서로 다른 서버로 배포한 뒤

서비스가 정상적으로 동작하도록 해보자.

현재 상황은 위와 같다.

2개의 EC2를 생성하고 하나는 nginx를 설치하고 프론트엔드 소스 코드를 올린다.

나머지 하나는 백엔드 서버로 사용한다.

 

현재 프론트엔드가 있는 EC2의 ip주소로 접속하고 프론트엔드 소스코드를 확인해 보면 

요청을 보내는 URL 주소가 정확히 작성되어 있지 않다.

 

이번 프로젝트는 수동배포에 대해 알아보는 것이기에 굳이 형상관리를 하지 않고,

Vim에도 익숙해질 겸 ssh를 이용해 직접 ec2에 접근해서 요청 주소를 변경했다.

주소는 백엔드 서버의 퍼블릭 ip 주소이다.

 

이후 페이지로 돌아가서 요청을 보내고 개발자 도구에서 확인해 보니 CORS 가 발생했다.

 

CORS(CrossOriginResourceSharing) 란?

간단히 설명하면 CORS는 브라우저의 정책 중 하나로,

브라우저에서 실행 중인 도메인과 요청 대상의 도메인이 다를 때 요청을 차단하는 정책이다.

 

해결하는 법에는 다양한 방법이 있지만

이번에는 아주 간단한 방법 2개만 사용해 봤다.

 

1. @CrossOrigin 사용

첫 번째 방법은 컨트롤러에서 해당 메서드 위에 @CrossOrigin 애노테이션을 붙이는 것이다.

이 방법은 적용한 메서드에만 CORS를 해결하는 방법이다. (클래스 수준에 적용하면 해당 컨트롤러의 모든 메서드에 적용)

만약 전체 API에 대해 CORS를 적용하려면 전역 설정을 해야 한다. (Spring Boot를 사용한다면 WebMvcConfigurer 구현)

 

하지만 이번에는 단순히 CORS를 이해하고 해결하는게 목적이므로 하나의 메서드에만 적용하여 확인해 봤다.

백엔드 소스코드에서 적용할 메서드 위에 @CrossOrigin 애노테이션을 붙이고 속성값으로는 

프론트엔드서버의 퍼블릭 ip 주소를 설정했다.

 

이후 다시 요청을 보내보니 정상적으로 응답이 오는 것을 확인했다.

응답 헤더를 보니 Access-Control-Allow-Origin 헤더필드에 조금 전 CrossOrigin 애노테이션으로

설정한 프론트엔드의 주소가 온 것을 확인할 수 있다.

(브라우저는 POST요청을 보내기 전에 OPTIONS요청(Prefilght)을 미리 보내 응답으로 받은 

Access-Control-Allow-Origin을 확인한 후 CORS가 허용되면 실제 POST 요청을 보냄)

 

2. Nginx 리버스 프록시 사용

다음으로 Nginx의 리버스 프록시 기능을 사용할 수 있다.

리버스 프록시를 사용하면 브라우저는 요청을 Nginx로 보낸다.

이렇게 되면 브라우저 입장에서는 동일한 도메인에 대한 요청이므로 CORS에러를

발생시키지 않는다. 

 

이후 Nginx는 대신해서 백엔드 서버에 요청을 보낸다.

리버스 프록시의 특징은 클라이언트에게 백엔드 서버가 가려진다는 것이다.

덕분에 CORS에 걸리지 않고 정상적으로 응답을 처리할 수 있다.

 

프론트엔드 소스코드가 있는 EC2에 들어가 Nginx의 설정을 바꿔준다.

이때 클라이언트가 /api/ 로 시작하는 요청을 보내면 이를 백엔드 서버로 넘겨줄 수 있도록

proxy_pass를 백엔드 서버 주소로 설정해 준다.

 

그다음 이전에 백엔드 서버의 주소를 입력했던 html 파일로 넘어가서 이번에는 

API 요청 주소를 /api로 시작하도록 변경해 준다.

 

브라우저에서 요청을 보내보면 CORS에 걸리지 않고 정상적으로 응답이 도착하는 것을 확인할 수 있다.

 

 

 

 

참고

https://www.inflearn.com/course/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%B4%88%EA%B0%84%EB%8B%A8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/dashboard