1. AWS + Spring Boot + React 프로젝트 근데 이제 배포 자동화를 곁들인

0. 목표 및 구조
1. React & Spring Boot
2. AWS S3/EC2
3. 배포 자동화 - Github Actions & AWS CodeDeploy
4. 정리

 

1. React & Spring Boot

구성 조건

React와 Spring Boot 분리

(1)스프링부트 안에 리액트를 종속시키는 구조와 (2)분리하는 구조가 있다.

물론 한 번에 전부 빌드가 되면 개발자 입장에서는 덜 귀찮을 수도 있다.

하지만 내가 사용자일 때 서비스의 서버가 터졌을 때 화면에서 "서버에 문제가 있다"라는 안내조차 없다면?

(사실 개발하는 입장에서도 에러가 발생했을 때 화면이라도 뜨면 정말 기쁘다.)

 

Spring Boot 외부 설정 파일 Profile 분리

저번 글에 언급했던 것처럼 외부 설정 파일 때문에 배포 실수를 한 경험이 있다.

이런 실수를 예방하고 대처하기 위해서는 개발자가 여러번 세심하게 확인하는 방법 뿐일까?

사람의 개입이 적을 수록 문제 발생 확률이 낮아진다면, 과감하게 개입을 덜어내야 한다.

 

 

React, Spring Boot 프로젝트 구현

싸이클 1회를 빠르게 경험해보는 것이 목적이므로 여기서 리액트와 스프링부트는 깊게 들어가지 않는다.

 

개발 환경

React 17.0.2
Spring Boot 2.6.4, Gradle
Window, Eclipse, VSCode

 

구현 과정

이 분의 포스트를 메인으로 참고했다. 구조를 파악하기 쉬웠다.

 

1. React & Spring Boot 설정
2. 코드 작성
3. Axios로 Spring Boot와 통신
4. @CrossOrigin를 사용한 CORS
5. MySQL 설정

 

*설치한 React Router 버전을 확인하자.

위 튜토리얼에서 라우터 동작이 안되길래 찾아보니 버전 차이가 원인이었다.

React Router v6에선 Switch 대신 Routes가 사용된다.

 

https://reactrouter.com/docs/en/v6/upgrading/v5

React Router | Upgrading from v5