프론트 서버와 백엔드 서버 연결하기
프론트 부분에 백엔드와 비동기 통신하는 부분 추가
스프링 서버 (백엔드)의 yml.type은 prod로 지정이 되어있다.
docker-compose를 실행한다 (아직 프론트는 추가가 안된 상태이므로 db,server만 실행되는 것이 정상이다)
db, server가 동작되는 것을 확인
리액트 서버 실행
npm start
CORS 정책에 의해 통신이 안되는 것을 확인
CORS(Cross-Origin Resource Sharing) : 브라우저에서 다른 출처의 리소스에 접근할 때 발생하는 보안 정책
CORS 해결 : 백엔드 컨트롤러에 crossOrigin 추가
@crossOrigin(origins = "프론트 URI 주소:포트")
docker compose 재실행
프론트 서버와 백엔드 서버 통신이 잘 되었음을 확인
docker-Compose에 frontend 추가
프론트 서버에 ./nginx/nginx.conf 생성 후 백엔드 관련 내용 추가
(nginx.conf : 이전에 nginx의 default.conf에서 복사한 파일)
-
기존의 스프링 서버 server는
backend로 서비스명을 바꿀 것이다 -
클라이언트의 요청 URI가 /를 포함할 경우에 대한
index.html을 렌더링한다.
클라이언트의 요청 URI가 /api/를 포함할 경우에 대한 내용이다.
프론트엔드(클라이언트) -> nginx -> backend(서비스) 이렇게 거치기 때문에 nginx에서 요청 URI에서 /api/를 뺀 결과를 백엔드에게 전달한다
-
이때 nginx는 자바스크립트가 아니기 떄문에 CORS 정책 없이 백엔드로 보내는 것이 가능하다.
-
rewrite는 백엔드에게 요청을 보내기 전에 처리가 된다.
기존 프론트 Dockerfile 내용 중 nginx 관련 내용 추가
- 생성한 nginx.conf를 nginx쪽 폴더로 복사하겠다.
init.sql에 product_tb 관련 DROP 명령어 추가
DROP TABLE if exists product_tb;
docker-compose.yml 파일을 수정한다
-
server의 서비스명을
backend로 바꾼다. -
frontend 서비스 추가
-
frontend는 backend 서비스에 의존하며, db, backend와 같은 네트워크를 사용한다.
proxy_pass를 사용할 것이기 때문에 CORS 관련 내용을 주석 처리한 후 클라이언트 쪽은 "/api/products"에 대한 요청으로 수정한다.
- products: ProductController가 products에 대한 정보를 가지고 있기 때문
let response = await fetch("/api/products")
docker-compose 실행 및 서버 상태 확인
db, frontend, backend 서비스가 잘 구동됨을 확인
- localhost를 검색할 때 '/' URI 접근 시 index.html을 불러오도록 하므로, 그 뒤에 어떤 주소를 입력해도 index.html이 불러와진다.
-
단, URI에
/api/가 있을 시 backend 서비스로 접근을 한다. -
backend에 /product 에 대한 핸들러 매핑이 있어서 db 조회 결과가 출력이 된다.
backend 조회 결과와 동일함을 확인할 수 있다.
