73DAYS) [Cloud] 운영 환경 구성 - 클라이언트 배포, 데이터베이스 연결

nacSeo (낙서)·2023년 2월 1일

코드스테이츠 백엔드 부트캠프

목록 보기

63/108

◉ 학습목표

1. S3를 이용해 클라이언트 배포를 할 수 있다.
2. RDS를 이용해 데이터베이스 연결을 시킬 수 있다.

클라이언트 배포

⦿ 학습내용

☞ 클라이언트 배포를 위한 환경 설정

✅ 개인 PC 로컬에서 진행
✔︎ nvm 설치
※ 공식문서 참고

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

✔︎ 설치 확인

터미널 재시작 후

nvm --version

✔︎ node.js 설치

nvm install 16		# 16버전 설치

node -v				# 버전 확인

☞ S3 호스팅

✔︎ 정적 웹 사이트 호스팅 과정 (4단계)

정적 웹 페이지 빌드
버킷 생성 및 웹 사이트 호스팅 용으로 구성
빌드된 정적 웹 페이지 업로드
퍼블릭 액세스 차단 해제 및 정책 생성

✔︎ 정적 웹페이지 빌드

의존성 모듈 설치
- 빌드 전 의존성 모듈 설치
```
npm install
```
- 환경변수 설정
  - .env 파일에 요청 보낼 서버의 주소 작성
  - http:// or https:// 포함
  - 포트번호 포함
- 빌드 과정 진행
```
npm run build
```

✔︎ 버킷 생성 및 정적 웹 사이트 호스팅 용으로 구성

S3 해당 버킷 접속 - 속성 - 정적 웹 사이트 호스팅 - 편집
- 정적 웹 사이트 호스팅 활성화
- 인덱스 문서 지정 및 변경사항 저장
생성된 버킷 웹 사이트 엔드포인트 주소 확인
- 에러 메세지 확인 (403 Forbidden)

✔︎ 빌드된 정적 웹 페이지 업로드

S3 해당 버킷 - 객체 - 업로드 - Build 디렉토리에 있는 정적 파일들 업로드
🚨 주의점 : build 폴더 저장된 파일만 업로드 (build 폴더 자체 ❌)

✔︎ 퍼블릭 액세스 차단 해제 및 정책 생성

S3 해당 버킷 - 권한 - 퍼블릭 액세스 차단 - 편집 - 체크박스 모두 해제
권한 - 버킷 정책 - 편집 - 정책 생성기
- S3 Bucket Policy
- Principal = *
  - 권한을 적용할 사용자 (모두 공개는 *)
- Actions = GetObject
  - GetObject : 버킷에 접근하는 모든 사용자가 버킷 내 저장된 객체 데이터를 읽을 수 있게 됨
  - 버킷을 웹 사이트 용도로 구성할 때 좋음
- ARN : arn:aws:s3:::<버킷 이름>/*
생성된 정책 복사 - 버킷 정책에 붙여넣기
속성 - 정적 웹 사이트 호스팅의 엔드포인트 클릭하여 테스트

데이터베이스 연결

⦿ 학습내용

☞ RDS 인스턴스 연결

✔︎ 인스턴스 생성 및 연결 과정

DB 인스턴스 생성
데이터베이스 연결

✔︎ RDS 인스턴스 생성

AWS 콘솔 - RDS - 데이터베이스 - 데이터베이스 생성 - 엔진 옵션(MySQL) 선택 - 템플릿 옵션(프리티어) 선택
연결 옵션에서 식별자, 사용자 이름, 암호 기입 - 인스턴스 클래스(db.t2.micro) - 퍼블릭 액세스 가능
보안 그룹(기존 항목 - default) 선택 - 추가 연결 구성 데이터베이스 포트 설정 - 추가 구성의 초기 데이터베이스 이름 설정
데이터베이스 생성

✔︎ 데이터베이스 연결

※ MySQL 클라이언트를 통해 RDS의 DB 인스턴스에 연결하기 위한 정보
① DB 인스턴스 생성 시 기재한 마스터 이름, 마스터 비밀번호
② 포트 번호
③ 생성한 DB 인스턴스의 엔드 포인트 주소

✅ 개인 PC 로컬에서 진행

AWS 데이터베이스에서엔드포인트 확인
터미널에서 MYSQL 실행해서 연결

mysql -u [마스터 이름] --host [엔드 포인트 주소] -P [포트번호] -p

🚨 바르게 작성했으나 접속되지 않는 경우,
생성한 RDS 인스턴스의 보안그룹을 확인해 인바운드 규칙에 접근하려는 IP(혹은 모든 곳에 접근 허용)가 추가 되어있는지 확인

show databases;

- test database가 보이면 정상 연결 성공 ❗️

☞ 서버 환경 설정

✅ EC2 인스턴스 터미널에서 진행
✔︎ 서버 코드에 저장된 application.properties 파일에 환경 변수 설정

EC2 인스턴스에서 실행하고 있는 서버 종료
환경 설정 파일 수정

nano src/main/resources/application.properties

- `spring.datasource.url`= AWS RDS '엔드포인트 주소:포트' 입력
- `spring.datasource.username`= AWS RDS Mysql 마스터 사용자 이름 입력
- `spring.datasource.password`= AWS RDS Mysql 마스터 암호 입력
- `config.domain`= AWS S3 엔드포인트 주소 입력
🚨 반드시 http:// 포함, CORS 설정 위해 통신할 클라이언트 도메인 입력이 필요하기 때문

이전 빌드 삭제 및 재빌드 후 서버 재실행

./gradlew clean			# 빌드 삭제

./gradlew build			# 빌드 진행

✔︎ 서버 실행

java -jar build/libs/DeployServer-0.0.1-SNAPSHOT.jar 명령어를 통해 서버 재실행
※ Shell script 이용해서도 재실행 가능 (./restart.sh 명령어 이용)

◉ 느낀 점

☞ 어제 서버 배포에 이어 클라이언트 배포와 데이터베이스 연결 파트를 진행했다. 잠깐씩 막히기도 했지만 다른 동기들에 비해서는 나름 잘 진행되고 있었다. 그런데 마지막 서버 환경 설정까지 마치고 로그인을 시도했는데 오류가 떴다.. 몇 번을 다시 해도 같은 현상이 발생하였다.
로그인 정보를 입력해도 넘어가질 않아!!!!!!!!!!! 🤯🤯🤯

F12 개발자 도구를 켜서 왜 오류가 발생하는지 찾아보니...
클라이언트에서 서버에 요청을 보낼 때의 주소가 서버가 아니라 클라이언트 배포의 주소였던 것이다 😕

그말은 즉슨,
환경변수 설정에서 문제가 있었다는 말!
S3 호스팅을 할 때 .env파일을 다시 확인하고 진행했다. 근데 그래도 안 돼...
애초에 내가 처음에 서버를 실행 안시키고 종료도 안시키고 진행해서 그런 것인가...
프로퍼티쪽 환경변수 잘못인가해서 고쳐 보기도 하고...
할 수 있는 이것 저것 다 해봤지만
안돼.....😵‍💫👿

몇 시간동안 고민하고 고치고 끙끙 앓다가 결국 싹 다 갈아엎고 초심으로 새로 시작^^... 😇
그러니까 또 된다...
배신당한 기분이기도 하고 하던대로 그대로 진행해서 뭐가 잘못된건지 정확히 파악은 못해 약간의 찝찝함 이 있기는 개뿔 너무 행복했다 😊😊😊