내가 만든 웹을 다른 사람들이 볼 수 있도록 하려면 배포 과정이 필요하다.
AWS는 S3라는 저장소를 제공하는데 저렴한 비용으로 정적 호스팅을 할 수 있다는 장점이 있다.
하지만 S3에서 기본적으로 제공하는 URL은 HTTPS와 도메인 설정이 불가능하다.
따라서 CloudFront와 Route53을 이용해 해당 문제를 해결해야 한다.
CloudFront는 S3에서 제공하지 않는 HTTPS 배포를 가능하게 만들어 준다.
뿐만 아니라 전 세계에 있는 엣지 포인트를 이용해 캐싱처리를 하여 사용자가 가장 가까운 지역의 엣지 포인트로 접속하게 하여 더 빠른 속도를 제공하고 S3보다 저렴한 비용을 지불하도록 도와준다.
Route53은 사용자가 소유한 도메인을 연결해주는 DNS서비스 역할을 한다.
-
도메인 만들기
우선 무료로 도메인을 만들어 보자.
https://www.freenom.com/ 에 접속한다.
회원가입 후 로그인을 한 후 Services 탭의 Register a New Domain을 선택한다.
원하는 도메인을 선택한 후 checkout을 눌러 구매 후
active 상태가되면 사용이 가능해진다. -
S3에 프로젝트 업로드 하기
이 부분은 HTTP를 배포하는 과정과 같으므로 생략한다.
CloudFront 설정
이 기술을 사용하는 이유는 세가지다.
1. HTTPS를 배포할 수 있다. (HTTP 보다 보안에 강력하다.)
2. 전세계 엣지로케이션을 이용한 더 빠른 속도
s3의 경우 s3 버킷을 설정한 지역의 저장소로 전 세계 사용자가 요청을 보낸다. 따라서 먼 지역의 유저일 수록 속도가 느려질 것이다. 하지만 cloudfront를 사용한다면 전세계 엣지 로케이션에서 캐싱을 해두고 유저가 가까운 엣지에 요청을 보내도록 한다. 따라서 S3보다 속도가 더 빠르다.
3. S3 직접 공유보다 저렴한 비용
- CloudFront 순서
Cloudfront 서비스로 들어가 Create Distribution을 선택한 후 Get Started를 누른다.
origin domain name에 방금 만든 버킷의 정적 웹사이트 호스팅 주소를 적는다. viewer protocol policy는 Redirect HTTP to HTTPS로 설정하고 Default root object에는 index.html을 작성한 후 create distribution을 누른다.
React 프로젝트일 경우에 react-router-dom을 사용한다면 다음과 같은 설정이 필요하다.
Error pages에서 create custom response를 선택한다.
HTTP Error Code를 404: Not Found로
Error Caching Minimum TTL을 5로
Customize Error Response를 Yes로
Response Path Page를 /index.html로
HTTP Response Code를 200 OK로 설정하고 Create를 누른다.
같은 일을 403 Error Code로도 반복한다.
- Route53 설정
Route53은 AWS에서 제공하는 DNS 서비스다.
Route53에 접속 후 호스팅 영역 생성을 눌러준다.
설정한 도메인 주소를 입력 후 퍼블릭 호스팅을 선택하고 생성한다.
이제 여기서 생성된 네임 서버 리스트를 도메인에 등록하자.
도메인을 발급한 freenom에 접속하여
Services -> My Domains를 선택 후 Manage Domain을 눌러준다.
Management Tools -> Nameservers를 선택
Use custom nameservers를 누르고 위에서 발급받은 Nameserver를 적은 후 Change Nameservers를 선택
다시 Route53으로 돌아와서 레코드 생성을 누른다. 단순 라우팅 선택 후 레코드 생성을 누른다.
여기까지 완료했다면 해당 도메인으로 접속이 가능하다. 다만 SSL 인증서 발급이 끝나지 않았기 때문에 HTTPS로 정상 작동하지는 않는다.
- AWS certification
HTTPS에는 SSL이라는 인증서가 필요하다. 이는 AWS에서 무료로 제공하고 있다.
AWS certification에 접속 후
(인증서 발급은 반드시 미국 동부 지역을 선택해야 한다.)
리즌 선택 완료후 인증서 요청을 누른다.
공인 인증서 요청을 선택한 후 인증서 요청을 누르고 도메인 이름을 적어준다.
도메인 이름이 여러개인 경우 이 인증서에 다른 이름 추가를 눌러 추가할 수 있다.
DNS 검증을 한 후 계속 다음으로 진행
요청을 한 도메인 주소를 눌러 Route53에서 레코드 생성을 누른다.
이 작업은 신청한 도메인마다 해줘야 한다.
계속 버튼을 눌러 심사가 완료될 때까지 기다려야 한다.
검증 시간은 주소마다 다를 수 있다.
발급이 완료되면 다음 단계를 진행하자.
CloudFront로 돌아가 distribution settings를 선택한다.
edit 버튼을 선택
Alternate domain names에 인증서 발급시 등록한 도메인 주소들을 써 준다.
그리고 custom ssl certificate를 선택한다.
(인증서 발급이 끝난 후 여기서 선택할 수 있게 되는데 시간이 걸릴 수 있다.)
제일 아래로 내려가 Yes edit을 누르고 기다리면 홈페이지에 정상적으로 인증서가 적용된 모습을 볼 수 있다.
