AWS S3에 정적 파일을 업로드하고 AWS Route53, AWS CloudFront와 연동하는 정적 웹 사이트 호스팅을 쉽고 상세하게 설명합니다.
AWS S3 정적 웹 호스팅
AWS S3 정적 웹 사이트 호스팅에 대해 알아보겠습니다.
정적 웹 사이트 호스팅이란, 정적인 파일(html)을 웹에서 볼 수 있도록(호스팅) 해주는 서비스입니다.
AWS S3 정적 웹 사이트 호스팅이란, 정적인 파일(html)을 AWS S3(클라우드 저장소)에 업로드하고,
S3에서 제공하는 도메인(ex. http://cloudtechflow.com.s3-website.ap-northeast-2.amazonaws.com)으로
웹에서 접근 가능하도록 해주는 서비스입니다.
S3에서 제공하는 도메인이 아닌 내가 원하는 도메인(mydomain.com)으로 연결하는 방법도 있습니다.
AWS Route53 서비스를 통하여 나만의 도메인(ex. mydomain.com)을 생성하고,
AWS CloudFront 서비스를 통하여 Route53과 S3를 연동하면,
S3에서 제공하는 도메인이 아닌 나의 도메인으로 웹에서 접근할 수 있습니다.
AWS S3와 Route53, CloudFront 서비스의 연동은 도메인 연결, 보안(https) 및 캐싱 적용 등
내가 원하는 도메인으로 웹 사이트에 접근할 수 있도록 하며, 보안성을 높이고 페이지 로딩 속도를 신속하게 해주기 때문에
AWS Route53, CloudFront 서비스 모두 S3 서비스와 연동하는 것은 필수입니다.
AWS S3 정적 웹 호스팅 사전 준비
AWS S3 정적 웹 사이트 호스팅을 위한 사전 준비 사항입니다.
이미 준비된 분들은 건너뛰셔도 무방합니다.
AWS 계정
AWS S3 웹 호스팅을 하기 위해서 AWS 계정이 필요합니다.
계정이 없으신 분들은 AWS 계정 생성 페이지로 이동하여 계정을 생성합니다.
정적 파일
.html, .js, .css 등 웹 사이트에서 보여질 정적 파일을 준비합니다.
준비한 정적 파일은 AWS S3(클라우드 저장소)에 업로드 됩니다.
AWS S3 정적 웹 사이트 호스팅
사전 준비가 완료되었다면, AWS S3 정적 웹 호스팅은 아래 순서로 진행하겠습니다.
1. AWS Route53 서비스를 통하여 나의 도메인을 생성합니다.
2. AWS S3 서비스에서 버킷을 만들어 정적 파일을 업로드하고, 웹 사이트 호스팅 활성화 설정을 합니다.
3. AWS CloudFront 서비스를 이용하여 Route53, S3와 연동합니다.
위 과정이 모두 완료되면 나의 도메인으로 웹 페이지 접근이 가능합니다.
AWS Route53 도메인 생성
나의 도메인으로 내 웹 사이트 호스팅을 한다는 것은 어찌 보면 당연한 것입니다.
AWS Route53 서비스에서 나의 도메인을 생성하면 요금이 있습니다.
도메인마다 요금이 다르지만 보통 1년에 10달러 정도 비용이 발생합니다.
1년동안 10달러 정도의 비용으로 내 도메인을 소유할 수 있다면 저렴하다고 생각합니다.
AWS Route53 서비스를 통하여 도메인을 생성해 보겠습니다.
도메인 검색 및 선택
1. AWS Route 53 도메인 등록 페이지로 이동합니다.
2. 좌측 메뉴에서 도메인 > 등록된 도메인 페이지로 이동 후, 우측 상단 ‘도메인 등록’ 버튼을 클릭합니다.
3. 소유하기 원하는 도메인을 입력하고, 등록 가능하다면 선택합니다.
4. 이미 등록되어 사용 불가능한 도메인이라면, 제안된 도메인에서 선택하는 방법도 있습니다.
5. 도메인을 선택했다면 우측 ‘결제 진행’ 버튼을 누릅니다.
도메인 결제 및 연락처 정보 검토 요청
1. 몇 년 동안 도메인을 사용할 것인지 ‘기간’을 선택합니다.
2. ‘자동갱신’을 활성화하면 사용 기간 만료 전에 자동으로 결제가 이루어지고, 도메인 사용 기간이 갱신됩니다.
3. 연락처 정보는 특별할 것 없이 기입하고 ‘다음’으로 이동합니다.
4. 결제 및 연락처 정보를 다시 확인하고 문제 없으면 ‘제출’합니다.
5. 제출 후 이상이 없다면 결제가 이루어지고, 도메인 등록이 완료됩니다.
등록이 완료되면 ‘등록된 도메인’ 메뉴에서 해당 도메인을 조회할 수 있습니다.
또한 호스팅 영역 메뉴에 도메인 이름으로 호스팅 영역이 자동으로 생성됩니다.
호스팅 영역은 추후 CloudFront 연동 시 설명하도록 하겠습니다.
AWS S3 버킷 설정
AWS S3 버킷 설정 방법에 대해 알아보겠습니다.
AWS S3 버킷 설정은 아래 순서로 진행됩니다.
1. AWS S3 버킷(저장소)을 만듭니다.
2. AWS S3 버킷에 정적 파일을 업로드합니다.
3. 정적 웹 사이트 호스팅 설정을 활성화합니다.
AWS S3 버킷 만들기
AWS S3 버킷 만드는 방법에 대해 알아보겠습니다.
1. AWS S3 서비스 페이지로 이동합니다.
2. ‘버킷 만들기’ 버튼을 클릭하여 AWS S3 버킷 만들기를 진행합니다.
3. 일반 구성 > AWS 리전: ‘아시아 태평양(서울) ap-northeast-2’ 선택합니다.
4. 일반 구성 > 버킷 이름: Route53 서비스에서 생성한 도메인 이름과 동일하게 입력합니다. (ex. cloudtechflow.com)
5. 다른 설정은 변경하지 않고 하단 ‘버킷 만들기’ 버튼을 클릭합니다.
설정 중간에 ‘이 버킷의 퍼블릭 엑세스 차단 설정’하는 부분이 있습니다.
꼭 ‘모든 퍼블릭 엑세스 차단’을 체크하셔야 합니다.
이 부분을 체크하지 않으면 모든 사람이 나의 S3 버킷(클라우드 저장소)에 접근할 수 있게 되어 보안에 매우 취약합니다.
누구나 마음만 먹으면 웹에서 나의 S3 버킷에 접근해 파일을 읽고 다운로드할 수 있습니다.
많은 포스팅 글에서 웹 호스팅 설정을 쉽게하기 위해 보안 위험이 있음에도 해당 설정을 해제하고 진행하는 경우가 많습니다.
이 글에서는 AWS CloudFront 서비스를 통해서만 S3에 접근할 수 있게 함으로써 보안 위험을 방지합니다.
6. 버킷 생성이 완료되면 버킷 이름을 클릭하여 버킷 상세 페이지로 이동 가능합니다.
AWS S3 버킷 파일 업로드
AWS S3 버킷 파일 업로드 방법에 대해 알아보겠습니다.
1. S3 버킷 상세 화면 우측 ‘업로드’ 버튼을 클릭합니다.
2. 파일 또는 폴더를 추가하고, 맨 하단 ‘업로드’ 버튼을 클릭합니다.
3. 업로드가 완료되면, 업로드된 파일 또는 폴더를 확인할 수 있습니다.
S3에 업로드된 파일들이 추후 웹에서 도메인으로 접근했을 때 보이는 문서(html)입니다.
AWS S3 정적 웹 사이트 호스팅 설정 활성화
AWS S3 정적 웹 사이트 호스팅 설정 활성화 방법에 대해 알아보겠습니다.
1. 버킷 이름을 클릭하여 상세 페이지로 이동합니다.
2. 상세 화면 상단의 속성 탭으로 이동 후, 맨 하단에 정적 웹 사이트 호스팅 ‘편집’ 버튼을 클릭합니다.
3. 정적 웹 사이트 호스팅: ‘활성화’ 선택합니다.
4. 인덱스 문서: 내 웹 사이트에 방문했을때 보여지는 기본 페이지를 입력합니다. (ex. index.html)
5. 오류 문서(선택 사항): 403, 404 오류가 발생했을 때 보여줄 페이지를 입력합니다. (ex. error.html)
403 오류: 페이지에 접근 권한이나 실행 권한이 없을 시 발생하는 오류 페이지입니다.
404 오류: URL을 잘못 입력하여 파일이 존재하지 않는 경우 발생하는 오류 페이지입니다.
인덱스 문서와 오류 문서에 입력한 파일은 S3에 업로드 되어 있어야 합니다.
6. 다른 설정은 변경하지 않고 하단 ‘변경 사항 저장’ 버튼을 클릭합니다.
AWS CloudFront 설정
AWS CloudFront 서비스를 이용하여 Route53, S3를 연동하겠습니다.
AWS CloudFront 설정은 아래 순서로 진행됩니다.
1. AWS ACM SSL 인증서를 생성합니다.
2. AWS CloudFront 배포를 생성합니다.
3. AWS Route53 호스팅 영역을 설정합니다.
4. AWS S3 접근 권한을 설정합니다.
AWS ACM SSL 인증서 생성
브라우저에서 내 도메인에 https 접근하기 위해서는 SSL 인증서가 필요합니다.
http는 보안에 취약하기 때문에 인증서를 통하여 보안을 강화한 것이 https 입니다.
많은 검색 엔진(네이버, 구글 등)에서 https 접근이 가능한 도메인을 검색 결과에 더 많이 노출합니다.
AWS ACM SSL 인증서 생성 방법에 대해 알아보겠습니다.
1. AWS ACM 서비스 페이지로 이동합니다.
2. 좌측 메뉴에서 인증서 요청 > ‘퍼블릭 인증서 요청’ 선택하고 다음으로 이동합니다.
4. 도메인 이름 > 완전히 정규화된 도메인 이름: *.내 도메인 입력합니다. (ex. *.cloudtechflow.com)
5. 다른 설정은 변경하지 않고 맨 하단 ‘요청’ 버튼 클릭합니다.
6. 상단에 파란색 안내글이 노출되면 ‘인증서 보기’ 버튼을 눌러 이동합니다.
7. 중앙 우측에 ‘Route 53에서 레코드 생성’ 버튼을 클릭합니다.
8. ‘레코드 생성’ 버튼을 클릭합니다.
9. 인증서 상태가 ‘검증 대기 중’에서 ‘발급됨’으로 변경되면 인증서 생성 완료입니다.
AWS CloudFront 배포
1. AWS CloudFront 페이지로 이동합니다.
2. 우측 상단 ‘배포 생성’ 버튼을 클릭합니다.
3. 원본 > 원본 도메인: 클릭하여 자동으로 검색되는 S3 버킷을 선택합니다.
선택하면 ‘웹 사이트 앤드포인트 사용’ 할 것인지 물어보는데 사용하지 않습니다.
4. 원본 > 원본 이름: 자동으로 원본 도메인이 입력되는데, 따로 수정하지 않습니다.
5. 원본 > 원본 엑세스: ‘원본 액세스 제어 설정(권장)’ 선택합니다.
‘제어 설정 생성’ 버튼을 클릭하면 팝업이 노출되는데, 아무것도 수정하지 않고 ‘생성’ 버튼 클릭합니다.
6. 원본 > Origin Shield 활성화: ‘예’를 누르고, 리전에 ‘아시아 태평양(서울)’ 선택합니다.
7. 웹 애플리케이션 방화벽(WAF): ‘보안 보호 비활성화’ 선택합니다.
요금이 상당하기 때문에 보안이 중요한 웹 사이트가 아니면 비활성화 합니다.
8. 설정 > 대체 도메인 이름: ‘항목 추가’ 버튼을 클릭하여 Route53에서 생성한 도메인을 입력합니다.
10. 다른 설정은 변경하지 않고 하단 ‘배포 생성’ 버튼을 클릭합니다.
AWS Route53 호스팅 영역 설정
1. AWS Route 53 서비스 페이지로 이동합니다.
2. 호스팅 영역으로 이동하고, 내 도메인 이름으로 생성된 호스팅 영역 이름을 클릭하여 상세로 이동합니다.
3. 중앙 ‘레코드 생성’ 버튼을 클릭합니다.
4. 레코드 이름: 서브도메인을 사용하시는게 아니면 비워두면 됩니다. 서브도메인 개념을 모르신다면 비우시면 됩니다.
5. 레코드 유형: ‘A’ 를 선택합니다.
6. ‘별칭’을 클릭하여 on 상태로 변경합니다.
7. 트래핑 라우팅 대상 > 엔드포인트 선택: ‘CloudFront 배포에 대한 별칭’ 선택합니다.
8. 트래핑 라우팅 대상 > 배포 선택: 자동으로 이전에 생성한 CloudFront 배포가 노출됩니다. 선택합니다.
9. 다른 설정은 변경하지 않고 하단 ‘레코드 생성’ 버튼을 클릭합니다.
AWS S3 접근 권한 설정
1. S3 버킷 상세 페이지의 ‘권한’ 탭으로 이동합니다.
2. 중간에 버킷 정책 > ‘편집’ 클릭합니다.
3. 아래 코드를 복사하여 입력합니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipalReadOnly",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::나의 도메인/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::나의 AWS ID:distribution/CloudFront 배포 ID"
}
}
}
]
}나의 도메인: Route53 서비스에서 만든 나의 도메인
나의 AWS 계정 ID: 우측 상단에 로그인 아이디를 클릭하면 숫자로 되어 있는 계정 ID를 복사할 수 있습니다.
계정 ID는 ‘-‘ 를 빼고 숫자만 입력하셔야 합니다.
CloudFront 배포 ID: CloudFront에서 생성한 배포 ID를 입력합니다.
이제 모든 AWS S3 정적 웹 호스팅 설정이 완료되었습니다.
브라우저에서 내 도메인으로 접근하면 웹 페이지를 확인할 수 있습니다.
AWS CloudFront 캐시 무효화
AWS S3와 연동되어 있는 CloudFront는 캐시를 사용하기 때문에 웹 페이지 로딩 속도가 빠릅니다.
하지만 캐시 사용으로 인하여 S3 버킷에 변경된 파일을 업로드한다고 해서 바로 변경된 페이지가 적용되는 것은 아닙니다.
변경된 파일을 적용하기 위해서는 캐시 무효화가 필요합니다.
캐시 무효화하는 방법에 대해 알아보겠습니다.
1. AWS CloudFront 페이지로 이동합니다.
2. 캐시 무효화 적용을 원하는 배포 상세 페이지로 이동합니다.
3. ‘무효화’ 탭으로 이동하고, ‘무효화’ 버튼을 클릭합니다.
4. 캐시 무효화를 원하는 파일의 경로를 입력하고, ‘무효화 생성’ 버튼을 클릭합니다.
캐시 무효화가 완료되면 웹에서 변경된 페이지를 확인할 수 있습니다.
크몽 문의 및 의뢰 요청
AWS S3 정적 웹 사이트 호스팅 진행 과정이 길고, 글로 내용을 전달하기에 어려움이 있습니다.
진행이 어려운 부분이 있거나 또는 의뢰를 원하시면 크몽 서비스를 통하여 문의주시면 감사하겠습니다.
지금까지 AWS S3 정적 웹 사이트 호스팅에 대해 알아보았습니다. 감사합니다.
관련 글
