JAVA Spring boot) 소비기록앱 소비일기 서버(Backend) 개발일지 7 - CORS를 해결하기 위한 여정
- 작성일 : 2022.09.04
-
작성자 : 황시아
- 팀원 : 박승지(Frontend), 황시아(Backend)
- GitHub Repository : https://github.com/miro7923/soil
개발환경
- MacBook Air (M1, 2020)
- OpenJDK 11
- IntelliJ IDEA Community Edition
- Spring Boot 2.7.3
- MySQL Workbench 8.0.28
기간
- 2022.8.15 ~
주제
- 오늘의 소비에 대한 기억과 감정을 기록으로 남기고 나중에 되돌아보는 시간이 있었으면 좋겠다는 생각에 진행하게 된 프로젝트이다.
- 새로 산 물건의 사진을 찍고 그에 대한 감상을 함께 글로 남길 수 있는 기능을 메인으로 제작할 것이다.
진행상황
- 프론트와 백엔드로 나눠서 개발을 진행하다 보면 반드시 만나게 되는
CORS문제… 우리도 피해가지 못했다. - 한 줄 요약하면 그냥
AWS써서REST API서버를 구축하는 것이 속편하다…! 저거 세팅하기 귀찮다고 다른 방법으로 하다가 시간을 아주 많이 소모했다.
시작 전에 원했던 것
- 백엔드에서
REST API서버를 만듦 -> 프론트에서 요청을 보내고 응답을 받는다. - 원하는 것은 아주 심플한데 이렇게 만드는 과정은 심플하지 못했다. 왜냐면 프론트 개발자와 백엔드 개발자가 서로 다른 네트워크를 쓰기 때문에 프론트에서 내가 만든 로컬 서버에서
JSON데이터 응답을 받을 수 없었다. - 추후 출시 단계에서는 아무 문제가 되지 않는데 개발 단계에서 서로 사용하는 네트워크가 다르다 보니 이 고생을 하게 된 것이었다.
REST API 서버 구축 시도 1
- 처음에는 내가
REST API서버를 로컬 서버를 띄운 다음 이걸 포트포워딩 시켜 외부에서 접근하게 하려 했다. - 그래서
ngrok을 사용해 포트포워딩을 시켰다.
- 포스트맨으로 포트포워딩 주소로 요청을 날려본 결과 응답이 잘 왔기 때문에 그대로 쓰려 했다. 하지만… 프론트에서 브라우저에서 포트포워딩 주소로 요청을 보내니까
CORS에러가 떴다. - 원인 분석 결과 포트포워딩 시키는 주소에서
Access-Control-Allow-Origin헤더가 붙지 않는 것이 문제였다.
REST API 서버 구축 시도 2
- 그래서
Access-Control-Allow-Origin헤더를 붙여줄 프록시 서버를 알아봤다. - 프록시 서버를 사용하니까 요청에 대한 응답 자체는 성공적으로 오는데 문제는
- 제이슨 데이터가 제대로 변환이 되지 않는 것이었다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
-
이게 로컬 환경에서는 아무 문제없이 잘 되는데 프록시 서버를 타면서 문제가 생기는 것 같았다. 결국 프론트 개발자는 외부 네트워크에서 접근해야 하기 때문에 이 방법도 쓸 수 없었다.
- 여기서 생각해 볼 수 있는 해결방안은
- 프론트 개발자에게 서버 프로젝트 파일을 다운받아서 로컬 서버를 띄워 작업하라고 한다.
- 또다른 방법을 찾아본다.
- 이렇게 두 가지가 있었는데 1번은 너무 비효율적이라 할 수 없었다. 아직 서버 개발이 끝난 상태도 아니고 서버에 새로운 개발사항이 생길 때 마다 프론트 개발자도 프로젝트를 새로 다운받아야 하고… 굉장히 비효율적이고 의미도 없다.
- 그래서 새로 생각한 방법은 돌고돌아!
AWS EC2로REST API서버를 구축하는 것이었다.
REST API 서버 구축 시도 3
- 결국 돌아온
AWS - 처음에
AWS를 사용하지 않았던 이유는 예전에 사용할 때 프리티어라도 월말이 되면 사용량을 살짝 초과했다면서 몇백원씩 부과가 되는 것이었다. 이것이 기분이 나빴다.(^^….) -
그래서 최대한 다른 방법들을 찾았는데 돈을 쓰는만큼 편한 서비스인건 맞으니까..
- [REST API 실습] 4. Springboot 프로젝트 AWS EC2 인스턴스에 배포
- 5) 스프링부트로 웹 서비스 출시하기 - 5. EC2에 배포하기
- 위 블로그 글들을 참고해서
AWS EC2로 서버를 만들었다.
-
잘 된다. 역시 (프리티어지만)유료 서비스가 편하다…
-
이 과정에서 주의사항이라면
EC2에Ruby를 설치할 때2.x버전을 사용해야 한다는 것이다. 처음엔 몰라서 최신버전(3.x)으로 자동 설치했다가
- 너 루비 버전 낮추라는 메세지를 봐야만 했다. 휴…. 그래서 짜증나서 인스턴스 날리고 다시 만듦 ㅠㅠ
-
다시 세팅하는 과정에는
Ruby 2.7.5버전으로 설치했다. 이러니까 잘 됨 - 그런데 아직은 수동배포와 백그라운드 실행까지만 성공한 상태라 자동배포도 추가하고 싶었다. 메인 브랜치에 푸시만 하면 자동으로 업데이트 받아서 실행하도록!
- 6) 스프링부트로 웹 서비스 출시하기 - 6. TravisCI & AWS CodeDeploy로 배포 자동화 구축하기
- 그래서 이 글을 참고해서 진행했는데 나는 막히는 것이었다…
- ㅠㅠ
- 역할 만드는 과정에서 뭘 잘못한 걸까… 여기까지 하고 잠깐 멈춰있는 상태이다. 시간 있을 때 한 번 더 시도해 보기로 하고 당분간은 수동배포로 살아야 할 것 같다.
정리
- 개발단계에서 프론트 - 백엔드 통신시
CORS를 만난다면 그냥AWS EC2로REST API서버 구축해서 사용하자! 괜히 로컬서버를 포트포워딩 시킨다고 고생하지 말고…