(62) AWS Elastic Beanstalk 8

8. 리액트 애플리케이션의 배포

* 로컬 환경에서 실행한 리액트 애플리케이션이 정상적으로 동작했다면 남은 작업은 빈즈톡을 이용해서 예제 애플리케이션을 배포하는 것이다. 리액트 애플리케이션을 배포할 수 있는 방법은 S3를 이용해서 업로드하거나, Amplify 서비스를 이용해서 GitHub의 저장소를 배포하는 등의 다양한 방법이 있다. 

* 빈즈톡은 Node.js 기반의 코드를 업로드하면 자동으로 npm install 이나 npm start 등을 수행해 주기 때문에 간단하게 리액트 프로그램을 배포할 수 있다.

* 프로젝트의 폴더 구조에서 node_modules를 제외한 파일들을 압축해서 zip 포맷의 파일로 생성한다(파일 이름은 크게 중요하지 않다).

* 빈즈톡에 새로운 애플리케이션을 생성한다. 이때 플랫폼은 Node.js를 선택한다.

* 플랫폼의 생성 시에 코드를 압축한 파일을 선택한다.

* 이후 서비스 엑세스 구성은 기존에 만든 역할들을 이용해서 환경설정을 마무리 한다.

* 리액트 애플리케이션의 배포에는 상당한 시간과 메모리를 사용하기 때문에 배포가 완료될 때까지 기다려 주는 것이 좋다.

* free-tier의 경우 정말 에러가 많이 발생한다. 대부분의 에러는 free-tier 환경의 경우 메모리가 1GB 밖에 되지 않기 때문이다. 이런 경우 아예 처음부터 npm build한 결과를 정적으로 배포하는 방법도 고려해볼만 한다.

* 리액트 애플리케이션의 배포가 완료되면 애플리케이션의 URL을 통해서 동작을 확인할 수 있다.

---

(1) 카카오 로그인 설정 변경

* API 서버와 리액트 애플리케이션의 정상적인 동작을 확인했다면 카카오 설정을 변경해 준다. 우선 카카오 애플리케이션의 설정 도메인을 배포된 주소로 수정한다.

* Redirect URI 는 리액트 애플리케이션의 실행 주소를 추가한다(뒤에 /member/kakao 경로가 추가됨).

* 리액트에서 카카오 로그인을 띄우는 KakaoLoginComponent의 주소를 변경해 준다.

import axios from "axios";
import { API_SERVER_HOST } from "./todoApi";

const rest_api_key = `aaaaaaaaaaaaaaaaaaaaaaaa`;

// const redirect_uri = `http://localhost:3000/member/kakao`;
const redirect_uri = `http://reactserver1-env-1.(...).elasticbeanstalk.com/member/kakao`;

const auth_code_path = `https://kauth.kakao.com/oauth/authorize`;
const access_token_url = `https://kauth.kakao.com/oauth/token`; // 추가

* 변경된 코드를 다시 압축해서 배포한다.

* 프리티어 환경에서는 다시 말하지만 메모리가 부족하므로 가능하면 배포 중간에 외부에서 호출하지 못하도록 주의해야 한다(리액트가 실행중인 브라우저를 종료하는 것을 권장함). 만일 중간에 제대로 배포가 되지 못하면 504 Gateway Time-out 메시지 화면을 출력한다. 여러 번 배포가 되지 않는다면 실행 환경의 로그 메뉴를 확인하여 원인을 파악해야 한다.

* 이래도 문제가 해결되지 않는 경우 Node 플랫폼으로 빈 애플리케이션을 생성한 후에 카카오 개발자 사이트를
  해당 서버의 주소로 변경한 후에 리액트 애플리케이션 파일을 한 번만 업로드 해보는 것이 좋다.

* 배포 후에는 배포된 환경에서 카카오 로그인을 확인하면 모든 프로젝트는 완료된다.