AWS EC2에 리액트 스프링부트 배포

와... 이거 배포하는데 3일의 시간을 들임... 온전히 하루의 모든시간을 다 써서 3일이라는 거임.

진짜 몇 번을 EC2 인스턴스를 지웠다 새로 만들었다 지웠다 만들었다 했는지... ^^

빌드 실패는 오조오억번은 한 듯... ^^

하지만 악바리로 배포 성공함 ㅠㅠㅠㅠㅠㅠㅠㅠ 기분 개째져 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

기억이 가물가물 해지기 전에 기록해야지 ㅠㅠㅠㅠㅠㅠㅠㅠ

 

개발환경

• Spring Boot 3.4.1
• java 17
• mySQL
• react 18.3.1

 

글이 너무너무 길어질 것 같기때문에 앵커로 찾아갈 수 있도록 목차를 써 놓겠다...

프로젝트 구조

AWS EC2 배포하기

1. EC2 인스턴스 생성하기
2. EC2 인스턴스 접속하기
3. 배포하기 위한 프로그램 설치
   • mySql 설치
   • mySql 접근
   • java 17 설치
   • java 17 환경변수 지정
4. git clone 받아서 소스추가하기
5. npm 설치
6. 소스 수정
7. 메모리 문제 해결하기
8. 진짜 build 해주기
9. jar 파일 실행
10. 내가 만든 프로젝트에 접속할 수 있도록 설정하기

 

일단 나는 EC2에 배포하기 전에 로컬에서 빌드하고 배포하는 걸 추천... 왜냐면 로컬에서 잘 되어도 EC2로 넘어갔을 때 계속 실패하기때문! ^^

그래서 진짜 많이 참고한 글이 이것...

https://velog.io/@uram422/AWS-EC2로-프로젝트-배포하기

AWS EC2로 프로젝트 배포하기 (1) Spring Boot - React 한번에 build 하기

https://velog.io/@uram422/AWS-EC2로-프로젝트-배포하기-2-EC2-생성-및-프로젝트-배포

AWS EC2로 프로젝트 배포하기 (2) EC2 생성 및 프로젝트 배포

진심 압도적 감사함... ㅠ

 

나는 프로젝트 구조도 참고한 글이랑 같았다.

프로젝트 구조

노란색 밑 줄이 react 코드들이 있는 곳

하늘색 밑 줄이 java, back단쪽 코드들이 있는 곳

 

이 뒤부터는 참고한 글 첫번째를 쭉 따라갔다.

react 프로젝트에 (1) proxy 설정하고(나는 http-proxy-middleware 설치를 안하고 package.json에 proxy를 미리 작성해두었음, 그래서 .env.production 이랑 .env.development 파일만 생성함) (2) Spring Boot에 react 빌드 코드 입력하고 (3) 빌드하기 까지 쭉 따라가면 된다.

 

AWS EC2 배포하기

개발 쪼렙인 나는 배포가 뭔지 1도 몰랐으나 함 해보니 걍 서버에 개발환경 맞추고 빌드하고 실행시키는거더라 ㅇㅅㅇ

가장 먼저 해야할 것은

1. EC2 인스턴스 생성하기

나는 프리티어 계정으로 무료로 서버를 쓸 것이다.

EC2 [인스턴스 시작] 을 클릭해서 인스턴스를 만들도록 한다.

 

서버이름을 지정하기 위해 [이름]을 써주고(그냥 진짜 이름을 지정하는거라서 아무렇게나 써도 무방)

나는 Amazon Linux를 선택하고 AMI도 그냥 디폴트로 선택된 걸로 지정함

 

[인스턴스 유형]은 무료인 t2.micro를 선택하고

[키 페어]가 있는 사람은 [선택]을 눌러서 자신의 키 페어를 선택하면 되고 없는 사람은 [새 키 페어 생성]을 클릭해 키 페어를 생성할 수 있도록 한다.(새 키 페어 생성하면 키 페어 이름을 쓰고 키 페어 유형은 RSA, 프라이빗 키 파일 형식은 .pem으로 함)

사실 나머지도 그냥 다 디폴트로 선택된 것들로 해서 딱히 건들게 없다.

[인스턴스 시작]을 클릭해 인스턴스 생성을 마친다.

이렇게 하면 EC2 인스턴스가 만들어진 것을 확인 할 수 있다.

 

2. EC2 인스턴스 접속하기

만든 인스턴스 행을 클릭하고 [연결] 버튼을 클릭한다.

 

나는 따로 터미널을 이용하지 않고 EC2 인스턴스에 바로 연결할 것이므로 [연결] 버튼을 클릭한다.

 

터미널이 나오면 접속 완료!

 

3. 배포하기 위한 프로그램 설치

지금 나는 배포하기 위해서 필요한 것이 java 17, mySql , git, npm 이렇게 설치를 해야한다.

본인이 원하는 순서대로 설치하면 되긴 하는데 나는 mySql > java 17 > git > npm 이 순서로 설치하도록 하겠다.

 

mySql 설치

전에 mySql을 설치한 내용을 쓴 적이 있다.

aws에서 mySql 설치(feat. conflicting requests, Unit mysqld.service could not be found)

aws에서 mySql 설치(feat. conflicting requests, Unit mysqld.service could not be found)

이 글인데 이걸 보아도 좋고 뭐 다시 이 글에 적긴 할것이다.

 

sudo dnf install https://dev.mysql.com/get/mysql80-community-release-el9-1.noarch.rpm

이 명령어를 쳐서 MySQL 8.0 Community Edition용 repository 설정 RPM 패키지를 설치한다. 그냥 mySql 설치하기 전 준비 작업이라 보면 된다.

 

sudo rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022

이 명령어를 쳐서 RPM패키지가 신뢰할 수 있는 소스에서 왔는지 확인하는 GPG 키를 등록한다.

 

sudo yum update

상태를 업데이트 하고

 

sudo dnf install mysql-community-server

진짜로 mySql 서버를 설치한다.

여기까지 하는데 뭐 y/N 치는게 나오면 y누르고 엔터치면 되고 명령어를 쳤는데 아무것도 안나온다 그럼 아마 잘 설치가 되었다는 것으로 예상된다.

 

mysql --version

이 명령어를 쳐서 설치가 잘 됐는지 확인한다. 잘 설치가 되었다면 mySql의 버전이 나올 것이다.

여기까지 mySql을 설치한 것이고 이제 mySql에 database도 만들고 그 안에 테이블도 만들고 해야할 것.

 

mySql 접근

sudo systemctl status mysqld

이 명령어를 쳐서 Active 단어를 찾아보면 옆에 inactive라고 써있을 것이다. 이건 mySql 활성화가 안된 상태로 활성화를 시켜줘야한다.

 

sudo systemctl restart mysqld

이 명령어를 쳐서 활성화 시켜줌.

활성화 시켜주면 이제 mySql에 들어가기 위해 비밀번호를 알아야 한다.

 

sudo cat /var/log/mysqld.log | grep "A temporary password"

이 명령어로 root계정의 임시 비밀번호를 알아낸다.

 

mysql -u root -p

이 명령어를 치고나서 임시비밀번호를 치고 mySql에 접근

하지만 바로 들어갔다고 database를 만들거나 테이블을 생성할 수 없다! 왜냐하면 임시비밀번호로 접근했기때문에 비밀번호를 변경해주어야 create가 가능!

 

 ALTER user 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '변경하고 싶은 비밀번호';

이 명령어를 쳐서 비밀번호를 변경해주자! 참고로 8자리 이상이여야하고 반드시 영어 대문자, 소문자, 특수문자까지 포함 되어야한다...

여기까지 했다면 exit로 나오고 다시 mysql -u root -p 로 변경한 비밀번호를 치고 접근하면 원하는대로 create 할 수 있다!

그러면 database 만들고, 테이블 만들고 하면 DB 준비 끝!

 

java 17 설치

이제 우리가 만든 코드들을 실행시키기 위해서 jdk가 필요하다.

나는 Spring Boot 3.4.1으로 개발했으니 java 17이 필요!

sudo yum install java-17-amazon-corretto-devel -y

이 명령어를 쳐서 java 17을 설치해주도록 한다.

 

java -version
javac -version

java가 잘 설치 되었는지 확인하기 위해 위 명령어 두개를 쳐서 확인해본다.

설치한 java 버전과 javac 버전이 나오면 성공! 아니라면... 다시 설치를 시도... ㅠ

 

아래는 내가 진짜 개고생한 여담...

여담이지만 java 설치를 여기까지만 하고 빌드할 준비를 다 해서 빌드를 했을 때 계속 오류가 났다...

* What went wrong:
Could not determine the dependencies of task ':bootJar'.
> Could not resolve all dependencies for configuration ':runtimeClasspath'.
   > Failed to calculate the value of task ':compileJava' property 'javaCompiler'.
      > Cannot find a Java installation on your machine matching this tasks requirements: {languageVersion=17, vendor=any vendor, implementation=vendor-specific} for LINUX on x86_64.
         > No locally installed toolchains match and toolchain download repositories have not been configured.

빌드하면 실패되고 위와 같은 에러가 계속 한 50번은 진짜 계속 났음;;;

근데 이게 java를 인식을 못해서 나는 에러...

그래서 진짜 하루를 버리고 다음날 오후가 되어서야 알아냄...

java 환경변수 설정을 해줘야한다는 것을........... ㅠ

아니 전에 강의 봤을 땐 java 11로 했었는데 따로 환경변수 안 잡아줘서 이것도 안 잡아도 되는 줄 알았는데!! ㅠㅠㅠ 완전 배신당한 기분.......그렇기 때문에 java 환경변수를 꼭 잡아줘야한다!!!!

 

java 17 환경변수 지정

java까지 잘 설치했다면 환경변수로 지정을 해줘야한다! 꼭! 그냥 하자!!!!!

일단 java 실행 파일 경로를 알아야한다!

which java

일단 이 명령어를 쳐서 상대경로를 먼저 알아내고 (나는 /usr/bin/java 로 나옴)

readlink -f /usr/bin/java

이 명령어로 원본경로를 알아낸다!

나는 /usr/lib/jvm/java-17-amazon-corretto.x86_64/bin/java 이 경로로 나왔다

그러면 이제 진짜로 환경변수를 지정해주도록 하자!

 

sudo vi /etc/profile

이 명령어를 쳐서 vi 편집기를 연다!

참고로 vi 편집기는 편집모드와 명령모드가 있는데 편집을 하기 위해서는 i를 쳐야 수정을 할 수 있다!

그리고 수정을 다 했으면 esc를 누르고 :wq를 치고 엔터를 치면 수정한 내용이 저장되면서 vi 편집기를 나갈 수 있다!

 

암튼 vi 편집기에 들어와서 가장 아래에

export JAVA_HOME=/usr/lib/jvm/java-17-amazon-corretto.x86_64
export PATH=$JAVA_HOME/bin:$PATH

이렇게 쓴다! 원본경로 명령어(readlink -f /usr/bin/java)를 치고 나온 경로에서 /bin/java 경로를 제외한 경로까지만 JAVA_HOME에 써주면 된다!

그리고 저장나고 나오자!

 

source /etc/profile

이 명령어를 쳐서 환경변수 설정을 적용해주고

터미널을 아예 끄고 해당 인스턴스를 한번 재부팅 해주자! 혹시 모르니 재부팅까지...

재부팅 하는 방법은

저 인스턴스를 클릭하고 오른쪽 위에 인스턴스 상태를 눌러보면 [인스턴스 재부팅] 이라고 있을텐데 그거 누르고 좀 여유롭게 1분정도 기다려주고 다시 연결해서 터미널로 들어가자!!!

이렇게 하면 java까지 설치해준거다!!!

 

4. git clone 받아서 소스추가하기

이제 git에 올려놓은 소스를 가져오자!

git clone [github 저장소 주소]

이 명령어를 쳐서 git에 올려둔 소스를 가져온다.

cd ~/ 명령어를 치고 ls 명령어를 쳐보면 자기가 만든 프로젝트 폴더가 만들어진 것을 확인할 수 있다!

 

5. npm 설치

우리는 리액트로 개발했으니 EC2에도 npm을 설치해주어야한다!

sudo yum update
sudo yum upgrade
sudo yum install npm

이렇게 세 명령어를 쳐줘서 npm을 설치해주자!

사실 update랑 upgrade는 혹시 몰라서 해준거긴 한데... 하는게 좋지않을까...?

중간에 y/N 이런게 나오면 다 y 치고 엔터 눌러주고 기다리다보면 설치 완료!

 

6. 소스 수정

여기까지 했다면 react쪽에서 소스 수정이 필요하다!

https://velog.io/@uram422/AWS-EC2로-프로젝트-배포하기-2-EC2-생성-및-프로젝트-배포

AWS EC2로 프로젝트 배포하기 (2) EC2 생성 및 프로젝트 배포

맨 위에서 참고했다던 글 중에서 4) React 프로젝트인 frontend 폴더의 package.json 파일 내용 변경하기 ~ 5) .env.production 파일의 localhost 바꿔주기 이 부분을 진행해주면 되는데

 

짧게 글로 써보자면

package.json 파일에서

"proxy": "http://localhost:8080" 이 부분을 인스턴스 주소로 변경해주면 된다는 것.

인스턴스 주소는 

여기서 인스턴스 행을 클릭하면 밑에 해당 인스턴스 정보가 나오는데 그 중 "퍼블릭 IPv4주소" 에 있는 ip 주소를 써주면 된다!

http://[ip주소]:8080 이런 형식으로

.env.production 파일도 마찬가지이다!

수정은 vi 편집기로 하면 된다!

이렇게 소스 수정까지 했다면 frontend 폴더 안에서

npm install

명령어를 쳐줘서 모듈을 설치해주면 된다!

 

7. 메모리 문제 해결하기

지금 우리가 사용하는 인스턴스는 사양이 너무너무너무너무 낮아서 빌드를 해도 멈춘다...

진짜임 내가 해봄... 12퍼에서 안 올라감... 근데 3번은 시도했음... 근데도 다 멈췄음...

그래서 부족한 메모리를 disk 일부 사용도록 swap 메모리 설정을 해줘야한다!

sudo dd if=/dev/zero of=/swapfile bs=128M count=16

이 명령어는 swap 메모리를 할당하는 것으로 128M * 16 = 2GB 를 할당한다는 것

sudo chmod 600 /swapfile

이 명령어는 swap 파일 권한을 업데이트 하는 것

sudo mkswap /swapfile

이 명령어는 swap 영역을 설정하는 것

sudo swapon /swapfile

이 명령어는 swap 파일을 사용할 수 있도록 하는 것

sudo swapon -s

 

이 명령어는 swap 성공을 확인하는건데... 뭐가 나왔었나...? 내 기억엔 그냥 아무것도 안나온걸로 기억남....

sudo vi /etc/fstab

vi 편집기로 fstab에 들어가서 맨 아래에

/swapfile swap swap defaults 0 0

이걸 치고 저장해주자! 이러면 EC2 부팅 할 때마다 swap 파일이 시작된다고 하더라...

메모리를 확인하는 명령어는 free -m으로 실제 swap 메모리를 확인할 수 있음!

 

이것도 살짝 사담...

사실 이렇게까지하고 빌드하면 될 줄 알았단 말이지...?

근데 또 빌드 실패가 난거임!!!! 악!!!!

근데 뭔가 또 에러가 이상함... 그 java 머시기의 에러가 아닌거임!!!

Execution failed for task ':buildReact'.
> Process 'command 'npm'' finished with non-zero exit value 1

 이 에러였는데 뭔가 react 빌드하다가 실패했다는거 같아서

react만 빌드하려고 npm run build 쳐보니까 빌드 되다가 실패해서 보니

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

요런게 뜨더라... 보니까 react 빌드 하는데 힙 메모리가 갈데까지 갔다고 뻗은 것.... ㅠ

그래서 힙 메모리도 늘려야한다... ㅠ

사담내용 요약하면 react 빌드하는데 힙 메모리 부족으로 또 빌드가 실패함...

그래서 이것도 메모리를 늘려줘야 한다!!!

export NODE_OPTIONS=--max_old_space_size=4096

이 명령어를 쳐서 힙 메모리를 늘려주고 react 빌드가 잘 되는지 보기 위해서 npm run build를 해보는데 막 빨간 글씨로 에러같은거 안 뜨면 성공적으로 빌드 된것... ㅠㅠㅠ

이제 진짜진짜 거의 끝났다...

 

8. 진짜 build 해주기

 chmod +x ./gradlew
 ./gradlew build

위 명령어를 차례대로 쳐주면 빌드가 될것이다...

그럼 이제 내가 해야하는 건 신한테 겁나 빌기...

에러 없이 성공적으로 빌드가 되었다면 cd ~를 치고 다시 cd [프로젝트 폴더]를 쳐서 프로젝트 폴더 안에 들어가자!

그리고 ls 명령어를 치면 build라는 폴더가 만들어졌을 것!!!

그리면 cd build/libs를 치고 다시 ls 명령어를 치면 jar 파일들이 있는 것을 볼 수 있다!!!!!!!!

 

9. jar 파일 실행

그래... 이렇게 만들어진 jar 파일을 실행시키기만 하면 된다!!!!!

나는 EC2 접속을 종료해도 서버가 돌아갈 수 있도록 (background로 동작되도록) nohup 명령어로 실행해줄것이다.

내 위치는 프로젝트폴더/build/libs 에 있는 상태에서

nohup java -jar [jar 파일명].jar &

이 명령어를 쳐주면 그렇게 보고싶던 spring 올라갈때 로그들이 보일것이다...

참고로 저기 명령어에 써주는 jar파일명은 무슨 plain 이런거 안 붙어있는 파일명이다!

 

10. 내가 만든 프로젝트에 접속할 수 있도록 설정하기

이제 진짜 진심 찐막임... 진짜 다 끝남...

인스턴스를 클릭해 아래에 보안 탭 클릭 하고 보안그룹을 클릭하면 페이지가 나올 것

이 페이지가 나왔다면 인바운드 규칙 편집을 클릭

그러면 [규칙 추가]를 클릭해서

• 유형 : 사용자 지정 TCP
• 포트 범위 : 8080
• 소스 : Anywhere-IPv4

이렇게 설정해주고 [규칙 저장]을 눌러줘서 설정을 끝내준다!

 

그리고 http://[인스턴스 퍼블릭 IPv4 주소]:8080 에 접속해보면 내 프로젝트가 배포된 것을 확인할 수 있을 것이다!!!!!!!!!!!!

악!!!!! 이 기나긴 여정.... ㅠㅠㅠㅠㅠㅠㅠ

부디 다들... 별탈 없이 배포 잘 되었길..................