AWS에서 클라이언트 어플리케이션을 담을 수 있는 버킷인 S3에 대해 실습 과정을 기록
react 앱 만들기
% npx create-react-app practice-react-deploy
만든 이후 npm start를 통해 실행시켜보면 아래와 같은 화면을 볼 수 있다.
S3에 올리기 위해 build
% npm run bulid 명령어를 통해 리액트 앱의 html, css,js 파일을 webpack을 이용해 정적 파일로 만들 수 있다.
Create bucket
AWS에 회원가입 후 로그인 한 뒤 S3 서비스에 접속한다.
접속하면 아래와 같이 bucket 목록들이 나와있는데 bucket을 새로 생성할 수 있다.
오른쪽 상단에 있는 버킷 만들기를 클릭하면 새로운 버킷을 만들 수 있는데 우선 모든 옵션들을 기본값으로 한 뒤 생성한다.
버킷을 만들고 클릭해보면 여러가지 옵션들이 있는데 이 중 속성 -> 정적 웹사이트 호스팅을 찾아 편집을 클릭한다.
편집을 누르면 아래와 같이 여러 옵션들을 설정할 수 있는데
1. 정적 웹 사이트 호스팅: 활성화
2. 호스팅 유형: 정적 웹 사이트 호스팅 클릭
3. 인덱스 문서: index.html
4. 오류 문서: index.html
로 설정하고 변경사항 저장.
설정한 뒤 정적 웹 사이트 호스팅 메뉴를 봐보면 엔드포인트가 주어져 있다. 하지만 엔드포인트를 클릭해도 403(forbidden) 에러가 발생한다. 이유는 엔드포인트로 접속할 수 있는 권한 설정을 해주지 않았기 때문에 발생한다.
엑세스 설정
권한 설정을 해주기 위해 bucket 옵션 중 권한 -> 퍼블릭 엑세스 차단을 찾고 편집을 누른다.
편집을 누르면 아래와 같이 나오는데 체크되어 있는 옵션들을 해제한다.
버킷 설정
다음으로 bucket 정책을 설정하여 접속자들이 어떻게 접속하고 어떤 액션을 취할 수 있는지 설정해줘야한다. 정책 설정은 권한 -> 버킷 정책을 찾는데 버킷 정책에 있는 textArea는 json형식으로 작성해야만 한다. 하지만 이를 수월하게 해주기 위해 aws에선 정책 생성기를 제공한다.
편집 -> 정책 생성기를 누르면 아래와 같은 화면이 나온다.
위 화면에서
Select Type of Policy: S3 Bucket Policy
Effect: Allow
Principal: * (버킷에 접근 권한을 누구에게 줄 것인지에 대한 옵션)
Action: GetObject
Amazon Resource Name (ARN): arn:aws:s3:::<bucket_name>/<key_name>
형식을 채우고 Add Statement를 클릭, 저장한다. 저장하면 버킷은 public access 권한을 갖게 된다.
bucket에 정적 파일 업로드 하기
위에 설명한 설정들을 하고 엔드포인트에 접속을 해보면 404(Not Found) 에러를 만나게 된다. 이유는 아직 bucket에 build 파일들을 업로드하지 않았기 때문이다.
build 파일을 업로드 하기 위해 로컬에 있는 프로젝트 디렉토리에서 build 폴더들을 찾는다. 그리고 bucket 옵션들 중 객체 옵션을 클릭하고 build 폴더안에 있는 파일들을 업로드한다.
업로드 한 뒤, 엔드포인트로 접속을 하면 정상적으로 접속할 수 있다.
