22.10.02 Step 2. 클라이언트 배포 [ S3 ]

728x90

Step

Step 1. 서버 배포 [ EC2 ] : https://radpro.tistory.com/323

Step 2. 클라이언트 배포 [ S3 ] : 현재글

Step 3. 데이터베이스 연결 [ RDS ] : https://radpro.tistory.com/325

S3를 이용한 클라이언트 배포

: S3 콘솔을 통해 버킷을 정적 웹 호스팅 가능하게 수정

: 클라이언트 파일 빌드 => 결과물을 버킷에 업로드

: 정적 웹 호스팅 기능을 이용하여 클라이언트 코드 배포

: 확인법 = 생성한 버킷의 엔드포인트 주소 접속 및 테스트

환경설정

: 반드시 개인 로컬 환경에서 진행 (bash기준)

1. nvm 설치 : 아래 명령어를 bash에서 실행 (안될시 공식문서 확인 : 공식문서)

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

만약 Command 'wget' not found 메세지가 뜨면서 설치가 안될 시, Package Manager를 이용한 wget 설치 필요

# Ubuntu
sudo apt update
sudo apt install wget

# macOS
brew update
brew install wget

2. 설치 확인 : 약간의 시간이 소요되므로, 아래 안내문구 나올때까지 대기 => 완료시 버전확인

nvm --version

3. Node.js 설치 : LTS로 설치 (Long term Support) => 버전확인

nvm install --lts

node -v

Static web site hosting 과정

1. static web page 빌드

2. 버킷 생성 및 static web site hosting용으로 구성

3. 빌드 된 static web page 업로드

4. public access 차단 해제 및 정책 생성

빌드

: 코드의 불필요한 데이터를 없애고, 통합, 압축하여 배포에 이상적인 상태를 만드는 과정

: 클론한 프로젝트 디렉토리에서 진행

1. 로컬에서 의존성 모듈 설치

: WSL에서 client 디렉토리로 이동 => 클라이언트의 의존성 모듈 설치

$ cd client

$ npm install

2. 환경변수 설정

: 클라이언트의 경우, .env 파일에 선언

: client디렉토리 내에 ls -al 명령어를 통해 확인 => 없으면 .env 파일 생성 => nano(혹은 vi)로 파일 수정

* 요청을 보내는 서버의 주소를 환경변수에 담기 위해선, http:// 또는 https:// 가 반드시 포함되야함

* 포트에서 작동하는 경우 포트번호가 꼭 포함되야 함

: 여기선 'http://' + ec2주소 + ':포트번호'

REACT_APP_API_URL=http://ec2-13-125-13-204.ap-northeast-2.compute.amazonaws.com:8080

: 만약 파일 이름을 변경하고 싶을땐, 아래의 명령어 사용

mv 바뀌기전_이름 .env

3. 빌드과정 진행

: 'Compiled Successfully' 라는 문구가 뜨면 마무리

$ npm run build

4. 프로젝트 안에 build 폴더가 생겼는지 확인

버킷 생성 및 Static Web Site Hosting용으로 구성

1. AWS 로그인 => S3 접속 => 리소스 이름 선택

2. 속성 => 정적 웹 사이트 호스팅 => 편집 => 활성화 => 변경 사항 저장

3. 정적 웹 사이트 호스팅 => 버킷 웹 사이트 엔드포인트의 링크 클릭 (해당 페이지 브라우저로 확인)

* 단, 현재는 403에러 발생

1) 정적 웹 페이지 파일을 아직 업로드 하지 않은 상태( 즉, 로컬에서 build한 파일을 아직 안올렸음)

2) 퍼블릭 액세스 설정 변경과 정책 설정을 아직 안함 (즉, 권한 공개설정 아직 안함)

빌드 파일 업로드

1. S3 => 객체 => 업로드

2. 로컬 프로젝트 내 build 폴더로 들어감 => static폴더를 포함한 모든 파일을 드래그&드랍으로 첨부 => 업로드

퍼블릭 액세스 차단 해제 및 정책 설정

1. 퍼블릭 액세스 차단 해제

: S3 => 권한 => 퍼블릭 액세스 차단(버킷설정) => 모든 퍼블릭 액세서 차단 해제 => 변경 사항 저장

2. 정책 설정

1) 권한 => 버킷 정책 => 편집 => 정책 생성기 => 정책 생성 => Generate Policy => 코드 복사

2) 복사한 정책을 버킷 정책 => 버킷 ARN 아래에 붙여넣기 => 변경 사항 저장