1_StaticWebHosting

모듈 1: Amazon S3를 사용한 정적 웹호스팅

이 모듈에서는 Amazon Simple Storage Service (S3)가 웹 애플리케이션의 정적 리소스를 호스팅하도록 구성합니다. 이후 모듈에서는 JavaScript를 사용하여 AWS Lambda 및 Amazon API Gateway로 구축 된 원격 RESTful API를 호출하여 동적 기능을 페이지에 추가합니다.

아키텍쳐 개요

이 모듈의 아키텍쳐는 매우 간단합니다. HTML, CSS, JavaScript, 이미지 및 기타 파일을 포함한 모든 정적 웹컨텐츠는 Amazon S3에 저장됩니다. 최종 사용자는 Amazon S3에 공개된 웹 사이트 URL을 사용하여 사이트에 액세스합니다. 사이트를 사용할 수 있도록 하기 위해서 웹 서버를 실행하거나 다른 서비스를 사용할 필요가 없습니다.

이번 모듈의 목적을 위해서 우리가 제공하는 Amazon S3 웹사이트 엔드포인드 URL을 사용합니다. http://{your-bucket-name}.s3-website.{region}.amazonaws.com 와 같은 형식을 취합니다. 대부분의 실제 응용 프로그램의 경우 사용자 지정 도메인을 사용하여 사이트를 호스팅하려고 합니다. 자신의 도메인을 사용하는데 관심이 있다면 맞춤 도메인을 사용하여 정적 웹 사이트 설정 을 참조하십시오.

구현 지침

다음 섹션에서는 구현 개요와 자세한 단계별 지침을 제공합니다. 개요는 이미 AWS Management Console에 익숙하거나 둘러보기를 거치지 않고 직접 서비스를 탐색하려는 경우 구현을 완료하는 데 충분한 내용을 제공합니다.

최신 버전의 Chrome, Firefox, 혹은 Safari 웹 브라우저를 사용하는 경우 섹션을 펼쳐야 단계별 지침이 표시됩니다.

리전 선택

이 실습은 다음 서비스를 지원하는 모든 AWS 리전에 배포 할 수 있습니다.

• Amazon Cognito
• AWS Lambda
• Amazon API Gateway
• Amazon S3
• Amazon DynamoDB

AWS 설명서에서 리전 표 를 참고하여 지원되는 서비스가 있는 지역을 확인할 수 있습니다. 지원되는 지역중에서는 N. Virginia, Ohio, Oregon, Ireland, Frankfurt, Tokyo, Sydney, Seoul 이 있습니다.

리전을 선택한 후에는 이 실습의 모든 리소스를 배포해야합니다. 시작하기전에 AWS Console의 오른쪽 상단에 있는 드롭 다운에서 리전을 선택하십시오.

1. S3 버킷 생성

콘솔 또는 AWS CLI를 사용하여 Amazon S3 버킷을 생성하십시오. 버킷의 이름은 전 세계적으로 고유해야합니다. wildrydes-firstname-lastname와 같은 이름을 사용할것을 권장합니다.

단계별 지침 (자세한 내용을 보려면 펼쳐주세요)

1. AWS Management Console에서 Services 를 선택한 다음 S3 를 선택하십시오.

2. + 버킷 만들기 을 선택하십시오.

3. wildrydes-firstname-lastname와 같은 전 세계적으로 고유한 이름을 설정하십시오.

4. 드롭다운 메뉴에서 이 실습에서 사용할 리전을 선택하십시오.

5. 설정을 복사할 버킷을 선택하지 않고 대화상자의 왼쪽 하단에 있는 생성 을 선택하십시오.

   

2. 콘텐츠 업로드

http://bit.ly/2EIuWha

위 경로에서 website.zip 압축파일을 다운로드 한 다음 압축을 풀고, 폴더 안에 있는 파일들을 사용자가 생성한 버킷에 업로드해서 이용하실 수 있습니다.

단계별 지침 (자세한 내용을 보려면 펼쳐주세요)

1. AWS Management Console에서 Services 를 선택한 다음 S3 를 선택하십시오.

2. 이전에 만든 wildrydes-firstname-lastname 버킷을 선택하십시오.

3. 업로드 버튼을 누르고, 다운받고 압축을 푼 website 폴더 내의 모든 파일을 드래그 앤 드랍으로 s3 버킷에 업로드 하십시오.

3. 버킷 정책에 Public Reads 권한을 허용

익명 사용자가 사이트를 볼 수있게하려면 버킷 정책을 새 Amazon S3 버킷에 추가해야합니다. 기본적으로 버킷은 AWS 계정에 대한 액세스 권한이있는 인증 된 사용자 만 액세스 할 수 있습니다.

부여할 정책에 대한 설정은 이 예제 를 참고하십시오. 익명 사용자에 대한 읽거 전용 액세스. 이 예제 정책은 인터넷상의 모든 사용자가 귀하의 콘텐츠를 볼 수있게합니다. 버킷 정책을 업데이트하는 가장 쉬운 방법은 콘솔을 사용하는 것입니다. 버킷을 선택하고 권한(Permissions) 탭을 선택한 다음 버킷 정책(Bucket Policy)을 선택하십시오.

단계별 지침 (자세한 내용을 보려면 펼쳐주세요)

1. S3 콘솔에서 섹션 1에서 생성 한 버킷의 이름을 선택하십시오.

2. 권한 탭을 선택한 다음, 버킷 정책를 선택하십시오.

3. 다음 정책 문서를 버킷 정책 편집기에 입력하고 [YOUR_BUCKET_NAME] 을 섹션 1에서 생성한 버킷 이름으로 변경하십시오.

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*"
           }
       ]
   }

   

4. 저장 버튼을 선택하여 새 정책을 적용하십시오.

4. 웹 사이트 호스팅 활성화

콘솔을 사용해서 정적 웹사이트 호스팅을 활성화합니다. 버킷을 선택한 후에 속성탭에서 이 작업을 수행할 수 있습니다. index document로 index.html 을 설정하고, error document는 비워두십시오. 자세한 내용은 정적 웹 사이트 호스팅을 위한 버킷 구성 의 설명서를 참고하십시오.

단계별 지침 (자세한 내용을 보려면 펼쳐주세요)

1. S3 콘솔의 버킷 세부 사항 페이지에서, 속성 탭을 선택하십시오.

2. 정적 웹 사이트 호스팅 을 선택하십시오.

3. 이 버킷을 사용하여 웹 사이트를 호스팅합니다. 을 선택하고, 인덱스 문서에 index.html를 입력하십시오. 다른 입력칸은 비워둡니다.

4. 먼저 엔드포인트 URL 을 확인하십시오. 그 뒤에 저장 버튼을 클릭하십시오. 이 URL을 나머지 실습에서 웹 응용 프로그램을 볼 때 사용할 것입니다. 여기에서 이 URL을 귀하의 웹 사이트의 기본 URL이라고 합니다.

5. 저장을 클릭하여 변경 사항을 저장하십시오.

   

작성한 내용 검증하기

이 구현 단계를 완료 한 후에는 S3 버킷의 웹 사이트 endpoint URL 을 방문하여 정적 웹 사이트에 액세스 할 수 있어야합니다.

원하는 브라우저에서 웹 사이트의 기본 URL (섹션 4에서 언급 한 URL)을 방문하십시오. Wild Rydes 홈 페이지가 표시되어야합니다. 기본 URL을 조회해야하는 경우 S3 콘솔로 이동하여 버킷을 선택한 다음 속성 탭에서 정적 웹 사이트 호스팅 을 클릭하십시오.

엔드포인트의 링크를 누르면 페이지가 보여지게 됩니다.

페이지가 올바르게 보여진다면 (아래 예제 스크린샷 참고), 다음 모듈 사용자 관리로 넘어가시면 됩니다.