AWS 기반 프로젝트:

서버리스 웹 애플리케이션 구축

AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB, Amazon Cognito 사용

소개

정적 웹 사이트 호스팅

사용자 관리

서버리스 백엔드 구축

RESTful API 배포

템플릿 리소스

모듈 1. 정적 웹 호스팅

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

아키텍처 개요

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

이 모듈의 목적상 제공된 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(런던) 스택 시작 >
아시아 태평양(도쿄) 스택 시작 >
아시아 태평양(서울) 스택 시작 >
아시아 태평양(시드니) 스택 시작 >
아시아 태평양(뭄바이) 스택 시작 >

CloudFormation 시작 지침

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

  2. 템플릿 선택 페이지에서 다음을 클릭합니다.

  3. 웹 사이트 버킷 이름에 전역적으로 고유한 이름(예: wildrydes-yourname)을 입력하고 다음을 클릭합니다.

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

  5. 검토 페이지에서 CloudFormation의 IAM 리소스 생성을 확인하는 확인란에 표시하고 생성을 클릭합니다.

    이 템플릿은 사용자 지정 리소스를 사용하여 중앙 S3 버킷의 정적 웹 사이트 애셋을 전용 버킷으로 복사합니다. 사용자 지정 리소스가 계정의 새 버킷에 쓰게 하려면 해당 권한을 대행할 수 있는 IAM 역할을 만들어야 합니다.

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

  7. wildrydes-webapp-1 스택이 선택된 상태에서 출력 탭을 클릭하고 WebsiteURL 링크를 클릭합니다.

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

구현 지침

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

  • 1단계. 리전 선택

    리전 선택

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

    리전 표를 참조하여 지원되는 서비스를 포함하는 리전을 확인할 수 있습니다. 지원되는 리전 중에서 선택할 수 있습니다.

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

     

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

    (확대하려면 클릭)

  • 2단계. S3 버킷 생성

    S3 버킷 생성

    Amazon S3를 사용하면 웹 서버를 구성하거나 관리할 필요 없이 정적 웹 사이트를 호스팅할 수 있습니다. 이 단계에서는 웹 애플리케이션에 대해 모든 정적 애셋(HTML, CSS, JavaScript, 이미지 파일 등)을 호스팅하는 데 사용할 새로운 S3 버킷을 만들겠습니다. 

    이 단계에서는 콘솔이나 AWS CLI를 사용하여 Amazon S3 버킷을 만듭니다. 버킷 이름은 전역적으로 고유해야 합니다. wildrydes-firstname-lastname 등과 같은 이름을 사용하는 것이 좋습니다. 버킷 이름이 이미 존재한다는 오류가 발생하면, 사용되지 않는 이름을 찾을 때까지 숫자나 문자를 추가하십시오.

    1. AWS Management Console에서 서비스를 선택한 후 스토리지에서 S3를 선택합니다.
    2. +버킷 생성을 선택합니다.
    3. 버킷에 전역적으로 고유한 이름을 제공합니다(예: wildrydes-firstname-lastname). 버킷 이름이 이미 존재한다는 오류가 발생하면, 사용되지 않는 이름을 찾을 때까지 숫자나 문자를 추가하십시오.
    4. 이 연습에 사용하기 위핸 선택한 리전을 드롭다운에서 선택합니다.
    5. 설정을 복사할 버킷을 선택하지 말고 대화 상자 하단 왼쪽에서 생성을 선택합니다.

  • 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을 엽니다. [서비스]를 선택한 후 스토리지에서 [S3]를 선택합니다.

    4. 이전 단계에서 생성한 버킷을 선택하고 현재 탭이 [개요] 탭인지 확인합니다.

    5. Windows 파일 탐색기 또는 macOS Finder를 열고 첫 단계에서 다운로드한 zip 파일의 압축을 푼 내용을 찾아봅니다.

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

    7. website 디렉터리 아래에서 모든 파일과 하위 디렉터리를 선택합니다. website 디렉터리 자체를 선택하지 않도록 합니다.

    8. 로컬 파일 시스템에서 선택한 파일을 S3 콘솔의 [개요] 탭 아래의 콘텐츠로 끌어 놓습니다.

    9. 대화 상자가 나타나면 하단 왼쪽에서 [업로드]를 선택합니다.

    10. 업로드가 완료될 때까지 기다린 후 S3 콘솔에 나열된 website 디렉터리의 콘텐츠가 표시되는지 확인합니다. 하나의 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 계정에 대해 액세스 권한을 가진 인증된 사용자만 버킷에 액세스할 수 있습니다.

    익명 사용자에게 읽기 전용 액세스 권한을 부여할 이 정책 예제를 참조하십시오. 이 예제 정책은 인터넷 사용자가 해당 콘텐츠를 볼 수 있습니다. 버킷 정책을 업데이트하는 가장 쉬운 방법은 콘솔을 사용하는 것입니다. 버킷을 선택하고 권한 탭을 선택한 후 버킷 정책을 선택합니다.

    1. S3 콘솔에서, 1단원에서 만든 버킷의 이름을 선택합니다.
    2. [권한] 탭을 선택한 후 [버킷 정책]을 선택합니다.
      1. S3 콘솔에서 버킷 이름(1단원에서 생성한 버킷)을 선택합니다.
      2. [권한] 탭을 선택하고 퍼블릭 액세스 설정을 선택했는지 확인합니다.
      3. [편집]을 클릭하고 다음을 선택 취소합니다.
        • [새 퍼블릭 버킷 정책 차단]
        • [버킷에 퍼블릭 정책이 있으면 퍼블릭 및 교체 계정 액세스 차단]
      4. [저장]을 클릭합니다.
      5. 확인 모달 창이 나타나면 'confirm'을 입력하고 [확인]을 클릭합니다. 
      6. 계속 [권한] 탭에서 [버킷 정책]을 선택합니다.  
    3. [YOUR_BUCKET_NAME]을 1단원에서 생성한 버킷의 이름으로 바꾸고 다음 정책 문서를 버킷 정책 편집기에 입력합니다.
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. 저장을 선택하여 새 정책을 적용합니다.

  • 5단계. 웹 사이트 호스팅 사용

    웹 사이트 호스팅 사용

    기본적으로 S3 버킷의 객체는 http://.amazonaws.com// 형식의 URL을 통해 사용할 수 있습니다. 루트 URL(예: /index.html)의 애셋을 서비스하려면 버킷에서 웹 사이트 호스팅을 사용하도록 설정해야 합니다. 이렇게 하면 버킷의 AWS 리전 웹 사이트 엔드포인트 .s3-website-.amazonaws.com에서 객체를 사용할 수 있습니다.

    웹 사이트에 사용자 지정 도메인을 사용할 수도 있습니다. 예를 들어 http://www.wildrydes.com은 S3에서 호스팅됩니다. 사용자 지정 도메인 설정은 이 연습에서 다루지 않지만 자세한 내용을 설명하는 설명서가 제공됩니다.

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

    1. S3 콘솔의 버킷 세부 정보 페이지에서 속성 탭을 선택합니다.
    2. 정적 웹 사이트 호스팅 카드를 선택합니다.
    3. 이 버킷을 사용하여 웹 사이트를 호스팅합니다를 선택하고 인덱스 문서에 index.html을 입력합니다. 다른 필드는 그대로 두십시오.
    4. 대화 상자 상단의 엔드포인트 URL을 메모하고 저장을 선택합니다. 이 URL은 이 연습의 나머지 부분에서 웹 애플리케이션을 보는 데 사용됩니다. 이제 이 URL은 웹 사이트의 기본 URL로 언급될 것입니다.
    5. 저장을 클릭하여 변경 사항을 저장합니다.

  • 6단계. 구현 검증

    구현 검증

    이러한 구현 단계를 완료한 후, S3 버킷에 대한 웹 사이트 엔드포인트 URL을 방문하여 정적 웹 사이트에 액세스할 수 있어야 합니다.

    웹 브라우저에서 웹 사이트의 기본 URL(이전 단원에서 기록해 둔 URL)을 방문하십시오. Wild Rydes 홈페이지가 표시되어야 합니다. 기본 URL을 확인하려면, S3 콘솔을 방문하여 버킷을 선택한 후 속성 탭에서 정적 웹 호스팅을 클릭합니다.

    페이지가 제대로 표시되면(아래의 스크린샷 예 참조) 다음 모듈인 사용자 관리로 진행하십시오.

다음: 사용자 관리