aws의 a도 모르는 인간이 배포를 하며 겪은 시행착오를 풀어볼까한다 ...
블로그를 아무리 찾아도 스프링부트 + 리액트 프로젝트를
같은 인스턴스에 배포하는게 정보가 많이 없어서
챗지피티와 구글링을 통해서 어찌저찌 성공하였다 ..!
시작하기에 앞서 먼저 우리의 프로젝트의 폴더 구조이다.
프론트엔드 폴더에 server 폴더인 백엔드 폴더가 있다.
즉, chugchugpuffpuff 폴더가 프론트엔드 폴더가 되고 chugchugpuffpuff/src/server 폴더에 백엔드 코드를 넣어주었다.
🌟결론부터 말하자만🌟
나와 파일 구조 형식이라면 프론트를 빌드할 때 백엔드 폴더를 잠시 이동시키고 해야한다.
프론트 폴더 빌드가 끝나면 백엔드 폴더를 다시 원래 위치에 넣고 백엔드를 빌드하면 된다.
1. EC2 만들기
이건 다른 블로그에도 많아서 패스 .. ~
참고로 우분투로 서버를 생성하였다.
2. EC2 인스턴스 접속
.ssh 폴더를 생성하고 거기에 .pem키를 넣어준다.
ssh -i dykim.pem ubuntu@13.124.149.28
.ssh 폴더에서 명령어를 입력하면 우분투 서버로 들어가지게 된다.
3. MySQL 설치 및 설정
sudo apt update // 패키지 블록 업데이트
sudo apt install mysql-server -y // MySQL 8.0을 설치
sudo systemctl enable mysql // MySQL 서버가 부팅 시 자동으로 시작되도록 설정
sudo mysql // MySQL 접속
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '비밀번호';
// 사용자 비밀번호를 설정
EXIT; // MySQL 프롬프트에서 빠져나가기MySQL의 기본 설치를 완료한다.
mysql -u root -p // 설정한 비밀번호를 사용하여 MySQL에 접속
sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf // MySQL 설정 파일을 수정
bind-address = 0.0.0.0
// 설정 파일에서 bind-address 항목을 찾고 127.0.0.1을 0.0.0.0으로 변경
sudo systemctl restart mysql // 파일을 저장 후 MySQL 서버를 재시작MySQL은 외부 접속을 허용하지 않기 때문에 MySQL 설정 파일을 수정해야 한다.
mysld.cnf의 위치가 개인마다 다를 수 있다.
또한 모든 IP에서 접속이 가능하도록 주소를 변경하는 작업이다.
SHOW DATABASES; // 데이터베이스 확인
CREATE USER 'root'@'localhost' IDENTIFIED BY '비밀번호'; // 계정 생성
FLUSH PRIVILEGES; // 해당 작업 반영
create database 스키마이름; // 스키마 생성
grant all privileges on 스키마이름.* to 'root'@'localhost'; // 권한 부여
FLUSH PRIVILEGES; // 해당 작업 반영
SHOW DATABASES; // 데이터베이스 확인
chugpuff 스키마가 만들어진것을 확인할 수 있다.
EXIT;MySQL 프롬프트에서 빠져나간다.
4. JAVA 17 설치
sudo apt update // 패키지 목록 업데이트
sudo apt install openjdk-17-jdk -y // JAVA 17 설치
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. 깃허브 클론
깃허브의 주소로 git clone을 해온다.
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 파일을 올리지 않고
우분투에서 직접 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 // 실행
빌드가 성공적으로 진행되면
build/libs 폴더로 이동해서 jar 파일이 생성이 된 것을 확인한다.
9. 배포 확인
cmd 창을 두개를 켜서
프론트엔드와 백엔드 각각 실행을 하여 배포가 잘 되었는지 확인을 한다.
이때, 잘 작동하지 않는다면 인바운드 규칙을 확인해야한다.
우리는 프론트엔드 서버의 포트 번호는 3000,
백엔드 서버의 포트 번호는 8080이므로 인바운드 규칙을 추가해주었다.
배포가 잘 된것을 확인할 수 있다 !!!!!