(59) AWS Elastic Beanstalk 5

5. 리액트 연동 확인

* 리액트는 localhost 경로를 이용해서 개발해 왔기 때문에 빈즈톡으로 배포된 API 서버를 이용하기 위해서는 API 서버를 호출하는 경로들을 수정해야만 한다. 리액트 코드에서는 localhost 경로를 최초로 사용했던 todoApi.js를 수정해서 AWS에 배포된 API 서버를 호출하도록 변경한다.

import jwtAxios from "../util/jwtUtil";

// export const API_SERVER_HOST = "http://localhost:8080";
export const API_SERVER_HOST = "http://API서버도메인주소"; // 마지막에 / 를 넣지 않도록 주의!

const prefix = `${API_SERVER_HOST}/api/todo`;

* 리액트 프로젝트를 실행해서 정상적으로 로그인(현재로서는 일반 로그인만 가능)과 todo 등에 대한 작업을 확인한다.

* 로그인 시에는 빈즈톡의 경로를 사용하는지 확인해 본다.

* Products 메뉴에서는 상품등록과 조회를 확인한다. 다만 생성된 환경에서의 ngnix의 기본 설정이 1MB로 제한되기 때문에 이미지 용량이 적은 파일 1개만 이용해야 한다(이에 대한 설정은 뒤쪽에서 진행한다).

---

(1) 파일 업로드의 사이즈 변경

* 빈즈톡에 등록된 API 서버에서 파일 업로드의 사이즈가 줄어든 이유는 빈즈톡의 애플리케이션 실행에 관여하는 Ngnix 웹 서버의 설정과 관련이 있다. 1MB 이상의 파일을 업로드하면 아래와 같은 메시지를 확인할 수 있다.

* Ngnix 설정을 변경하기 위해서는 EC2 환경에 접속해서 /etc/ngnix 폴더에 있는 설정 파일을 수정하는 방법도 있지만, 예제에서는 별도의 명령어 없이 할 수 있는 방법으로 해 볼 것이다. Gradle을 이용해서 bootJar를 실행한 결과로 생성된 jar 파일을 특정한 폴더로 복사해 두고 .platform 폴더 내에 ngnix 폴더와 conf.d 폴더를 생성한다(폴더 이름에 .이 있으므로 주의).

* 생성된 폴더에 client_max_body_size.conf 파일을 생성한다(파일 생성 시 확장자를 주의한다. VS Code 명령어로 생성한다).

* 생성한 client_max_body_size.conf 파일의 내용물은 아래와 같이 작성한다(VS Code를 이용하는 것이 안전하다. 생성되는 파일의 확장자가 .conf 여야 한다).

client_max_body_size 30M;

* jar 파일과 .platform 폴더를 하나의 압축파일로 묶어 준다.

* 작성된 zip 파일은 빈즈톡 화면에서 배포한다.

* 배포 후에는 리액트의 파일의 크기가 1M 이상의 파일들이 업로드가 가능한지 확인한다.

바로 반영되지 않는 부분이 있으므로 재시도해 보는 것이 좋다.

* 배포된 API 서버는 EC2 환경을 활용해서 확인할 수 있는데, /var/app/current 경로가 jar 파일의 경로가 된다. 프로젝트 시에 생성하는 upload 폴더 역시 이곳에 생성된다.

* 이 과정에서 지난번 배포 후에 추가된 이미지들은 모두 삭제된다. 이를 해결하기 위해서는 S3 업로드 방식을 같이 알아 두어야 한다.

---