모듈 1 - IDE 설정 및 정적 웹 사이트 호스팅

소요 시간 : 20분
사용된 서비스:
이번 모듈에서는 AWS Cloud9 상에서 클라우드 기반 IDE를 생성하고 Mythical Mysfits 웹사이트의 첫
번째 버전을 배포해 보겠습니다.
시작하기
이번 웹 애플리케이션은 이번 애플리케이션을 구축하기 위해 사용된 서비스를 지원하는 모든 리전에서 배포될 수 있습니다.
AWS 관리형 콘솔 우측 상단에 리전에서 us-east-1(N. Virginia)를 선택합니다.

새로운 AWS Cloud9 환경 생성하기
AWS 콘솔 화면의 서비스 검색 창에 Cloud9을 입력하고 선택합니다.

Cloud9 홈페이지에서 Create Environment를 클릭합니다.

환경의 이름으로 MythicalMysfitsIDE 을 입력하고 Description은 원하는 형태로 적어준 후 Next step을 클릭합니다.

환경 셋팅은 기본값으로 유지한 채 Next step을 클릭합니다.

Create Environment를 클릭합니다.

IDE 생성이 끝나면 다음과 같은 화면이 보입니다.

Mythical Mysfits 워크샵 리포지토리 가져오기
Cloud9 IDE 하단에 보시면 커멘트라인 터미널을 확인하실 수 있습니다. 해당 터미널에 이번 튜토리얼을 완료하기 위해 필요한 코드를 복사하기 위한 깃 명령어를 입력합니다.
git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git
리포지토리를 복사한 후, 프로젝트 검색창에 다음과 같은 파일을 확인하실 수 있습니다.

커멘드에서 새로 복사된 리포지토리의 디렉토리로 이동합니다.
cd aws-modern-application-workshop
Amazon S3 내부에 정적 웹사이트 생성하기
이번에는 AWS CLI를 이용해 Amazon S3에서 웹사이트 호스팅을 하기 위한 인프라 영역을 생성합니다.
우선, S3 bucket을 생성합니다, 버킷의 이름은 고유해야 하므로 REPLACE_ME_BUCKET_NAME을 다른 고유한 값으로 변경합니다. 나중에 사용하기 위해 입력한 이름을 복사해둡니다.
aws s3 mb s3://REPLACE_ME_BUCKET_NAME
이제 버킷을 생성했으며 정적 웹사이트 호스팅 기능을 사용하기 위해 해당 버킷의 구성 옵션을 추가해야합니다. 이 구성을 사용하면 버킷에 등록된 공용 DNS 이름을 사용하여 버킷의 객체를 요청할 수 있으며 선택한 웹사이트 홈페이지의 DNS 이름을 통한 기본 경로로 요청할 수 있습니다.
aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
S3 버킷 정책 업데이트하기
기본적으로 Amazon S3 안에 생성된 모든 버킷은 완전히 프라이빗합니다. 따라서 퍼블릭 웹사이트로 사용하기 위해서 해당 버킷에 저장된 객체가 누구든지 퍼블릭하게 접근할 수 있음을 나타내는 S3 버킷 정책을 만들어야합니다. 버킷 정책은 서로 다른 주체(Principles)가 수행할 수 있는 S3 작업(S3 API 호출)을 정의하는 JSON 문서로 구성됩니다.
버킷 정책을 구성하기 위해 필요한 JSON 문서는 ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
에 위치해 있습니다. 이 파일에는 이전에 REPLACE_ME_BUCKET_NAME으로 설정한 값을 대체해야하는 문자열이 포함되어 있습니다.
Cloud9에서 파일을 열기 위해 좌측에 파일 탐색기를 이용하시기 바랍니다. website-bucket-policy.json
을 더블 클릭합니다.

그러면 에디터 화면에 해당 파일이 열립니다. 파일 내에서 버킷 이름을 개인적으로 생성한 버킷 이름으로 변경합니다.

생성한 웹 사이트에 퍼블릭 버킷 정책을 적용하기 위해 다음 CLI 명령어를 입력합니다. (이때 동일하게 REPLACE_ME_BUCKET_NAME을 변경해줍니다.)
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
S3에 웹사이트 콘텐츠 발행하기
이 새로운 웹사이트를 위한 버킷이 적절하게 구성되어습니다. 이제 Mythical Mysfits 홈페이지를 위한 파일을 버킷으로 옮겨야합니다. 이를 위해 linux의 파일 복사 명령어(cp)와 유사한 S3 CLI 명령어를 사용해서 index.html 파일을 IDE에서 새로운 S3 버킷으로 옮기도록 하겠습니다. (REPLACE_ME_BUCKET_NAME을 변경해줍니다.)
aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html
이제 해당 홈페이지를 확인하기 위해 아래 URL의 버킷 이름을 적절하게 변경한 후 선호하는 브라우저의 주소창에 이를 입력해봅니다.
http://REPLACE_ME_BUCKET_NAME.s3-website-us-east-1.amazonaws.com

축하합니다! Mythical Mysfits 웹사이트를 성공적으로 만들었습니다.
Amazon CloudFront에 대한 정보 - AWS상에서 웹사이트를 서비스하기 위한 모범사례
이번 모듈에서 Mythical Mysfits 웹사이트의 정적 웹 사이트 부분을 빠르게 구현하기 위해 우리는 S3 버킷을 퍼블릭하게 접근 가능하게 만들었습니다. 퍼블릭한 S3 버킷을 생성하는 것이 대부분의 애플리케이션에서 나쁘지 않은 선택이지만 AWS 상에서 퍼블릭하게 접근 가능한 웹사이트를 만들 때 글로벌 CDN 서비스인 Amazon CloudFront을 쓰는 것을 권장합니다.
Amazon CloudFront는 퍼블릭한 웹사이트에 도움을 주는 많은 기능을 포함하고 있습니다. (레이턴시 감소, AWS WAF와의 결합 등) 그리고 심지어 S3에 직접 요청을 하는 것보다 데이터 전송 비용이 저렴합니다.
하지만 새로운 CloudFront 생성에 약 15분 정도 걸리므로 이번 워크샵에서는 이 부분을 넘어가도록 하겠습니다.
Last updated