React, Spring Boot + AWS 도커 배포+ EC2 도메인 적용

- AWS 서버 생성

 

서버 생성 과정은 : https://baam-ki.tistory.com/category/IT/AWS 를 참고

 

AWS EC2

서버 접속 완료.

 

- Dockerfile 생성

 

Front 도커 설정

 

Dockerfile을 이용하여, Front 단 도커파일 설정을 해준다.

 

Back 도커 설정

 

Dockerfile을 이용하여, Back 단 도커파일 설정을 해준다.

 

 

- Docker Hub를 통해 Repository 생성

 

도커 리포지토리 생성

 

Docker로 배포를 하기 위해 Front,Backend 리포지토리 생성

 

 

- Docker Hub에 Push,  Pull

 

React 파일과, Spring Boot 파일을 모두 빌드한 후에, 로컬에서 Push 하여, AWS에서 Pull 하는 방법을 선택.

 

-FrontEnd 로컬에서 Build, Push

Build

push

주의할 점 : M1 맥북을 사용하는 사용자들은 --platform linux/amd64 옵션을 필수로! 적용시켜야 한다.

( 적용하지 않으면, 서버에서 실행할때 문제가 생긴다. == 위 작업을 공짜로 한 번 더 해야한다. )

 

 

-BackEnd 로컬에서 Push

 

build

push

앞 과정과 같게, 빌드 이후 push까지 해준다.

 

리포지토리 확인

build와 push 명령어를 보았을때 qjarl1119/kfa_docker_frontend:first로 빌드.푸시한 것을 확인할수 있는데,

qjarl1119/kfa_docker_frontend:first => 아이디/리포지토리이름:태그 이름으로 초기화한 것이다. 

 

사진과 같이 first 태그로 잘 Push된 것을 확인할 수 있다.

 

 

 

- AWS에서 Pull, 실행

 

-FrontEnd EC2 실행

 

pull, 실행

이전에는 docker pull qjarl1119/kfa_project~~~~ 로 pull 이후 실행을 했지만, 바로 run을 시켜주었을때 알아서 pull 까지 해주는 것을 확인 - Front 부분은 포트 80으로 오픈하였다.

 

 

-BackEnd EC2 실행

 

pull, 실행

 

-BackEnd 스프링 부트는 8080포트로 열었다.

 

서버를 통해 배포

EC2서버, Docker 를 통해 배포 완료!

 

- 오류

Docker 배포를 진행하면서 크게 3가지 오류를 경험했다.

 

1. 서버 localhost:8080에서 받지 못하는 오류. 

 

스크린샷을 찍지 못했는데, 서버에서 실행시에 계속 localhost에서 받지 못하는 것을 알았다. localhost:8080에서 받아오던 api 값 주소를 서버주소:8080으로 변경 후 에러가 해결되었다.

 

2. CORS 에러.

CORS 에러

누구나 한 번 겪어 봤을 오류라고 생각하는 CORS에러이다. 이전에는 로컬환경에서는 Spring Boot Controller에서 CrossOrigin("*")로 CORS에러를 잡았는데, 서버로 배포를 하려고하니, CORS에러가 발생했다. 

 

CORS 에러 해결

@SpringBootApplication 하단, corsConfigurer를 추가하여, 문제 해결.

 

 

3. REST API Method 에러.

 

Method 에러

배포 이후, REST API GET POST 요청은 문제 없었지만, PUT,DELETE 메소드를 진행할시 CORS 에러가 발생하는 것을 확인했다.

 

Method 에러 해결

 

corsConfigurer에 allowdMethods를 이용하여, Method를 추가하여 문제를 해결!

 

도커 배포 영상 : https://www.youtube.com/watch?v=2MNqjwAgDrU 

 

 

- 배포도 했으니 도메인 적용

 

도메인 적용 과정

 

1. 해당 EC2에 탄력적 IP 적용

2. Hosting KR을 통해 도메인 구매 (studybeom.xyz)

3. 탄력적 IP와 도메인 연결

4 배포 주소 : http://www.studybeom.xyz/ 확인