Docker Compose - React & Spring & MySQL

이 글은 최주호님의 Youtube 도커 강의를 통해 학습한 내용을 정리하여 작성합니다.

 

 

 

 

Docker Compose - React & Spring & MySQL

구조

---

1. React: 화면 (프론트엔드)

2. Spring: 서버 (백엔드)

3. MySQL: 데이터베이스

 

• Nginx 프록시 서버(80) -> React(3000) -> Spring(8080) -> MySQL(3306)
• Cross-Origin
  • CORS 설정 대신 Nginx에 proxy_pass 설정을 함으로써 Cross-Origin 문제를 해결한다.

 

Cross-Origin
Cross-Origin이란 "다른 출처"를 가리키며, 웹 개발 컨텍스트에서는 한 출처(origin)에서 로드된 웹 페이지나 애플리케이션이 다른 출처의 리소스에 접근하는 것을 의미한다.
출처는 프로토콜, 호스트, 포트 번호의 조합으로 식별된다.
예를 들어, http://example.com:8080과 https://api.example.com은 서로 다른 출처이다.
웹 브라우저는 보안 상의 이유로 Cross-Origin 요청을 제한한다.

기본적으로 웹 페이지나 애플리케이션은 같은 출처의 리소스에만 접근할 수 있다.
하지만 때로는 다른 출처의 리소스에 접근해야 하는 상황이 발생한다.
이 때 Cross-Origin 리소스 공유(CORS, Cross-Origin Resource Sharing)라는 메커니즘이 사용된다.

CORS는 서버가 특정 리소스에 대한 Cross-Origin 접근을 허용하도록 설정하는 방법을 제공한다.
이를 통해 브라우저는 요청의 출처와 서버의 응답 헤더를 비교하여 요청이 허용되었는지를 확인하며, 허용된 경우에만 데이터를 주고 받을 수 있도록 한다.
일반적으로, 서버는 응답 헤더에 Access-Control-Allow-Origin 헤더를 포함하여 어떤 출처에서 요청을 허용할지 지정한다.
예를 들어, 다음과 같이 헤더를 설정할 수 있다: arduino Copy code Access-Control-Allow-Origin: http://example.com
이 헤더는 http://example.com 출처에서 온 요청만 해당 리소스에 접근할 수 있음을 나타낸다.

또한, 다양한 CORS 관련 헤더를 사용하여 요청 메서드, 헤더 등에 대한 제한을 설정할 수 있다.
이렇게 CORS는 웹 애플리케이션에서 다른 출처의 리소스에 안전하게 접근할 수 있도록 하는 동시에 보안을 유지할 수 있는 메커니즘을 제공한다.