목표: HTTPS 가 적용된 커스텀 도메인으로 정적 파일 배포하기(S3 + CloudFront)
진행 절차
- AWS Route53 에서 도메인 구입
- AWS S3 버킷 생성
- index.html 파일 생성하여 2번에서 생성한 S3 버킷에 업로드
- 구입한 도메인에 대한 인증서 발급 (AWS Certificate Manager)
- CloudFront 생성
- AWS Route53에서 A 레코드 생성
- 도메인으로 index.html 접속 확인!
준비사항
- AWS 에 가입된 아이디(카드 등록)
- 도메인을 구매할 비용
1. AWS Route53 에서 도메인 구입
- AWS Route53 에 접속
- [도메인] 메뉴 -> [등록된 도메인] 클릭
[도메인 등록] 버튼 클릭하면 도메인을 검색하고 구매할 수 있는 창이 나타납니다.
해당 창에서 도메인을 구매하시면 됩니다.
이미 가비아와 같은 다른 업체에서 구매하신 도메인이 있는 경우 그 도메인을 AWS Route53 에 등록하셔야 합니다.
도메인 구매를 완료하면 정적 파일을 업로드 할 AWS S3 버킷을 생성해야 합니다.
2. AWS S3 버킷 생성
AWS S3 로 가서 [버킷 만들기] 버튼 클릭
1. 자신이 원하는 버킷 이름으로 입력하면 됩니다.
- CloudFront를 사용한다면 버킷 이름을 도메인 명과 동일시하지 않아도 됩니다.(다른 블로그 글들과 헷갈리실까 봐 명시)
- 저는 예시 및 구분을 위해 도메인명과 똑같이 설정했습니다.
2. 버킷이 생성 될 AWS 리전에 대한 선택입니다. 원하는 리전을 선택하면 됩니다. 서울 리전으로 하였습니다.
버킷 만들기 버튼을 클릭하여 버킷 생성을 완료합니다.
위 그림과 같이 버킷 생성을 완료하였습니다.
3. index.html 파일 생성하여 2번에서 생성한 S3 버킷에 업로드
index.html 을 먼저 생성하여 Hello World 를 출력하는 코드를 작성하고 저장합니다.
<h1>Hello World</h1>
위에서 만든 S3 버킷을 클릭하여 들어가서 index.html 파일을 업로드 합니다.
업로드 버튼을 누르셔도 되고 html 파일을 드래그 앤 드랍 하셔도 업로드 가능합니다.
업로드를 완료하였습니다.
4. 구입한 도메인에 대한 인증서 발급(AWS Certifiacate Manager)
구매한 도메인에 대한 인증서 발급을 진행하겠습니다.
AWS Certificate Manager 로 접속합니다.
주의! 리전을 버지니아 북부로 선택하고 인증서를 발급받아야 합니다.
이후 생성 할 CloudFront 에서는 버지니아 북부에 있는 인증서만 사용할 수 있습니다.
새로운 인증서를 발급받기 위해 요청 버튼을 누릅니다.
그리고 바로 다음을 누릅니다.
[완전히 정규화된 도메인 이름] 에 인증서가 인증할 수 있는 도메인 명들을 입력해야 합니다.
여러 도메인 명을 입력할 수 있어서 사용할 도메인명 각각을 추가해줘도 되지만, *를 사용하여 여러 도메인을 커버하게 할 수 있습니다.
예)
chobo-developer.com -> 인증서가 chobo-developer.com 주소만 인증 가능
static.chobo-developer.com -> 인증서가 static.chobo-developer.com 주소만 인증 가능
*.chobo-developer.com ->www.chobo-developer.com, static.chobo-developer.com ... 과 같이 모든 서브도메인 인증 가능
검증 방법은 [DNS-검증] 을 그대로 유지한 채 완료하였습니다.
완료 버튼을 누르면 위와 같이 파란색 창이 나오면서 [인증서 보기] 버튼이 있습니다.
(왼쪽의 [인증서 나열] 탭을 클릭하여 방금 만든 인증서를 클릭해도 됩니다. 안 보이면 새로고침 하시면 됩니다.)
그러면 상태가 [검증 대기 중] 입니다. 이 검증을 완료하기 위해서
[Route53에서 레코드 생성] 버튼을 누릅니다.
그러면 위 창이 뜨는데 바로 [레코드 생성] 버튼을 누릅니다.
그리고 나서 AWS Certificate Manager(ACM) 메뉴의 [인증서 나열] 탭에 가서 일정 시간 후에 상태가 [발급됨] 으로 변경됩니다.
이러면 이제 도메인 인증서 발급이 완료된 것입니다.
5. CloudFront 생성
AWS CloudFront 에 접속합니다.
[배포 생성] 버튼을 클릭합니다.
원본 도메인을 선택해야하는데 입력 창을 클릭하면 처음에 만들었던 s3 버킷을 선택할 수 있게 목록이 나옵니다.
자신이 위에서 만든 s3 버킷을 선택해주면 됩니다.
S3 버킷을 선택하면 1번과 2번처럼 입력이 들어갑니다.
[S3 버킷 엑세스]에서는 3가지가 있는데, S3에 CloudFront 만 접근할 수 있게 [원본 엑세스 제어 설정]을 선택합니다.
그리고 그 아래 [제어 설정 생성] 버튼을 눌러서 생성 후 선택합니다.
선택하면 위와같이 입력됩니다.
HTTPS 만으로 접속이 가능하길 원하기 때문에 [Redirect HTTP to HTTPS] 선택합니다.
중요! [대체 도메인 이름]에는 CloudFront에 연결될 수 있는 도메인 명을 입력해야합니다.
위 예제에서는 S3 에 업로드한 index.html 파일을 보기위해 static.chobo-developer.com/index.html 로 접속할 예정입니다.
그래서 static.chobo-developer.com 을 입력하였습니다. 이 이름은 아래 A 레코드와도 관련이 있습니다.
[사용자 정의 SSL 인증서] 에서는 입력할 박스를 클릭하면 이전에 만든 인증서를 선택할 수 있습니다.
여기서 만약 자신이 생성한 인증서가 보이지 않는다면, 인증서를 발급받은 리전이 [버지니아 북부] 가 아닐 확률이 높습니다.
CloudFront에 인증서를 적용하기 위해서는 버지니아 북부 리전에 인증서를 발급 받아야합니다.
CloudFront 설정을 완료하고 [배포 생성] 버튼을 누르면 위와 같이 파란색 창이 나오고 [정책 복사]란 버튼이 나옵니다.
[정책 복사] 버튼을 꼭 클릭해서 정책을 복사하셔야 합니다.
[정책 복사] 버튼을 클릭하면 문자열로 된 정책이 복사가 됩니다.(컨트롤C 처럼)
이 복사한 것을 S3 정책에 붙여넣어야합니다.
S3 [권한] 탭으로 이동하여 아래에 내려보면 [버킷 정책] 란이 있습니다.
편집을 누르고 위에서 복사한 정책을 붙여넣고 적용합니다.
그리고 CloudFront 로 돌아가서 생성한 것이 상태가 [활성화됨] 으로 변경될 때 까지 기다립니다.
6. AWS Route53 에서 A 레코드 생성
CloudFront 가 활성화되면 마지막으로 Route53 에 가서 A 레코드를 생성해야합니다.
Route53 메뉴로 가서 [호스팅 영역] 을 누릅니다.
[호스팅 영역]에서 자신이 이전에 만든 도메인이 있습니다. 클릭합니다.
[레코드 생성]을 누릅니다.
1. [레코드 이름] 란에는 CloudFront 생성 시 설정한 [대체 도메인 이름] 과 같게 해주어야 합니다.
CloudFront 생성 시 [대체 도메인 이름] 을 static.chobo-developer.com 으로 해주었으니 "static" 을 입력해야합니다.
2. 별칭으로 변경합니다.
3. CloudFront 배포에 대한 별칭을 선택한 뒤 그 아래에서 자신이 이전에 만든 CloudFront 를 선택할 수 있습니다.
그리고 레코드 생성을 누릅니다.
레코드 생성을 누르면 [상태 보기] 버튼이 나타납니다. 클릭합니다.
그러면 현재 상태가 진행중인지 완료되었는지 확인할 수 있습니다. 새로고침을 누르면서 확인합니다.
그러다 상태가 [INSYNC]가 되면 완료된 것이므로 접속을 해볼 수 있습니다.( 가끔 바로 안될 때도 있습니다 ... )
7. 도메인으로 index.html 접속 확인!
브라우저에서 static.chobo-developer.com 으로 접속하면 https 가 적용된 것을 볼 수 있습니다!
끝!
심심치 않게 이 설정을 할 때가 있었는데,
할 때마다 빼먹거나, 다시 찾아보고, 잘 안되고 하는 일의 반복이어서 정리를 한번 해봤습니다.
위 내용을 찾으시는 분들은 한번에 성공하실 수 있게 최대한 자세히 적어보았습니다ㅎㅎㅎ
'개발' 카테고리의 다른 글
| 자바 ArrayList 의 default size 는 10 맞을까? (0) | 2023.02.19 |
|---|---|
| 알면 유용한 Java 8, 9 에서 추가, 변경된 Collection 관련 내용 (0) | 2023.02.11 |
| 자바 8 stream 의 lazy (0) | 2023.02.05 |
| 자바 8 람다는 익명 클래스와 같을까? (0) | 2023.01.30 |
| 서머타임(daylight saving time)에 대해 코드와 함께 알아보자 (2) | 2023.01.07 |
