배포 과정(EC2(ubuntu) + RDS + React + Spring + Apollo)

MINK·2022년 11월 11일

카카오 프렌즈샵 구현해보기(EC2 + RDS + Spring(Gradle) + Apollo + React)

목록 보기

4/4

배포 과정(EC2(ubuntu) + RDS + React + Spring + Apollo)

1. RDS 생성 및 mysql 연결

참고 사이트

2. EC2 생성

Amazon ec2 접속
AWS REGION - 지역 서울로 바꾸기
인스턴스 시작
1. 이름 (kokoashop)
2. 애플리케이션 및 OS 이미지
  1. 서버 구성단계에선 우분투부터 시작한다.(ubuntu)
3. 인스턴스 유형 (t2.micro)
  1. 스펙이 좋을수록 과금이 더 많아지기에 낮은 걸 선택
4. 새 키 페어 생성 (kokoashop)
  1. ssh에 접속하기위해선 키 페어 생성해야함.
  2. 키 페어 유형(RSA)
  3. 프라이빗 키 파일 형식 (.pem)
5. 네트워크 생성
  1. 보안 그룹 생성
  2. ssh트래픽 허용 -> 내 IP 자동 설정
6. 스토리지 구성
  1. 30GB 고정
탄력적 IP
1. 외부에서 인스턴스에 접근 가능한 고정 IP
2. 단, 만들어 놓고 사용하지않으면 과금이 되기때문에 필요한 만큼만 생성할 것
  
  탄력적 IP 메뉴 -> 탄력적 IP 할당 -> 할당 -> 탄력적IP 주소 연결 -> 인스턴스 및 프라이빗 IP 주소 선택 후 연결
SSH 클라이언트
1. 만든 인스턴스 클릭 후 연결 SSH 클라이언트 접속 -> 예로 보이는 ssh -i ~~amazonaws.com 복사
2. cmd or window powershell 실행 후 키 페어 파일 위치로 이동

복사한 내용 붙여넣기

실행완료

보안그룹 설정
1. 현재 react와 apollo, spring을 사용하기때문에 3개의 포트를 열어줘야함
2. EC2메뉴에서 네트워크 및 보안 안에 보안그룹 클릭 -> 보안 그룹 생성 -> 규칙을 추가 후 아래와 같이 작성 및 저장

다시 인스턴스로 돌아가서 생성했던 인스턴스 클릭 후 보안 -> 보안 그룹 변경 -> 기존 보안 그룹 제거 후 만들었던 보안그룹 추가 및 저장

참고 사이트

ec2 생성 및 배포

3. ubuntu에서 배포

01. spring 배포단계

// 패키지들 초기 업데이트
sudo apt-get update
// gradle 최신버전 설정단계
VERSION=7.5
wget https://services.gradle.org/distributions/gradle-${VERSION}-bin.zip -P /tmp
sudo unzip -d /opt/gradle /tmp/gradle-${VERSION}-bin.zip
// gradle 버전 호환
sudo ln -s /opt/gradle/gradle-${VERSION} /opt/gradle/latest
// java11버전 설정
sudo apt-get install openjdk-11-jdk
// git 설치
sudo apt-get install git
// git repository 호출 
git clone https://github.com/raw20/kokoafriends.git
// gradlew 권한 설정
sudo chmod  777 ./gradlew
chmod +x gradlew
// gradle이 빌드하는데 필요한 버전을 자동설치
gradle wrapper --gralde-version 7.5
./gradlew build
//배포
java -jar back-0.0.1-SNAPSHOT.war

참고 사이트

gradle 최신버전

02. apollo 배포단계

//설치 및 실행
npm install
npm start

--error--
// SyntaxError: Unexpected token '.'
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

03. react 배포단계

// 배포 전 설치
sudo apt-get update
sudo apt-get install curl
// node 버전은 각자 맞는 버전으로 설치
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y node.js
sudo apt-get install npm

// 버전 확인
npm -v
node -v

// 폴더로 들어간 후 설치
cd [폴더명]
npm install --force

// 기존에는 local로 백엔드와 통신 테스트를 해봤기때문에 proxy를 바꿔준다.
[package.json] 
"proxy": "http://3.39.166.0:8080/"

//.env 파일은 보안상 clone할 때 없으므로 따로 만들어줘야한다.!

// 만약 카카오로그인을 할 시 로컬로 통신했던 부분들을 다 바꿔줘야한다.
export const CLIENT_ID = process.env.REACT_APP_REST_API_KEY;
export const ADMIN_KEY = process.env.REACT_APP_ADMIN_KEY;
export const REDIRECT_URI = "http://3.39.166.0:3000/oauth/callback/kakao";
export const LOGOUT_REDIRECT_URI = "http://3.39.166.0:3000/oauth/callback/kakao/logout";
export const BASE_URL = "http://3.39.166.0:8080/api";

// 실행
npm run build
npm start

오류

// 1.빌드시 GENERATE_SOURCEMAP 옵션을 끄기
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false npx react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "nodemon apolloServer.ts"
  }

// 2. 메모리 스왑을 통한 메모리 부족 현상 해결
// 메모리 스왑 확인
free

// 단, 가상 메모리를 쓰게 되면 퍼포먼스의 문제는 해결. 임시방편 용도임.
// 사양을 올리는 걸 강추
sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048

sudo mkswap /mnt/swapfile

sudo swapon /mnt/swapfile

// 스왑 메모리 해제 방법
sudo swapoff -v /mnt/swapfile
sudo rm /mnt/swapfile