Static Website Hosting with AWS :: Front-end Meetup
- 1. Static Website Hosting with AWS 박찬민.
- 2. 박찬민 Front-end Developer @버드뷰(화해) Front-end 개발자, 완전한 하나의 서비스를 만들고 싶은 욕심을 가진 자. 하지만, Back-end 의 깊고 넓은 세계보다는 서비스에 집중하고 싶은 자. 그래서 AWS Serverless의 힘을 빌려쓰는 자.
- 3. 웹사이트를 만드는 대략적인 순서 ❏ 웹사이트를 만든다. ❏ 서버를 만든다. ❏ 서버에 웹서버를 설치한다. ❏ 도메인을 연결한다.
- 4. 웹사이트를 만드는 대략적인 순서 ❏ 웹사이트를 만든다. ❏ 서버를 만든다. ❏ 서버에 웹서버를 설치한다. ❏ 도메인을 연결한다. Front-end 개발자가 잘 하는 것 Front-end 개발자가 잘 모르는 것
- 5. 웹서버를 만든다는 것,,, ❏ 서버를 만든다. ❏ 서버에 웹서버를 설치한다.
- 6. 웹서버를 만든다는 것,,, ❏ 서버를 만든다. ❏ 어디에 만들지? ❏ 우리집 내 컴퓨터? 데이터센터? 카페24? 클라우드? ❏ 어느 정도 성능이 필요하지? ❏ 서버 비용은 얼마나 들어가는걸까? ❏ 서버에 웹서버를 설치한다. ❏ 톰캣? Express? Nginx? ❏ 안정적인 웹서버를 만들려면 이중화도 해야해나?
- 7. 웹서버를 만든다는 것 with AWS ❏ S3에 파일들을 올리고 정적 웹 호스팅 기능을 켜준다!
- 8. 웹서버를 만든다는 것 with AWS ❏ S3에 파일들을 올리고 정적 웹 호스팅 기능을 켜준다! https를 가능하게 함.
- 9. S3로 웹호스팅 하기 1. S3 Bucket 생성 (1) http > Bucket 이름을 사용할 도메인 주소로 설정 (2) https > Bucket 이름을 도메인 주소로 하지 않게 설정
- 10. S3로 웹호스팅 하기 2. S3 Bucket에 웹사이트 파일 업로드설정
- 11. S3로 웹호스팅 하기 3. Public 권한 설정 (1) ‘퍼블릭 엑세스 차단’ 설정 변경
- 12. S3로 웹호스팅 하기 3. Public 권한 설정 (2) ‘버킷 정책’ 설정
- 13. S3로 웹호스팅 하기 4. 정적 웹 호스팅 기능 enable
- 14. S3로 웹호스팅 하기
- 15. 도메인 연결 1. Route53에서 새로운 레코드 생성 (*) S3 Bucket 이름과 동일한 도메인을 입력하면, 별칭 대상 목록에 해당하는 S3 Bucket이 나타남.
- 17. https 를 지원하려면,,, ❏ S3 버킷 이름이 도메인 형식이면 안됨! ❏ ACM(AWS Certificate Manager)에서 인증서 생성! 무료 !!! ❏ S3와 CloudFront를 연결 ❏ Route53에서 별칭을 S3로 하지 않고 CloudFront로 설정
- 18. SSL 인증서 생성 1. ACM에서 인증서 생성 (*) 반드시 버지니아 리전에서 생성!!! (그래야 CloudFront에서 사용가능) (*) 필요에 따라 도메인 설정
- 19. CloudFront 배포 생성 1. Web distribution 타입으로 생성 2. 설정해줄 속성 - Origin Domain Name: S3의 웹 호스팅 기능에서 할당된 도메인 직접 입력 - Viewer Protocol Policy: Redirect HTTP to HTTPS - Alternate Domain Names(CNAMEs): 사용할 도메인 주소 - SSL Certificate: Custom SSL Certificate을 선택하고, 목록에서 ACM에서 생성한 인증서 선택 - Default Root Object: 보통 ‘index.html’
- 20. Route53 레코드 생성 1. CloudFront 배포를 생성할 때 사용했던 도메인 이름으로 생성 2. 별칭 목록에서 방금 생성한 CloudFront 배포 선택 static-web-https.walkinpcm.com
- 21. 없는 URL로 접근한다면? ❏ 없는 URL로 접근하면 에러가 발생함. (Origin에서 test 리소스를 찾을 수 없기 때문에)
- 22. 없는 URL로 접근한다면? ❏ CloudFront에 Custom Error Response를 설정 할 수 있음. ❏ 아래와 같이 403, 404 에러에 대해 설정.
- 23. 새로운 빌드를 배포하려면? ❏ S3에 새로운 빌드파일 업로드 ❏ 하지만 업로드 직후에 CloudFront에는 아직 예전 빌드파일이 남아있음 ❏ CloudFront에서 새로운 빌드파일을 가져가게 하려면? ❏ Invalidations 기능을 이용! 기존에 저장된 파일을 삭제함.
- 24. S3 기반의 웹호스팅 장점 ➔ 서버 관리 불필요 서버를 프로비저닝하거나 유지 관리할 필요가 없습니다. 설치, 유지 또는 관리할 소프트웨어나 런타임이 없습니다. ➔ 사용량만큼 지불 서버 단위가 사용량에 대해 요금을 지불합니다. ➔ 자동화된 고가용성 S3는 99.99%의 가용성과 99.999999999%의 내구성을 지원합니다. 그래서 별도로 고가용성을 위한 설계를 할 필요가 없습니다.
- 25. “감사합니다 :)” .