💡 오늘의 학습목표
- 클라이언트 배포 (S3호스팅)
- 데이터베이스 연결 (RDS 인스턴스 연결)
📔 클라이언트 배포
📖 클라이언트 배포를 위한 환경 설정
- 실습 repository의 클라이언트는 JavaScript, React 로 작성됨.
- 개인 PC 로컬에서 진행
1. nvm 설치
- 리눅스 터미널에 wget 명령어로 nvm 설치
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash- 설치완료되면 터미널 다시 시작 후
nvm --version으로 확인2. node.js 설치 (nvm을 이용하여 설치함)
n install 16공식 사이트에 LTS라고 적힌 버전을 기준으로 설치
node -v로 버전 확인
📖 S3 호스팅 튜토리얼
- 정적 웹 사이트 호스팅 과정
- 정적 웹 페이지 빌드
- 버킷 생성 및 정적 웹 사이트 호스팅용으로 구성
- 빌드된 정적 웹 페이지 업로드
- 퍼블릭 액세스 차단 해제 및 정책 생성
✔ 정적 웹 페이지 빌드
개인 PC 로컬에서 클라이언트의 의존성 모듈 설치
cd client디렉토리로 이동
npm install로 의존성 모듈 설치- 환경 변수 설정
.env파일을 에디터로 수정 서버 주소 작성 후 저장 (포트번호까지)
REACT_APP_API_URL={서버주소}npm run build명령어로 빌드 진행 -> Client 디렉토리에 빌드 폴더 생성됨.- AWS S3 대시보드 - 버킷 선택 - 속성 - 정적 웹 사이트 호스팅 편집 - 활성화 - 인덱스 문서에 index.html 작성 - 버킷 웹 사이트 엔드 포인트 생성됨. - 오류
- 버킷 - 객체메뉴 - 업로드 ( build 폴더 안에 파일들 업로드 )
- 버킷 - 권한 - 퍼블릭 액세스 차단 편집 - 모든 퍼블릭 액세스 차단 옵션 해제 - 다음 - 버킷 정책 - 편집 정책 생성기 - 새창에서 버킷 정책 생성 (S3 Bucket Policy), Principal(), Actions (GetObject:버킷에 접근하는 모든 사용자가 버킷 내에 저장된 객체 데이터 읽기 가능), ARN(arn:aws:s3:::<버킷이름>/) - 생성 - 생성된 정책 복사하여 버킷 정책 페이지에 붙여 넣기
📔 데이터 베이스 연결
📖 RDS 연결 튜토리얼
- MySQL 데이터베이스 엔진을 사용하는 DB 인스턴스 생성한 뒤
- 로컬 환경에서 MySQL 클라이언트를 활용하여 DB 인스턴스에 연결
✔ RDS 인스턴스 생성
- AWS RDS 대시보드 - 데이터베이스 생성 - MySQL 선택 - 프리티어 - 식별자 사용자 암호 입력 - t2.micro - 퍼블릭 액세스 가능 예 - 보안그룹 디폴트 / 포트번호 지정 (13306) - 추가 구성 초기 데이터 베이스 이름 (test) - 생성
✔ 데이터 베이스 연결
- DB 엔드포인트 주소 확인 - 개인PC로컬에서
mysql -u [마스터이름] --host [엔드포인트 주소] -P 13306(포트번호) -p로 접속- show database; 입력하면 확인 가능
📖 서버 환경 설정
- 서버 환경설정으로 생성한 RDS 인스턴스에 접속하고 클라우드 데이터베이스 사용
- 서버 코드에 저장된 application.properties 파일에 환경 변수 설정하기
EC2 인스턴스 서버 종료 후 EC2의 터미널에서 진행
application.properties파일을 nano 에디터로 수정
cd be-sprint-deployment/DeployServer/
nano src/main/resources/application.properties
- 환경 설정 완료 후
./gradlew clean으로 이전 빌드 삭제 후
./gradlew build로 다시 빌드 진행
🔍학습할 것
(https://urclass.codestates.com/content/b9ef8c30-6c72-409a-8374-b788e227b2c8?playlist=2343)
- 도메인 주소를 이용한 HTTPS 인증 튜토리얼
- ELB 생성 및 ACM을 통한 인증서 발급
- 호스팅 영역에 별칭 레코드 생성
- 도메인 구입과 HTTPS 적용 https://velog.io/@seongkyun/AWS-S3-CloudFront-Route53%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%A0%95%EC%A0%81-%ED%98%B8%EC%8A%A4%ED%8C%85
- 리소스 생성 튜토리얼
코린이의 공부 일지