23_ Study( 3 Tier Architecture S3 버킷 생성 및 정적 웹 사이트 호스팅, 정책 설정 )

먼저 정적 웹 사이트를 호스팅하는 과정은 4 단계로 요약됩니다. 첫 번째로 구현이 완성된 정적 웹 페이지를 빌드합니다. 빌드 과정이 끝나면 S3 대시보드에 접속하여 버킷을 생성하고, 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성합니다.

 

먼저 정적 웹 페이지를 빌드하는 과정부터 시작하겠습니다. 먼저 '빌드(build)'에 대해 잠시 알아보는 시간을 가지겠습니다. 빌드란 작성한 코드의 불필요한 데이터를 없애고, 통합 및 압축하여 배포하기 이상적인 상태를 만드는 과정을 말합니다. 빌드 과정을 통하여 코드를 담고 있는 데이터의 용량이 줄어들고, 웹 사이트의 로딩 속도가 빨라집니다.

build을 하기 전에 환경 변수 관련 설정 먼저 진행해 줍니다. 생성한 EC2 인스턴스 퍼블릭 DNS주소를 http://을 붙인 상태로 넣어줍니다. 완료되면, 터미널에 'npm run build' 명령어를 입력하여 빌드 과정을 진행합니다. 얼마간에 시간이 지나면 터미널 화면에 'Compiled Successfully'라는 문구가 보이며 빌드 과정이 마무리됩니다.

빌드 과정이 끝나면 client 디렉터리에 'build' 폴더가 생성된 것을 확인할 수 있습니다. 이것으로 빌드 과정이 완료됐습니다. 그럼 다음 단계로 S3 콘솔에 접속하여 버킷을 생성하겠습니다.

AWS 홈페이지에서 로그인을 합니다. 메인 콘솔 창에서 S3를 검색하여 S3 메인 화면에 접속합니다.

여기에서 '버킷 만들기' 버튼을 클릭합니다.

버킷 만들기 버튼을 클릭해 여러 옵션을 지정할 수 있는 페이지로 이동합니다. 우리는 '일반 구성' 옵션에 있는 내용만 완성하면 됩니다. 먼저 버킷 이름을 작성합니다. 버킷 이름은 각 리전에서 고유해야 합니다. 따라서 여러분은 위에 슬라이드에서 사용하는 버킷 이름을 이용하여 버킷을 생성하지 못합니다.

우리는 버킷에 build한 파일을 넣고 정적 웹 사이트를 호스팅을 해야함으로 퍼블릭으로 접근이 가능해야합니다. 그러기 위해 퍼블릭 액세스 차단 설정을 풀어줘야합니다.

버킷 만들기 버튼을 클릭하고 일정 시간이 지나면 버킷이 성공적으로 생성되었다는 메시지가 뜨는 화면으로 이동됩니다. 만들어진 버킷의 이름을 눌러 들어갑니다.

속성 메뉴를 눌러 이동합니다.

속성 메뉴 화면에서 페이지의 스크롤을 가장 아래로 내리면, 위의 이미지와 같이 '정적 웹 사이트 호스팅' 옵션이 보입니다. '편집' 버튼을 클릭합니다. 편집 버튼을 클릭하면 정적 웹 사이트 호스팅의 활성화/비활성화 여부를 묻는 창이 등장합니다.

활성화를 선택하면 여러 옵션을 추가로 변경할 수 있습니다. 여기서 저희는 인덱스 문서를 작성해야 합니다. 인덱스 문서 부분에는 웹 사이트 주소에 처음 접속했을 때 보일 기본 페이지를 지정합니다. '인덱스 문서' 기입란에 'index.html'을 작성합니다. '오류 문서' 부분은 공란으로 비워두셔도 좋지만, 혹시 모를 오류 발생 시 메인 페이지를 반환하기 위해서 'error.html'을 넣거나  'index.html'을 기입합니다. ['error.html'을 넣고싶으면 해당 html이 준비 되어있어야합니다.]

변경 사항이 저장되면, 정적 웹 사이트 호스팅 옵션을 성공적으로 편집했다는 메시지와 함께 속성 메뉴 페이지로 리디렉션 됩니다. 이번에도 페이지의 가장 아래로 스크롤을 내려서 방금 편집했던 정적 웹 사이트 호스팅 옵션 부분으로 이동합니다. 예전에 존재하지 않았던 버킷 웹 사이트 엔드 포인트가 생성되어 있습니다.

생성된 버킷 웹 사이트 엔드 포인트에 들어가게 되면 위와 같은 에러 메시지를 확인할 수 있습니다. 왜 그럴까요? 핵심 이유로는 버킷에 정적 웹 페이지 파일을 아직 업로드하지 않았고, 퍼블릭 액세스 설정 변경과 정책 생성을 하지 않았기 때문입니다.  남은 과정을 진행하면 해당 문제들을 해결할 수 있습니다.

퍼블릭 액세스 차단 옵션을 해제하고 정책을 생성합니다. 먼저 S3 메인 화면으로 이동하여 생성한 버킷을 클릭합니다. 그리고 '권한' 메뉴를 클릭합니다.

퍼블릭 액세스 차단(버킷 설정) 옵션 밑에 있는 '버킷 정책' 옵션을 찾습니다. '편집' 버튼을 클릭합니다

'정책 생성기' 버튼을 클릭합니다.

Select Type of Policy' 옵션에서는 'S3 Bucket Policy'를 선택합니다. 'Principal' 옵션은 권한을 적용할 사용자를 정합니다. 우리는 모두에게 공개할 것이므로 *(별표)를 입력합니다. 'Actions' 옵션에서는 'GetObject'를 선택합니다. GetObject 옵션을 선택하게 되면, 버킷에 접근하는 모든 사용자가 버킷 내에 저장된 객체 데이터를 읽을 수 있게 됩니다. 버킷을 웹 사이트 용도로 구성할 때 선택해 주시면 좋습니다.

정책은 JSON 형태로 생성됩니다. 생성된 정책을 드래그해서 복사한 뒤 Close 버튼을 누릅니다.

다시 버킷 정책 편집 페이지로 돌아가서 생성한 버킷 정책을 붙여 넣습니다. 그리고 '변경 사항 저장' 버튼을 클릭합니다.

버킷 이름 아래에 퍼블릭 액세스 가능으로 변경된걸 확인할 수 있습니다.

다음은 속성 메뉴 옆에 있는 '객체' 메뉴를 클릭해서 이동합니다. 그리고 업로드 버튼을 눌러줍니다.

.env 파일을 설정해주고 npm run build을 해 만든 build 폴더에는 위와 같은 파일이 들어있습니다. 웹 사이트를 호스팅하기 위해 build된 폴더를 s3에 업로드 시켜줘야 합니다.
객체를 업로드하는 페이지에 필요한 파일을 드래그& 드랍 형식으로 업로드합니다. 이 과정에서 주의하셔야 할 점은 build 폴더 자체를 업로드하는 게 아닌 build 폴더 안에 저장된 파일만 업로드해야 한다는 점입니다.

화면과 같이 build 폴더 안에 있는 파일들이 업로드 대기 목록에 추가됩니다. '업로드' 버튼을 눌러서 다음 과정을 진행합니다.

업로드가 완료되면 화면처럼 '업로드 성공 메시지'를 확인할 수 있습니다.

이제 다시 버킷 웹 사이트 엔드포인트로 접속을 하게 되면 호스팅 하고자 하는 정적 웹사이트를 확인 할 수 있게됩니다.

다음으로는 RDS을 생성하고 설정하는 법에 대해 포스팅하겠습니다.