레벨 2 마지막 미션은 장바구니 구현 미션이었다.
처음으로 백엔드와 프론트엔드 간의 협업 경험을 했다.

배포 과정을 직접 경험해봤는데, 험난했지만 재밌었다.
해당 과정을 까먹을 것 같아 기록용으로 남긴다.

웹서버 세팅

1) AWS 인스턴스 생성

과정

1. AWS에 사용자 이름과 암호에 이메일과 지정된 아이디를 입력한다.
2. 보안 자격 증명 > 멀티 팩터 인증(스마트폰에서 OTP 활용)
3. 로그아웃 후 다시 로그인
4. 서울로 위치 변경(한글 페이지가 뜸!!)
5. 큐티쁘띠한 나만의 인스턴스를 발급받는다~

인스턴스 세팅값(미션 기준)

애플리케이션 및 OS 이미지: Ubuntu Server 22.04
인스턴스 유형: t3.micro
새 키 페어 생성: key-${닉네임} (e.g. key-jason)
네트워크: TECHCOURSE
서브넷: TRAINING
퍼블릭 IP 자동 할당: 활성화
보안 그룹: SG-DEFAULT

2) 서버(인스턴스) 접근용 KEY 등록하기

1. 인스턴스 등록 후 받은 원격 키체인을 로컬에 저장

• ec2-hunch.pem 형태

2. 터미널을 열고, 해당 키체인이 있는 폴더로 이동

• 커멘드 포맷

  	cd {key있는폴더}

3) 키체인을 통해 서버에 접근

• 커멘드 포맷

  	ssh -i {키체인명} ubuntu@{인스턴스의 private ip}

• 예시

  	ssh -i ec2-hunch.pem ubuntu@54.180.XXX.XXX

키 등록 오류시 다음 명령어 실행

chmod 400 ec2-hunch.pem
wget -O- https://apt.corretto.aws/corretto.key | sudo apt-key add -
sudo add-apt-repository 'deb https://apt.corretto.aws stable main'
sudo apt-get update
sudo apt-get install -y java-11-amazon-corretto-jdk

ssh?

• ssh 프로토콜
  • 원격 터미널 접속을 위해 필요. 이를 통해 서버에 접속

4) 깃허브 레포지토리 불러오기(배포~)

커멘드 포맷

rm -r -f repository //기존 레포지토리 삭제
mkdir repository // 디렉토리 생성
cd repository
git clone -b {가져올 브랜치 이름} --single-branch {깃허브 주소}
cd ./{깃허브 폴더명}
./gradlew bootJar// bootJar은 실행가능한 jar을 빌드하는 태스크

실행 중인 프로세스 확인

ps -ef | grep {확인하고 싶은 프로세스 이름}

pid 번호 확인

`pgrep - f {작동 플젝 이름}`

pid로 서버 종료

kill -15 ${pid}

이전에 배포했던 서버 자동종료

pid=$(pgrep -f {종료하고 싶은 서버 이름-깃허브 폴더명})

if [ -n "${pid}" ]
then
        kill -9 ${pid}
        echo kill process ${pid}
else
        echo no process
fi

프로젝트 실행

cd build/libs //폴더이동
nohup java -jar jwp-shopping-cart-0.0.1-SNAPSHOT.jar & //실행

서버 실행 방법은 2가지이다

1. java -jar jwp-shopping-cart-0.0.1-SNAPSHOT.jar &
2. nohup java -jvar jwp-shopping-cart-0.0.1-SNAPSHOT.jar &

• nohup
  • 리눅스, 유닉스에서 쉘스크립트파일 (*.sh)을 데몬 형태로 실행시키는 프로그램
  • 터미널 세션이 끊겨도 실행을 멈추지 않고 동작하도록 함
• &
  • 프로세스를 실행할 때 백그라운드에서 동작하도록 만드는 명령어

외부 DB용 서버와 웹서버 연동

현재까지의 과정은 웹서버 배포 과정이다.

웹서버는 말그대로 지금까지 구현한 JAVA 어플리케이션을 실행하는 서버이다.
현재 웹서버를 실행시킬 시 스프링 내장 DB인 H2가 연결되어 있다.

즉, 웹서버를 껐다가 키면 DB가 날아간다!!!

이를 막기 위해서는 MYSQL 등 외부 DB를 연결해야 한다.

이때도 두가지 방법이 있다.
1. 웹서버(인스턴스) 안에서 MySQL 깐 뒤 연동
2. DB용 서버(인스턴스)를 따로 생성한 뒤 웹서버와 연동

그런데 1번 방법은 여러 문제를 야기할 수 있다.

• 메모리 부족 문제 : 인스턴스 용량이 작아 메모리 문제로 빌드가 안되더라...
• 웹서버에 문제가 생기면 DB 접근이 불가능해진다.

결국 2번 방법을 채택했다.
JAVA에서 흔히 말하는 의존성 얘기가 여기서도 적용된다.

MySQL 설치, 실행

해당 프롤로그 링크를 참고했다.

대충 요약하자면 웹서버에
DB 인스턴스 키체인 전송 -> 퍼미션 변경 -> MySQL 설치 -> 원격접속 허용
순으로 진행하면 된다.

이때 MySQL 계정 생성 시

	mysql> create user '사용자'@'%' identified by '비밀번호';

형태로 입력하면 모든 ip에서 해당 MySQL로 접근이 가능해진다.
(물론 키체인이 필요하고, 사용자 이름, 비밀번호는 알아야 한다.)

나와 페어 조조그린은 한 DB서버 테이블에 공동으로 접속했다.
메모리 문제가 걱정되었다...인스턴스 메모리가 너무 적었다.
한 사용자로 DB에 접근하고 싶어 이렇게 세팅했다.

application.properties 설정 변경

해당 방식에서(내장 H2 DB 사용)

spring.datasource.initialization-mode=always
spring.datasource.url=jdbc:h2:~/test;MODE=MYSQL;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE
spring.datasource.username=sa
spring.h2.console.enabled=true

해당 방식으로 설정 변경했다.(DB서버의 MySQL 사용)

spring.datasource.url=jdbc:mysql://{퍼블릭 아이피}:3306/{지정해둔 DB 이름}?serverTimeZone=UTC
spring.datasource.username={아이디}
spring.datasource.password={비번}

변경된 application.properties 숨기기

• 숨기는 이유

  • 깃허브에 mysql용 설정 파일을 올릴 시 DB 정보(비밀번호 등)이 노출된다.
  • 해당 정보는 해커들에 의해 자동으로 크롤링되어 문제가 생길 수 있다.

• 나의 방법^^

  • 깃허브에는 h2 DB가 적용된 application.properties 가 올라감
  • 이후 리눅스에서 배포할 때마다 쉘 스크립트로 메인 디렉토리의 mysql 버전의application.properties 로 덮어씌운다.

• 이외에도 자바에서 직접 설정값을 바꿔 적용시켜주는 방법도 있는 것 같다.

배포 자동화(feat.ShellScript)

지금까지의 과정들을 보고 나면 이런 생각이 들것이다.

"재배포할 때마다 저 많은 세팅을 다 하고 명령어로 입력해줘야 돼?"

이때 유용하게 사용할 수 있는게 쉘스크립트 이다.
지금까지의 리눅스 터미널 명령어들을 자동으로 입력해준다.
즉, 일련의 과정을 자동화할 수 있다.

쉘 스크립트 관련 설명 링크

스크립트 생성

vim 모드로 스크립트 파일 생성

`vim {파일이름}.sh`

vim 모드

여기서 지금까지 써둔, 자동화 하고싶은 명령어 목록을 입력해주면 된다.

쉘스크립트를 이쁘게 꾸미고 싶다면 echo를 사용하자~

• 편집 모드 : i 키보드 입력 → 이후 원하는 스크립트 작성
• 스크립트 저장 후 종료(터미널로 이동) : :wq 키보드 입력

예시 포맷

pid=$(pgrep -f cart)

if [ -n "${pid}" ]
then
        kill -9 ${pid}
        echo kill process ${pid}
else
        echo no process
fi

rm -r -f repository
echo "######기존 레포지토리 삭제 완료######"
mkdir repository
echo "######디렉토리 생성 완료######"
cd repository
git clone -b step2 --single-branch https://github.com/BETTERFUTURE4/jwp-shopping-cart.git
echo "######깃허브 클론 완료######"

cd ~
cp -f ./application.properties ./repository/jwp-shopping-cart/src/main/resources/
cd repository
echo "######application.properties 외장 DB로 변경 완료######"

cd ./jwp-shopping-cart
./gradlew bootJar
echo "######bootJar 실행 완료######"

cd build/libs
nohup java -jar jwp-shopping-cart-0.0.1-SNAPSHOT.jar &
echo "######프로젝트 실행 완료######"

배포 스크립트 실행

해당 스크립트 위치 이동

`cd {스크립트위치}`

스크립트 실행

• 편집 모드로 변경 : chmod +x {쉘스크립트 파일 이름}.sh
• 해당 스크립트 실행 : ./{쉘스크립트 파일 이름}.sh

---

로그인 기능 구현

장바구니 기능 구현

프론트 https 서버와 연결 후 잘 돌아갔다😎

배포 사이트

https://compy-ryu.github.io/react-shopping-cart-prod/
(일주일 뒤 폭파 예정😂)