[Note] 강의실습 참고사항 (영상 시청 전 읽어주세요!)

[강의] 아키텍처 관련 기술/서비스/다이어그램/구현 순서 검토

서버가 없어도 구성이 가능한 정적 웹 사이트를 호스팅하고, 콘텐츠 전송 네트워크(CDN) 서비스를 이용하여 웹 사이트의 성능을 향상시킨다.

저장소인 S3 버킷에 html 파일, 그림, 동영상과 같은 파일들을 저장함으로써 기본적인 정적 웹 사이트 구현이 가능하지만, 콘텐츠가 저장된 서버가 멀리 떨어져 있거나, 콘텐츠의 크기가 크면, 그만큼 로딩이 지연되는 현상이 발생할 수 있다.
이러한 문제를 개선할 수 있는 기술이 바로 CloudFront 이다.
- CloudFront가 있는 상태에서는 S3에 저장되어 있는 컨텐츠들이 캐싱이 되어서 사용자들에게 더 빠른 속도로 전송될 수 있다고 한다.
- S3의 콘텐츠들이 전세계에 흩어져 있는 캐싱 서버에 저장이 되고, 사용자의 요청이 있을때, 사용자에게 가까이에 있는 캐싱 서버로부터 데이터가 전달되기 때문에 빨리지는 것이다.

S3 Bucket 생성
Object(File) 업로드
- mycar.html
- car.jpg
정적 웹 사이트 호스팅 기능 활성화
1. 상단 메뉴 중 Properties 부분에서 Static website hosting 기능을 사용하면 됨.
  1. edit에서 enable시켜주면 된다.
Bucket과 Object에 대한 액세스 정책(권한) 설정
1. 이걸 하지 않으면 정적 웹사이트에 들어가 봤을때 403 Forbidden 이 나온다.
  1. 왜냐하면 기본적으로는 외부에서 Bucket과 Object에 대해 액세스할 권한이 없는 것으로 설정이 되어 있기 때문이다.
2. 하는 방법
  1. 우선 Permission 부분에서 Block public access (bucket settings) 항목을 edit 한다. (전부 허용하면 됨)
  2. 그다음 Bucket policy 항목을 edit ⇒ policy generator 클릭
    1. Select Type of Policy: S3 Bucket Policy
    2. Effect: Allow
    3. Principal: *
    4. Actions: GetObject
    5. Amazon Resource Name (ARN): 이전 화면에 있는 Bucket ARN 부분 복붙한 다음 끝에 /*를 추가하면 됨.
    6. Add Statement 버튼 누른다음 Generate Policy 버튼을 눌르면 json이 나온다. 걔를 복사해서 이전 화면에 복붙해준 다음 Save changes해주면 된다.
웹 브라우저에서 웹 사이트 작동 확인
1. 이제 더이상 403 Forbidden이 나오지 않고 작동이 되는 것을 확인할 수 있을 것이다.
2. 생각보다 개쉽네?? aws로 정적 웹사이트 호스팅 하기 편하구나~

CloudFront Distribution 생성
1. Origin, Cache behavior 등 설정
2. 기본 주소 설정하는거랑 default root object를 mycar.html로 해주는거 말고는 바꿀게 없다. (영상이 너무 길어서 정확히 따라 갔는지 살짝 불안감이 들긴 하다..)
3. 생성 버튼 누르고나서 5분정도 걸린다고 한다. 실제로 좀 걸리더라.
웹 브라우저에서 CloudFront Distribution 작동 확인
1. 아래에서 밑줄 친 부분을 누르면 나오는 Distribution domain name 부분을 새탭에서 주소창에 복붙하면 이전에 정적으로 호스팅 했던 웹 사이트와 똑같은 화면이 나오는 것을 확인할 수 있다.
2. 그리고 나서 개발자 도구를 열어서 Network 부분에서 car.jpg를 누르고 Headers 부분을 누르고 나서 RequestURL 등을 봤을때 cloudfront와 연결된 것을 확인할 수 있다면 작동이 잘 되는 것이다.