AWS 기반 프로젝트

현대적 웹 애플리케이션 구축

웹 애플리케이션 배포, 데이터베이스 연결 및 사용자 행동 분석

모듈 1: 정적 웹 사이트 구축

이 모듈에서는 Amazon S3에서 정적 웹 사이트를 호스팅하고 클라우드 기반 IDE, AWS Cloud9를 설치합니다.  

개요

이 모듈에서는 Amazon S3(Simple Storage Service)에서 Mythical Mysfit 웹 사이트의 정적 콘텐츠(html, js, css, 미디어 콘텐츠 등)를 호스팅합니다. S3는 HTTP를 통해 직접 저장된 객체를 지원할 수 있는, 내구성 및 가용성이 뛰어난 저가의 객체 스토리지 서비스입니다. 이는 인터넷 상의 사이트에서 정작 웹 사이트 콘텐츠를 직접 웹 브라우저에 지원하는 데 매우 유용한 도구입니다.

mysfits를 S3에 저장하기 전에 먼저 AWS Cloud9를 설치해야 합니다. Cloud9은 브라우저만으로 코드를 작성, 실행 및 디버깅할 수 있는 클라우드 기반 IDE(통합 개발 환경)입니다.  

아키텍처 다이어그램

정적 웹 사이트 생성

 완료 시간

20분

구현 지침

  • A: AWS Console에 로그인

    먼저 AWS Console에 로그인하여 이 워크샵에서 사용할 AWS 계정을 확인합니다.

    B: 리전 선택

    이 웹 애플리케이션은 이 애플리케이션에 사용되는 모든 서비스를 지원하는 어떤 AWS 리전에든 배포할 수 있습니다. 리전 표를 참조하면 어떤 리전이 서비스를 지원하는지 확인할 수 있습니다. 지원되는 리전은 다음과 같습니다.

    • us-east-1(버지니아 북부)
    • us-east-2(오하이오)
    • us-west-2(오레곤)
    • eu-west-1(아일랜드)

    AWS Management Console의 우측 상단 드롭다운에서 리전을 선택합니다.

  • A: 새로운 AWS Cloud9 환경 생성

    AWS Console 홈페이지에서 Cloud9를 서비스 검색창에 입력하고 선택합니다.

    lex 봇 만들기

    (확대하려면 클릭)

    Cloud9 홈페이지에서 환경 생성을 클릭합니다.

    lex 봇 만들기

    (확대하려면 클릭)

    lex 봇 만들기

    원하는 설명과 함께 환경의 이름을 MythicalMysfitsIDE로 지정하고 다음 단계를 클릭합니다.

    lex 봇 만들기

    (확대하려면 클릭)

    lex 봇 만들기

    환경 설정의 기본값을 그대로 유지하면서 다음 단계를 클릭합니다.

    lex 봇 만들기

    (확대하려면 클릭)

    lex 봇 만들기

    [환경 생성]을 선택합니다.

    lex 봇 만들기

    (확대하려면 클릭)

    lex 봇 만들기

    IDE의 생성이 완료되면 다음과 같은 형태의 환영 화면이 표시됩니다.

    lex 봇 만들기

    (확대하려면 클릭)

    lex 봇 만들기
    B: Mythical Mysfits Workshop Repository 복제

    하단 패널에 터미널 명령줄이 열려서 사용할 준비가 된 상태를 볼 수 있습니다. 터미널에서 다음과 같은 git 명령을 실행하여 이 자습서를 종료하는 데 필요한 코드를 복제합니다.

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    리포지토리를 복제하면 복제된 파일이 프로젝트 탐색기에 포함된 것을 볼 수 있습니다.

    복제된 파일

    (확대하려면 클릭)

    복제된 파일

    터미널에서 디렉토리를 새로 복제한 리포지토리 디렉토리로 변경합니다.

    cd aws-modern-application-workshop
  • A: 웹 사이트 호스팅을 위해 S3 버킷을 생성 및 구성합니다.

    다음에는 AWS CLI를 통해 Amazon S3의 정적 웹 사이트를 호스팅하는 데 필요한 인프라 구성요소를 생성합니다.

    먼저 사용자는 S3 버킷을 생성하고 아래 이름(mythical-mysfits-bucket-name)을 자신의 고유한 버킷 이름으로 바꿉니다. 참고: 버킷 이름의 요구사항을 참조하십시오. 선택한 이름은 이 워크샵 중 다른 여러 곳에서도 사용하므로 나중에 사용할 경우에 대비하여 복사하여 저장합니다.

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    버킷을 생성했으므로 이제 버킷을 정적 웹 사이트 호스팅에 사용할 수 있는 몇 가지 구성 옵션을 설정해야 합니다. 이 구성을 통해 버킷 내 객체를 해당 버킷에 대해 등록된 공개 DNS 이름을 사용하여 요청하거나, 사이트 요청을 선택된 웹 사이트 홈페이지(대부분의 경우에 index.html)에 대한 DNS 이름의 기본 경로로 설정할 수 있습니다.

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: S3 버킷 정책 업데이트

    Amazon S3에서 생성된 모든 버킷은 기본적으로 완전히 사설 웹 사이트입니다. 공개 웹 사이트로 사용되려면 이 새 버킷 내에 저장된 객체를 누구나 공개적으로 액세스할 수 있다고 명시한 S3 버킷 정책을 생성해야 합니다. 버킷 정책은 다양한 보안 주체(우리 경우에는 일반 대중 또는 불특정 다수)가 수행할 수 있도록 허가한(또는 허가하지 않은) S3 작업(S3 API 호출)을 규정하는 JSON 문서입니다.

    필요한 버킷 정책의 JSON 문서는 ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json에 있습니다. 이 파일에는 고객이 선택한 버킷 이름으로 바꾸어야 하는 문자열이 있습니다(REPLACE_ME_BUCKET_NAME).

    참고: 이 워크샵 내내 고객은 콘텐츠를 바꾸어야 하는 여러 파일을 유사하게 열게 됩니다(모두 Windows의 CTRL-F 또는 Mac의 ⌘-F를 사용하여 쉽게 찾을 수 있도록 REPLACE_ME_의 접두사가 붙어 있음). 

    Cloud9의 파일을 열려면 왼쪽 패널의 파일 탐색기를 사용하여 website-bucket-policy.json을 두 번 클릭합니다.

    Cloud9의 파일 열기

    (확대하려면 클릭)

    Cloud9의 파일 열기

    이렇게 하면 파일 편집기 패널의 bucket-policy.json을 열 수 있습니다. 고객이 선택하여 이전 명령줄에 사용한 버킷 이름으로 표시된 문자열을 바꿉니다.

    버킷 이름을 바꿉니다.

    (확대하려면 클릭)

    버킷 이름을 바꿉니다.

    다음의 CLI 명령을 실행하여 공개 버킷 정책을 웹 사이트에 추가합니다.

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: 웹 사이트 콘텐츠를 S3에 게시

    새 웹 사이트 버킷을 적절하게 구성했으므로 이제 Mythical Mysfits 홈페이지의 첫 번째 반복을 버킷에 추가합니다. 파일을 복사하는 Linux 명령에 유사한 S3 CLI 명령을 사용하여 IDE에서 로컬로 제공되는 index.html 페이지를 새 S3 버킷에 복사합니다(버킷 이름을 적절하게 대체).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    이제 선호하는 웹 브라우저를 열어서 아래 URI 중 하나를 주소 표시줄에 입력합니다. 아래 URI에는 리전 이름 앞에 ‘.’ 및 ‘-‘가 있습니다. 사용하는 리전에 따라 사용해야 하는 기호들입니다.

    REPLACE_ME_YOUR_REGION을 바꿀 문자열은 S3 버킷을 생성한 리전과 일치해야 합니다(예를 들어, us-east-1).

    us-east-1(버지니아 북부), us-west-2(오레곤), eu-west-1(아일랜드).

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    us-east-2(오하이오).

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    축하합니다. 기본적인 정적 Mythical Mysfits Website를 생성했습니다!

    이제 모듈 1이 완료되었습니다.

다음에 애플리케이션을 웹 서버에서 호스팅합니다.