망꼬누나의 개발 공부

치치폭폭 프로젝트를 AWS EC2로 배포를 수행하며 겪은 시행착오에 대해 포스팅하려 한다.

본격적으로 시작하기에 앞서 왜 이 글을 작성하는지에 대한 이유와 프로젝트 환경에 대해 설명하자면,

1. 스프링부트 + 리액트 프로젝트
2. 백엔드와 프론트엔드 코드를 같은 인스턴스에 배포 
3. 프론트엔드 폴더 안에 server 폴더인 백엔드 폴더가 들어있는 구조
4. 우분투 서버 배포

프로젝트의 환경은 위와 같다. 

스프링부트 + 리액트 프로젝트를 같은 인스턴스에 배포하기 위해 구글링했지만,

우리 프로젝트와 같은 환경의 배포 정보는 빈약했다.

챗지피티와 구글링으로 얻은 정보들을 짜집기하여 성공을 하였지만,

그 과정에서 수많은 실패로 시간을 소모하였기 때문에 

비슷한 상황에 처한 분들에게 조금이나마 도움이 되길 바란다.

[주의점]

위에 설명과 같이 프론트엔드 폴더 안에 server 폴더인 백엔드 폴더가 들어있는 구조라면,

프론트엔드 폴더를 빌드할 때 백엔드 폴더(=server 폴더)를 잠시 빼두고 빌드를 수행해야 한다.

그 이후, 프론트엔드 폴더 빌드가 완료 되었을 때, 다시 원래 위치에 백엔드 폴더를 넣고 백엔드 폴더를 빌드하면 된다.

이제 본격적으로 배포법에 대해 설명하겠다.

1.  AWS EC2 만들기

구글링만 하면 정리가 잘 된 블로그가 많으므로 생략하겠다.

2. EC2 인스턴스 접속

.ssh 폴더를 생성하고, .pem 파일 (= 키)을 넣는다.

(이때, 나는 수많은 실패로 여러번 시도하였으므로 .pem 파일이 2개이다. 무시해도 좋다.)

ssh -i dykim.pem ubuntu@13.124.149.28

이 명령어를 .ssh 폴더에서 입력하면, 우분투 서버로 들어가게 된다.

3. MySQL 설치

1. sudo apt update //패키지 목록 업데이트
2. sudo apt install mysql-server -y //MySQL 8.0 설치
3. sudo systemctl enable mysql //MySQL 서버가 부팅 시 자동으로 시작되도록 설정
4. sudo mysql //MySQL 접속
5. ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '비밀번호'; //루트 사용자 비밀번호 설정
6. EXIT;  //MySQL 프롬프트 종료

여기까지가 기본 설치이고, 이제 설정에 대해 설명하겠다.  

(mysql 연결이 잘되지 않아 많은 시간을 소모하고 이것저것 따라해보았지만,

 mysql 워크벤치나 인스턴스 설정 등은 건들지 않으니 아래만 오타없이 잘 따라하면 된다.) 

1. mysql -u root -p  //설정한 비밀번호 사용하여 MySQL 접속
2. sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf  //MySQL 설정 파일(mysqld.cnf) 수정
3. bind-address = 0.0.0.0 //설정 파일에서 bind-address 항목을 찾고 127.0.0.1을 0.0.0.0으로 변경
4. sudo systemctl restart mysql  //파일 저장 후 MySQL 서버 재시작

2번의 경우, MySQL은 외부 접속을 허용하지 않으므로 MySQL 설정 파일을 수정해야 한다.

이때, mysqld.cnf의 위치가 개인마다 다를 수 있음을 참고하자.

3번의 경우, 모든 IP에서 접속이 가능하도록 주소를 변경하는 작업이다.

1. SHOW DATABASES;  //DB 확인
2. CREATE USER 'root'@'localhost' IDENTIFIED BY '비밀번호';  //계정 생성
3. FLUSH PRIVILEGES; //해당 작업 반영
4. create database 스키마이름;  //스키마 생성
5. grant all privileges on 스키마이름.* to 'root'@'localhost';  //권한 부여
6. flush privileges; //해당 작업 반영

6번까지 수행 후, 다시 DB를 확인하면 아래와 같이 chugpuff 스키마가 생성된 것을 확인할 수 있다. 

이후 EXIT하여 MySQL 프롬프트를 종료하면 된다.

4. JAVA 17 설치

 sudo apt update 
 sudo apt install openjdk-17-jdk -y  
 java -version  //버전 확인하여 정상적으로 설치되었는지 확인

5. Node 설치

sudo apt-get update
sudo apt-get install -y build-essential
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash --
sudo apt-get install -y nodejs

node -v  //설치 확인
npm -v   //설치 확인

6. 깃허브 클론

기존 클론 방법과 같으므로 클론하는 법은 생략하도록 하겠다. 

이후, ls 명령어로 확인한 결과 아래와 같이 잘 클론된 것을 확인할 수 있다.

7. 프론트엔드 리액트 실행

위의 주의점과 같이 프론트엔드 폴더를 빌드하기 위해 백엔드 폴더를 잠시 이동시켜야 한다.

mkdir back // back 폴더 생성
ls // 폴더 보기
pwd // 현재 위치 확인
mv /home/ubuntu/AWS-chugpuff/src/server /home/ubuntu/back // 파일 이동

back 폴더를 생성하고 현재 위치를 확인 후, 백엔드 폴더를 이동시킨다.

이후, 프론트엔드 폴더로 이동하여 빌드하고 실행한다.

cd AWS-chugpuff
npm run build

npm run start //프론트 서버 실행

http://EC2 ip주소:포트번호 하면 배포가 잘 된 것을 확인할 수 있다.

(우리 프로젝트 포트번호는 3000이므로 http://13.124.149.28:3000 이다.)

8. 백엔드 자바 스프링부트 실행

mv /home/ubuntu/back/server /home/ubuntu/AWS-chugpuff/src // 파일 이동
ls // 폴더 보기

옮겨놨던 백엔드 폴더를 다시 원래 자리로 돌려놓는다.

깃허브에는 보안상의 이유로 application.properties 파일을 올리지 않고,

우분투에서 직접 파일을 생성해주었다.

mkdir resources // resources 폴더 생성
cd resources // resources 폴더로 이동
sudo apt install emacs-gtk // 편집기 설치
emacs application.properties // application.properties 파일 편집기 실행

파일 편집기가 실행이 되면 application.properties의 내용을 붙여넣고 저장한다.

- 파일 저장 : Ctrl + x, Ctrl + s

- 편집기 종료 : Ctrl + x, Ctrl + c

cd AWS-chugpuff/src/server // 백엔드 폴더 이동
chmod +x gradlew // gradlew 실행 권한 부여
./gradlew build // jar 빌드 파일 생성

위 명령어로 빌드가 잘 된 것을 확인한다.

cd build/libs // 폴더 이동
ls // 폴더 보기
java -jar chugpuff-0.0.1-SNAPSHOT.jar // 실행

빌드가 성공적으로 진행되면, 폴더를 이동하여 정상적으로 실행되는지 확인한다.

9. 배포 확인

프론트엔드와 백엔드 폴더를 각각 실행하여 배포가 잘 되는지 확인한다.

이때, 잘 작동하지 않는다면 인바운드 규칙을 확인해 보길 바란다.

우리는 프론트엔드 서버의 포트 번호는 3000,

백엔드 서버의 포트 번호는 8080이므로 위와 같이 규칙을 추가했다.

최종적으로 배포가 잘 된것을 확인할 수 있다.

+ 부가적으로 우리의 경우, 로컬 서버를 대상으로 개발을 완료한 상태에서 

우분투 서버로 배포를 한 것이므로 로컬과 다르게 보이고, 다르게 작동하는 부분이 발생했다.

그래서 우분투 서버에 맞게 다시 수정하여, 로컬 코드와 우분투 코드 2개가 존재한다.