React
2 posts
ProjARJS
React
March 09, 2024
AWS EC2에서 Nginx를 이용하여 react 배포하기

AWS EC2에서 Nginx를 이용하여 react 배포하기 편의를 위해 react로 배포했지만 html, css, js파일 등 정적파일만 있다면 배포 가능하다. EC2 인스턴스 생성 AWS 로그인 후 EC2 서비스에 들어간다. 우측 상단에서 리전(region)을 변경할 수 있는데, 나는 서울로 했다. 오하이오, 버지니아 등으로 설정 시 물리적 거리 때문에 통신 속도 차이가 크다. 좌측 메뉴바의 인스턴스 클릭, 우측 주황색 버튼인 인스턴스 시작을 누른다. 인스턴스 이름을 설정하고 인스턴스에서 사용할 운영체제를 선택한다. 나의 경우는 Ubuntu로 했다. 과거 Amazon Linux를 사용한 전적이 있는데, 오류 발생시 정보 찾기도 힘들고 각종 툴들과 호환성이 떨어져 해당 운영체제는 비추천한다. 키 페어는 나의 경우는 RSA .pem을 통해 설정하였다. 굳이 필요하지 않다면 키페어 없이 인스턴스를 시작해도 되나 보안상 좋지 않다. 그 이외 설정 사항들은 전부 기본으로 두고 인스턴스…

Backend
Spring
React
July 11, 2023
Spring React간 CORS 이슈 트러블슈팅(WebMvcConfigurer)

Spring React간 CORS 이슈 트러블슈팅 백엔드 Spring, 프론트엔드 React로 풀스택 개발 중, CORS에러를 마주하여 이에 대한 트러블슈팅 기록을 남겨둔다. 기존에는 React를 빌드한 결과물을 Spring의 경로에 넣고 Spring서버를 실행하면 별 다른 이슈가 발생하지 않았는데, 이번에 React와 Spring을 서로 다른 포트에서 개방할 경우, CORS에러가 발생한다. CORS란? Cross-Origin-Resource-Sharing의 약자로 서로 다른 출처에서 리소스를 공유하는 것을 뜻한다. React클라이언트의 경우, GET방식으로 API를 요청할때 다음과 같은 URL을 사용한다.(포트 3000) 이 URL에서 Origin을 나타내는 부분은 Protocol, Host, Port 부분이다. 즉, 과 은 서로 다른 Origin으로 구분된다. 만약 localhost로 테스트한다고 하면, , 은 서로 다른 origin이다. 스프링부트 서버에 http://lo…