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

Serverless_Web_App_LP_assets-02

이 모듈의 아키텍처는 매우 간단합니다. HTML, CSS, JavaScript, 이미지 및 기타 파일을 비롯한 모든 정적 웹 콘텐츠가 Amazon S3에 저장됩니다. 그러면 최종 사용자가 Amazon S3를 통해 노출된 퍼블릭 웹 사이트 URL을 사용하여 사이트에 액세스합니다. 따라서 사이트를 제공하기 위해 웹 서버를 실행하거나 다른 서비스를 사용할 필요가 없습니다.

이 모듈에서는 Amazon에서 제공하는 Amazon S3 웹 사이트 엔드포인트 URL을 사용합니다. 해당 URL의 형식은 다음과 같습니다. http://{your-bucket-name}.s3-website.{region}.amazonaws.com. 대부분의 실제 애플리케이션의 경우 사용자 정의 도메인을 사용하여 사이트를 호스팅합니다. 자체 도메인을 사용하려는 경우 Amazon S3 설명서에 나와 있는 사용자 정의 도메인을 사용한 정적 웹 사이트 설정 지침을 따르십시오.

모듈 소요 시간: 30분

사용된 서비스: Amazon S3

CloudFormation 템플릿: Amazon S3을 사용한 작업에 이미 익숙하거나 Lambda 및 API Gateway를 바로 사용하려는 경우, 원하는 리전에서 이 AWS CloudFormation 템플릿 중 하나를 사용하여 필요한 리소스를 자동으로 구축할 수 있습니다.

리전 CloudFormation 템플릿
미국 동부(버지니아 북부) 스택 시작 >
미국 동부(오하이오) 스택 시작 >
미국 서부(오레곤) 스택 시작 >
EU(프랑크푸르트) 스택 시작 >
EU(아일랜드) 스택 시작 >
EU(런던) 스택 시작 >
아시아 태평양(도쿄) 스택 시작 >
아시아 태평양(서울) 스택 시작 >
아시아 태평양(시드니) 스택 시작 >
아시아 태평양(뭄바이) 스택 시작 >
Serverless_Web_App_LP_assets-17

CloudFormation 시작 지침

  1. 위에서 원하는 리전의 스택 시작 링크를 클릭합니다.

  2. Select Template(템플릿 선택) 페이지에서 Next(다음)를 클릭합니다.

  3. Website Bucket Name(웹 사이트 버킷 이름)에 다음과 같이 전역적으로 고유한 이름을 지정합니다. wildrydes-yourname 그리고 Next(다음)를 클릭합니다.

  4. Options(옵션) 페이지에서 기본값을 모두 그대로 두고 Next(다음)를 클릭합니다.

  5. Review(검토) 페이지에서 해당 확인란을 선택하여 CloudFormation이 IAM 리소스를 생성하도록 하고 Create(생성)를 클릭합니다.

    이 템플릿은 사용자 정의 리소스를 사용하여 중앙 S3 버킷에서 자체 전용 버킷으로 정적 웹 사이트 자산을 복사합니다. 사용자 정의 리소스가 계정의 새 버킷에 데이터를 쓰려면 해당 권한이 부여된 IAM 역할을 생성해야 합니다.

  6. 그리고 wildrydes-webapp-1 스택이 CREATE_COMPLETE상태가 될 때까지 기다립니다.

  7. 그런 다음 wildrydes-webapp-1 스택을 선택한 상태로 Outputs(출력) 탭을 클릭하고 WebsiteURL 링크를 클릭합니다.

  8. Wild Rydes 홈 페이지가 제대로 로드되는지 확인하고 다음 모듈, 사용자 관리로 넘어갑니다.


아래의 단계별 지침에 따라 정적 웹 사이트를 호스팅합니다. 섹션을 확장하려면 각 단계 번호를 클릭하십시오.

  • 1단계. 리전 선택


    이 웹 애플리케이션은 Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB 등 이 애플리케이션에 사용된 모든 서비스를 지원하는 AWS 리전에 배포할 수 있습니다.

    리전 테이블에서 서비스를 지원하는 리전을 확인할 수 있습니다. 선택 가능한 지원되는 리전의 예는 다음과 같습니다.

    • 미국 동부(버지니아 북부)
    • 미국 동부(오하이오)
    • 미국 서부(오레곤)
    • EU(프랑크푸르트)
    • EU(아일랜드)
    • EU(런던)
    • 아시아 태평양(도쿄)
    • 아시아 태평양(서울)
    • 아시아 태평양(시드니)
    • 아시아 태평양(뭄바이)

     

    AWS Management Console의 오른쪽 상단에 있는 드롭다운에서 리전을 선택합니다.

    region

    (확대하려면 클릭)

    region
  • 2단계. S3 버킷 생성

    Amazon S3을 사용하면 웹 서버를 구성하거나 관리할 필요 없이 정적 웹 사이트를 호스팅할 수 있습니다. 이 단계에서는 웹 애플리케이션의 모든 정적 자산(예: HTML, CSS, JavaScript 및 이미지 파일)을 호스팅하는 데 사용할 새 S3 버킷을 생성합니다. 

    이 단계에서는 콘솔 또는 AWS CLI를 사용하여 Amazon S3 버킷을 생성합니다. 버킷 이름은 전역적으로 고유해야 합니다. 따라서 wildrydes-firstname-lastname같은 이름을 사용하는 것이 좋습니다. 이미 사용 중인 버킷 이름이라는 오류가 발생할 경우, 고유한 이름을 찾을 때까지 숫자 또는 문자를 추가해 보십시오.


    1. AWS Management Console에서 Services(서비스)를 선택한 후 Storage(스토리지)에서 S3을 선택합니다.
    2. +Create Bucket(버킷 생성)을 선택합니다.
    3. 버킷에 wildrydes-firstname-lastname같은 전역적으로 고유한 이름을 지정합니다. 이미 사용 중인 버킷 이름이라는 오류가 발생할 경우, 고유한 이름을 찾을 때까지 숫자 또는 문자를 추가해 보십시오.
    4. 이 워크숍에서 사용할 리전을 드롭다운에서 선택합니다.
    5. 대화 상자의 왼쪽 하단에서 Create(생성)를 선택합니다. 이때 설정을 복사해올 버킷은 선택하지 않습니다.
  • 3단계. 콘텐츠 업로드

    이 단계에서는 이 모듈에서 사용할 웹 사이트 자산을 S3 버킷으로 업로드합니다. AWS Management Console(Google Chrome 브라우저 필요), AWS CLI 또는 제공된 CloudFormation 템플릿을 사용하여 이 단계를 수행할 수 있습니다. AWS CLI가 로컬 시스템에 이미 설치 및 구성되어 있는 경우, AWS CLI를 사용하는 것이 좋습니다. 그렇지 않은 경우 Google Chrome 최신 버전이 설치되어 있으면 콘솔을 사용합니다.

    콘솔 단계별 지침

    AWS Management Console을 통해 로컬 디렉터리의 모든 파일 및 하위 디렉터리를 업로드하려면 최신 버전의 Chrome 웹 브라우저를 사용해야 합니다. Chrome을 사용할 수 없는 경우 AWS CLI 또는 제공된 CloudFormation 템플릿을 사용하는 방법에 대한 지침을 따르십시오.

    1. 이 링크를 사용하여 이 리포지토리의 아카이브를 다운로드합니다.

    2. 로컬 시스템에 다운로드한 아카이브의 압축을 풉니다.

    3. Chrome에서 AWS Management Console을 엽니다. Services(서비스)를 선택한 후 Storage(스토리지)에서 S3을 선택합니다.

    4. 이전 단계에서 생성한 버킷을 선택하고 Objects(객체) 탭이 표시되어 있는지 확인합니다.

    5. Windows 탐색기 또는 macOS Finder를 열고 1단계에서 다운로드한 zip 파일의 압축 해제된 콘텐츨 찾습니다.

    6. 로컬 시스템에서 WebApplication/1_StaticWebHosting/website 디렉터리로 이동합니다.

    7. website 디렉터리의 파일과 하위 디렉터리를 모두 선택합니다. website 디렉터리 자체를 선택해서는 안 됩니다.

    8. 선택한 파일을 로컬 파일 시스템에 S3 콘솔의 Objects(객체) 탭에 있는 콘텐츠로 끌어 놓습니다.

    9. 나타나는 대화 상자의 왼쪽 하단에서 Upload(업로드)를 선택합니다.

    10. 업로드가 완료될 때까지 기다린 후 website 디렉터리의 콘텐츠가 S3 콘솔에 표시되는지 확인합니다. 단일 website 디렉터리가 표시될 경우 버킷에서 삭제하고 다시 이 지침에 따라 디렉터리의 콘텐츠만 선택하여 S3 콘솔로 끌어 놓습니다.

    CLI 단계별 지침

    CLI가 이미 설치 및 구성되어 있는 경우, CLI를 사용하여 필요한 웹 자산을 s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website 디렉터리에서 버킷으로 복사할 수 있습니다.

    1. 다음 명령을 실행합니다. 이때 YOUR_BUCKET_NAME 자리 표시자는 이전 섹션에서 사용한 이름으로 바꾸고 YOUR_BUCKET_REGION 자리 표시자는 버킷을 생성한 리전 코드(예: us-east-2)로 바꿉니다.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION
    2. 명령이 성공적으로 실행되면 버킷에 복사한 객체의 목록이 표시됩니다.

     

    CloudFormation 단계별 지침

    앞서 설명한 방법 중 하나를 사용할 수 없는 경우 제공된 CloudFormation 템플릿을 시작하여 필요한 자산을 S3 버킷으로 복사할 수 있습니다. 리전을 선택하고 이 모듈의 CloudFormation 템플릿 섹션에서 스택 시작 링크를 클릭하여 CloudFormation 템플릿을 시작합니다.

  • 4단계. 퍼블릭 읽기를 허용하도록 버킷 정책 추가

    버킷 정책을 사용하여 S3 버킷의 콘텐츠에 액세스할 수 있는 사용자를 정의할 수 있습니다. 버킷 정책은 버킷의 객체에 대해 다양한 작업을 실행하도록 허용된 보안 주체를 지정하는 JSON 문서입니다.

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

    익명 사용자에게 읽기 전용 액세스 권한을 부여하는 이 정책 예제를 참조하십시오. 이 정책 예제는 인터넷의 모든 사용자가 콘텐츠를 보도록 허용합니다. 버킷 정책을 업데이트하는 가장 쉬운 방법은 콘솔을 사용하는 것입니다. 버킷을 선택하고 Permission(권한) 탭을 선택한 후 Bucket Policy(버킷 정책)를 선택합니다.


    1. S3 콘솔에서 섹션 1에서 생성한 버킷의 이름을 선택합니다.
    2. Permissions(권한) 탭과 Bucket Policy(버킷 정책)를 차례로 선택합니다.
    3. 다음 정책 문서를 버킷 정책 편집기에 입력합니다. 이때 [YOUR_BUCKET_NAME] 자리 표시자를 섹션 1에서 생성한 버킷의 이름으로 바꿉니다.
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. Save(저장)를 선택하여 새 정책을 적용합니다.
  • 5단계. 웹 사이트 호스팅 사용

    기본적으로 S3 버킷의 객체는 http://.amazonaws.com// 구조의 URL을 통해 사용할 수 있습니다. 루트 URL(예: /index.html)의 자산을 서비스하려면 버킷에서 웹 사이트 호스팅을 활성화해야 합니다. 그러면 버킷의 AWS 리전별 웹 사이트 엔드포인트, .s3-website-.amazonaws.com에서 객체를 사용할 수 있습니다.

    또한 웹 사이트에 사용자 정의 도메인도 사용할 수 있습니다. 예를 들어 http://www.wildrydes.com이 S3에서 호스팅됩니다. 사용자 정의 도메인을 설정하는 방법은 이 워크숍에서 다루지 않지만 설명서에서 자세한 지침을 참조할 수 있습니다.

    이 단계에서는 콘솔을 사용하여 정적 웹 사이트 호스팅을 활성화합니다. 이 작업은 버킷을 선택한 후 Properties(속성) 탭에서 수행할 수 있습니다. 인덱스 문서로 index.html 문서를 설정하고 오류 문서를 비워 둡니다. 자세한 내용은 정적 웹 사이트 호스팅을 위한 버킷 구성에 대한 설명서를 참조하십시오.


    1. S3 콘솔의 버킷 세부 정보 페이지에서 Properties(속성) 탭을 선택합니다.
    2. Static website hosting(정적 웹 사이트 호스팅) 카드를 선택합니다.
    3. Use this bucket to host a website(이 버킷을 사용하여 웹 사이트 호스팅)을 선택하고 index.html 문서를 인덱스 문서로 입력합니다. 다른 필드는 비워 둡니다.
    4. Save(저장)를 선택하기 전에 대화 상자의 상단에 있는 Endpoint(엔드포인트) URL을 기록해 둡니다. 워크숍의 나머지 부분에서 웹 애플리케이션을 보는 데 이 URL을 사용하게 됩니다. 지금부터 이 URL을 웹 사이트의 기본 URL이라고 합니다.
    5. Save(저장)를 클릭해 변경 사항을 저장합니다.
  • 6단계. 구현 확인

    이 구현 단계를 완료하고 나면 S3 버킷의 웹 사이트 엔드포인트 URL에 접속하여 정적 웹 사이트에 액세스할 수 있습니다.

    원하는 브라우저에서 웹 사이트의 기본 URL(이전 섹션에서 기록해 둔 URL)에 접속합니다. Wild Rydes 홈 페이지가 표시됩니다. 기본 URL을 조회해야 하는 경우 S3 콘솔에 접속하고 버킷을 선택한 후 Properties(속성) 탭에서 Static Web Hosting(정적 웹 호스팅)을 클릭합니다.

    페이지가 올바르게 렌더링되면(아래에서 예제 스크린샷 참조) 다음 모듈인 사용자 관리로 넘어갈 수 있습니다.

    wildrydes-homepage