반응형

안녕하세요. 지난 글에서 S3 버킷으로 HTML 정적 웹사이트를 호스팅하는 방법을 알아봤습니다.

 

▼ 이전 글 참고 [AWS] Amazon S3 정적 웹사이트 호스팅 방법 (S3 버킷으로 HTML 사이트 만들기) https://softwcgcg.tistory.com/26

 

[AWS] Amazon S3 정적 웹사이트 호스팅 방법 (S3 버킷으로 HTML 사이트 만들기)

안녕하세요 S3 Bucket 을 통해 HTML 소스를 그대로 올려서 사이트 접속 가능하게 해보겠습니다.시작은 AWS에서 S3로 접속 하는것 입니다.① 버킷 생성 → ② 정적 웹 사이트 호스팅 활성화 → ③ HTML

softwcgcg.tistory.com

 

다만 S3 웹사이트 엔드포인트 주소는 http:// 로만 접속되고 주소도 길어서 실제로 쓰기엔 아쉽습니다. 이번 글에서는 가비아에서 구입한 도메인을 연결하고, HTTPS(https://)로 접속되게 만들어 보겠습니다.

 

 

  • ACM SSL 인증서: CloudFront 같은 AWS 통합 서비스에서 쓰면 발급·자동 갱신 모두 무료
  • CloudFront: 새로 생긴 무료 플랜(월 0달러) 으로 월 100만 건 요청 / 100GB 전송까지 커버, 심지어 초과 요금도 없음
  • 개인 홈페이지·포트폴리오 수준 트래픽으로는 이 한도를 넘길 일이 거의 없습니다.

 

순서

1. ACM에서 무료 SSL 인증서 발급

2. 가비아 DNS에 검증용 CNAME 등록 → 인증서 발급 완료

3. CloudFront 무료 플랜으로 배포 생성 (S3 연결 + 인증서 적용)

4. 가비아 DNS에서 내 도메인 → CloudFront 연결 후 HTTPS 접속 확인

 

■ STEP 1. ACM(Certificate Manager) 무료 SSL 인증서 요청

ACM 퍼블릭 인증서는 CloudFront 등 AWS 통합 서비스에서 사용하는 조건이면 발급도, 1년마다 하는 갱신도 전부 무료·자동입니다. 유료 SSL 인증서 살 필요가 없습니다.


 

인증서요청

AWS 콘솔에서 Certificate Manager 검색 후 접속 → 인증서 요청 클릭 오른쪽 아래 요금 안내에도 나오듯이, ACM 인증서는 CloudFront 같은 통합 AWS 리소스에서 사용하면 무료입니다.

퍼블릭 인증서 요청

 

인증서 유형: 퍼블릭 인증서 요청 선택 → 다음

 

퍼블릭 인증서 요청

 

도메인 이름에 루트 도메인 입력 후 "이 인증서에 다른 이름 추가"로 www.도메인 도 추가 여기서 무료 유지를 위해 내보내기 허용은 반드시 "내보내기 비활성화" 그대로 두세요. 내보내기 활성화를 선택하면 요금이 청구됩니다.
검증 방법은 DNS 검증(권장) 선택

 

키 알고리즘 요청

키 알고리즘은 기본값 RSA 2048 그대로 → 요청 클릭

요청 대기중

인증서가 생성되고 상태는 "검증 대기 중" 아직 도메인 주인 확인이 안 된 상태입니다. 가비아 DNS에 검증용 레코드를 넣어주러 갑니다.

CNAME 이름, CNAME 값

도메인 목록에서 CNAME 이름 / CNAME 값 확인 (복사 버튼으로 복사) Route 53을 쓰면 버튼 하나로 되지만, 우리는 가비아 도메인이므로 직접 등록해야 합니다.

 

■ STEP 2. 가비아 DNS에 검증용 CNAME 레코드 등록

ACM이 "이 도메인 주인이 맞는지" 확인하는 절차입니다. 가비아 DNS에 CNAME 두 개(루트용, www용)만 넣어주면 됩니다.

 

가비아 레코드 수정

가비아 로그인 → My가비아 → DNS 관리툴 접속 → "레코드 수정" 클릭

CNAME 이름

레코드 추가 → 타입 CNAME 선택, 호스트/값 입력 호스트에는 ACM의 CNAME 이름 중 마침표(.) 전까지의 앞부분만 입력합니다. 값에는 CNAME 값을 그대로 붙여넣으면 됩니다.

두 레코드 모두 확인(수정) 후 저장 클릭

 

AWS SSL 인증서 발급

잠시 후 ACM 새로고침 → 두 도메인 모두 상태 "성공" 확인 보통 몇 분~30분 내외로 발급됩니다. 이걸로 무료 SSL 인증서 발급 끝

 

■ STEP 3. CloudFront 무료 플랜으로 배포 생성

S3 자체는 커스텀 도메인 HTTPS를 지원하지 않아서 앞단에 CloudFront(CDN)를 붙입니다. 예전에는 사용량만큼 과금이었는데, 지금은 무료 플랜(월 0달러) 이 생겨서 개인 사이트는 공짜로 쓸 수 있습니다.

CloudFront

AWS 콘솔에서 CloudFront 검색 후 접속 → 배포 생성 클릭

 

무료플랜

플랜 선택 화면에서 "무료 (월 0달러)" 선택 무료 플랜 구성 월 100만 건 요청 / 100GB 허용량에 DDoS 보호, WAF, 무료 TLS 인증서, 글로벌 CDN, 5GB S3 저장공간까지 포함입니다. 그리고 "초과 요금은 없습니다" 라고 명시되어 있어서 요금 걱정 없습니다. S3에서 CloudFront로 가는 데이터 전송 비용도 자동 면제 입니다.

다음

아래에 "사용한 만큼 지불" 옵션도 있지만 대규모 트래픽용이므로 무시 → 다음

시작하기

배포 이름 은 자유롭게, 시작하기: 배포 이름 입력. Route 53 관리형 도메인 칸에 경고가 떠도 무시 우리 도메인은 가비아에 등록돼 있어서 CloudFront가 자동 구성을 못 한다는 안내일 뿐입니다. "도메인 설정 건너뛰기" 클릭

Specify origin 설정

Specify origin: Origin type은 "Other" 선택, Custom origin에 S3 웹사이트 엔드포인트 주소(버킷명.s3-website.ap-northeast-2.amazonaws.com) 입력 이전 글에서 만든 S3 정적 웹사이트 엔드포인트를 그대로 넣으면 됩니다. 오리진/캐시 설정은 권장(recommended) 그대로 → Next

Enable security

WAF 보안 설정 화면 — 무료 플랜에 포함이므로 기본값 그대로 Next "Security protections from WAF are included in your plan at no additional charge" = 추가 비용 없이 포함이라는 뜻입니다.

Review and create

Review and create에서 Billing: Free($0/month), 예상 요금 $0 확인 → Create distribution 여기서도 월 0달러 확인 생성하면 됩니다.

 

배포완료

배포 생성 완료. 배포 도메인 이름(xxxx.cloudfront.net)이 생겼습니다. 이제 설정 → 편집 클릭

설정 편집

설정 편집: 대체 도메인 이름(CNAME)에 내 도메인 2개(www 있는 것 / 없는 것) 입력, Custom SSL certificate에서 STEP 1에서 발급한 ACM 인증서 선택, 대체 도메인을 안 넣으면 내 도메인으로 접속이 안 됩니다. Security policy는 기본 권장값 선택

index.html

Default root object에 index.html 입력 → 변경 사항 저장 도메인만 쳤을 때(/) index.html이 열리게 하는 설정입니다. 빼먹으면 루트 접속 시 에러가 납니다.

동작

동작(Behaviors) 탭 → 기본 동작 선택 → 편집 클릭

Edit behavior

뷰어 프로토콜 정책: "Redirect HTTP to HTTPS" 선택 http:// 로 들어와도 자동으로 https:// 로 보내주는 설정입니다.

캐시 키 및 원본 요청

Save changes

원본
원본편집

원본(Origins) 탭 → 원본 선택 → 편집 프로토콜이 "HTTP만 해당"으로 되어 있는지 확인 후 저장 S3 웹사이트 엔드포인트는 HTTP만 지원하기 때문에, CloudFront→S3 구간은 HTTP로 가져오고 사용자→CloudFront 구간만 HTTPS로 제공하는 구조입니다.

 

■ STEP 4. 가비아 DNS에서 내 도메인 → CloudFront 연결

마지막입니다. 내 도메인으로 접속하면 CloudFront로 가도록 가비아 DNS에 CNAME을 넣습니다.

배포

 

CloudFront 배포 목록에서 Domain name(xxxx.cloudfront.net) 복사 이 주소가 가비아에 입력할 CNAME 값입니다.

dns관리

가비아 DNS 관리툴 → 도메인 체크 → 설정 클릭

DNS 레코드 수정

 

레코드 추가: 타입 CNAME, 호스트 www, 값에 복사한 CloudFront 도메인 입력 → 확인 → 저장 값 맨 마지막에 마침표(.)를 붙여서 입력해야 합니다. (예: xxxx.cloudfront.net.)

 

브라우저에서 https://www.내도메인.com 접속 → 자물쇠 아이콘이 뜨면 성공

 

HTTPS 접속 성공

 

이렇게 해서 S3에 올린 HTML 사이트를 가비아 도메인 + HTTPS로 접속되게 만들었습니다.

 

  비용 정리

  • ACM SSL 인증서: 무료 (내보내기 비활성화 + AWS 통합 서비스 사용 조건, 자동 갱신도 무료)
  • CloudFront: 무료 플랜 월 0달러 (월 100만 요청 / 100GB, 초과 요금 없음, S3→CloudFront 전송 무료, 5GB S3 저장 포함)
  • S3: 무료 플랜에 포함된 5GB 안이면 0원
  • 결론: 실제로 돈 나가는 건 가비아 도메인 등록비뿐입니다. 개인 홈페이지 수준이면 AWS 쪽 청구서에 0원이 찍힙니다.

  무료 유지를 위한 주의 3가지

  1. ACM 인증서 요청 시 "내보내기 활성화"를 선택하면 과금됩니다 → 비활성화 그대로
  2. CloudFront 플랜 선택에서 "사용한 만큼 지불"이 아니라 "무료" 플랜인지 확인
  3. Pro/Business 플랜 전용 기능(Upgrade 표시)은 누르지 않기 — 기본 기능만으로 충분합니다.

 

반응형
반응형

안녕하세요 S3 Bucket 을 통해 HTML 소스를 그대로 올려서 사이트 접속 가능하게 해보겠습니다.

시작은 AWS에서 S3로 접속 하는것 입니다.


① 버킷 생성 → ② 정적 웹 사이트 호스팅 활성화 → ③ HTML 파일 업로드 → ④ 퍼블릭 액세스 및 버킷 정책 설정 → ⑤ 엔드포인트 접속 확인 순입니다.

AWS S3접속

AWS 콘솔 상단 검색창에 S3를 입력하고 서비스 목록에서 S3를 선택합니다.

버킷만들기 클릭

리전이 아시아 태평양(서울, ap-northeast-2)으로 선택되어 있는지 확인 후 [버킷 만들기]를 클릭합니다.

글로벌 네임스페이스, ACL 비활성화됨(권장) - 임시

버킷 이름을 입력합니다. 글로벌 네임스페이스 기준으로 버킷 이름은 전 세계에서 유일해야 하므로, 다른 AWS 사용자가 이미 사용 중인 이름은 생성이 불가합니다. 객체 소유권은 ACL 비활성화됨(권장) 그대로 둡니다.

생성 단계에서는 '모든 퍼블릭 액세스 차단'을 기본값(체크)으로 두고 진행합니다. 웹사이트 공개 설정은 버킷 생성 후 별도로 진행합니다.

기본설정 그대로

나머지 항목은 기본값으로 두고 [버킷 만들기]를 클릭하면 버킷 생성이 완료됩니다.

만들어진 내용 확인
HTML 웹사이트 세팅을 위한 편집

생성한 버킷으로 들어가 속성 탭을 클릭하고, 페이지 맨 아래로 스크롤하면 '정적 웹 사이트 호스팅' 항목이 있습니다. 현재 '비활성됨' 상태이며 [편집]을 클릭합니다.

정적 웹 사이트 호스팅, Index.html, 404.html

'활성화'를 선택하고, 호스팅 유형은 '정적 웹 사이트 호스팅'(버킷 엔드포인트를 웹 주소로 사용, 테스트 구축용)을 선택합니다. 인덱스 문서에는 사이트 첫 화면 파일명인 index.html, 오류 문서에는 404.html을 입력합니다. ※ 여기에 지정한 404.html 파일도 이후 실제로 함께 업로드해야 오류 페이지가 정상 동작합니다.

변경 사항 저장

리디렉션 규칙은 선택 사항이므로 비워두고, [변경 사항 저장]을 클릭합니다.

html 소스 업로드

이제 웹사이트 파일을 올릴 차례입니다. 객체 탭으로 이동하면 버킷이 비어 있는 상태이며, [업로드]를 클릭합니다.

 

폴더, 파일째로 업로드

업로드할 웹사이트 소스 파일과 폴더를 끌어다 놓거나 [파일 추가] / [폴더 추가]로 선택합니다. ※ 주의: index.html은 반드시 버킷 최상위(루트)에 위치해야 합니다. 폴더째 업로드해서 index.html이 하위 폴더로 들어가면 접속 시 404 오류가 발생합니다.

업로드

대상 버킷을 확인한 후 [업로드]를 클릭하면 업로드가 진행됩니다. 권한과 속성은 기본값 그대로 두면 됩니다.

권한탭 편집

외부에서 웹사이트에 접속하려면 버킷을 공개해야 합니다. 권한 탭으로 이동하면 '퍼블릭 액세스 차단(버킷 설정)'이 활성화 상태인 것을 확인할 수 있습니다. [편집]을 클릭합니다.

차단 해제, 변경 사항 저장

'모든 퍼블릭 액세스 차단' 체크를 해제하고 [변경 사항 저장]을 클릭합니다. ※ 이 설정 이후 버킷이 외부에 공개되므로, 웹사이트 파일 외에 개인정보나 설정 파일 등은 절대 업로드하면 안 됩니다.

확인 확인

경고 창이 나타나면 입력란에 확인을 입력하고 [확인]을 클릭합니다.

버킷 정책 편집

퍼블릭 액세스 차단을 해제해도 아직 접속은 되지 않습니다. 객체 읽기를 허용하는 버킷 정책을 추가해야 합니다. 같은 권한 탭에서 아래로 내려가 '버킷 정책'의 [편집]을 클릭합니다.

버킷명 입력, 변경 사항 저장

아래 정책을 입력하고, Resource 항목의 버킷명 부분만 본인 버킷 이름으로 변경한 후 [변경 사항 저장]을 클릭합니다. Principal "*"은 모든 사용자, s3:GetObject는 객체 읽기만 허용, 끝의 /*는 버킷 내 모든 객체를 의미합니다. ※ 끝의 /*를 빼먹으면 오류가 발생하니 주의합니다.

 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷명/*"
        }
    ]
}

 

속성
url 복사

설정이 끝났으면 다시 속성 탭으로 이동합니다.

맨 아래 '정적 웹 사이트 호스팅' 항목에 버킷 웹 사이트 엔드포인트 URL이 생성된 것을 확인할 수 있습니다. 서울 리전 기준 http://버킷명.s3-website.ap-northeast-2.amazonaws.com 형식이며, 이 URL로 접속합니다.

사이트 접속

엔드포인트로 접속하면 업로드한 index.html 페이지가 정상적으로 표시됩니다. 주소창에 '안전하지 않음'으로 표시되는 것은 S3 정적 웹 사이트 엔드포인트가 HTTP만 지원하고 HTTPS는 지원하지 않기 때문입니다. HTTPS를 적용하려면 CloudFront 연동이 필요합니다.

 

다음글링크 :  S3 웹사이트 엔드포인트 주소는 http:// 로만 접속되고 주소도 길어서 실제로 쓰기엔 아쉽습니다. 다음 글에서는 가비아에서 구입한 도메인을 연결하고, HTTPS(https://)로 접속되게 만들어 보겠습니다.

https://softwcgcg.tistory.com/27

 

[AWS] S3 사이트에 가비아 도메인 연결 + HTTPS 무료 적용하기 (ACM 인증서 + CloudFront 무료 플랜)

안녕하세요. 지난 글에서 S3 버킷으로 HTML 정적 웹사이트를 호스팅하는 방법을 알아봤습니다. ▼ 이전 글 참고 [AWS] Amazon S3 정적 웹사이트 호스팅 방법 (S3 버킷으로 HTML 사이트 만들기) https://softwc

softwcgcg.tistory.com

 

 

 

검색키워드


자주 묻는 질문 (FAQ)

Q1. S3 정적 웹사이트 호스팅은 HTTPS를 지원하나요?

아니요. S3 버킷 웹사이트 엔드포인트는 HTTP만 지원하며 HTTPS 접속은 지원하지 않습니다. HTTPS를 적용하려면 CloudFront를 S3 앞단에 연동해야 합니다. 브라우저 주소창에 '안전하지 않음'이 표시되는 것은 이 때문이며 설정 오류가 아닙니다.

Q2. 엔드포인트로 접속했는데 403 Access Denied 오류가 발생합니다.

퍼블릭 액세스 차단이 해제되지 않았거나 버킷 정책이 적용되지 않은 경우입니다. 권한 탭에서 '모든 퍼블릭 액세스 차단'이 해제(비활성화)되어 있는지, 버킷 정책의 Resource에 본인 버킷 이름과 끝의 /*가 정확히 입력됐는지 확인합니다.

Q3. 접속은 되는데 404 오류가 발생합니다.

index.html이 버킷 최상위(루트)가 아닌 하위 폴더에 업로드된 경우가 대부분입니다. 객체 탭에서 index.html이 폴더 안이 아니라 버킷 바로 아래에 있는지 확인하고, 정적 웹 사이트 호스팅 설정의 인덱스 문서 파일명과 대소문자까지 일치하는지 확인합니다.

Q4. S3 정적 웹사이트 호스팅 비용은 얼마인가요?

정적 웹사이트 호스팅 기능 자체에는 추가 요금이 없고, S3 표준 요금(저장 용량, 요청 수, 데이터 전송량)만 과금됩니다. 개인 포트폴리오나 테스트 수준의 소규모 사이트는 월 요금이 매우 적게 나오는 편이며, 정확한 요금은 AWS S3 요금 페이지에서 리전별로 확인할 수 있습니다.

Q5. 웹사이트 파일을 수정하면 어떻게 반영하나요?

수정한 파일을 객체 탭에서 같은 이름으로 다시 업로드하면 덮어쓰기되어 즉시 반영됩니다. 변경 사항이 보이지 않으면 브라우저 캐시 때문일 수 있으니 강력 새로고침(Ctrl+F5)으로 확인합니다.

Q6. 도메인(예: example.com)으로 접속하게 할 수 있나요?

가능합니다. Route 53에서 도메인을 S3 웹사이트 엔드포인트로 연결하면 되고, 이 경우 버킷 이름을 도메인 이름과 동일하게 생성해야 합니다. HTTPS까지 적용하려면 CloudFront와 ACM 인증서를 함께 사용합니다.

 

Amazon S3 정적 웹사이트 호스팅은 별도의 웹 서버(EC2 등) 없이 S3 버킷만으로 HTML/CSS/JS 웹사이트를 배포하는 방법입니다. 진행 순서는 ① S3 버킷 생성 → ② 정적 웹 사이트 호스팅 활성화(index.html 지정) → ③ 웹사이트 파일 업로드 → ④ 퍼블릭 액세스 차단 해제 및 버킷 정책 추가 → ⑤ 버킷 웹 사이트 엔드포인트 URL로 접속 확인, 이렇게 5단계이며 10분 정도면 완료됩니다.

정적 웹사이트 호스팅 기능 자체는 추가 요금이 없고 S3 저장/요청/전송 요금만 과금되므로, 포트폴리오·랜딩 페이지·테스트용 사이트를 저렴하게 운영하기에 적합합니다. 단, S3 웹사이트 엔드포인트는 HTTP만 지원하므로 HTTPS가 필요하면 CloudFront 연동이 필요합니다.

글은 서울 리전(ap-northeast-2) 기준 AWS 콘솔 화면으로 전체 과정을 따라 할 수 있게 정리했습니다.

 

H2. 1. S3 버킷 생성 — 사진 1~6H3. 1-1. S3 콘솔 접속 — 사진 1H3. 1-2. 버킷 만들기 — 사진 2H3. 1-3. 버킷 이름 및 객체 소유권 설정 — 사진 3H3. 1-4. 퍼블릭 액세스 차단 및 기본 설정 — 사진 4~5H3. 1-5. 버킷 생성 확인 — 사진 6

H2. 2. 정적 웹 사이트 호스팅 활성화 — 사진 7~9H3. 2-1. 속성 탭에서 편집 — 사진 7H3. 2-2. 인덱스 문서(index.html)와 오류 문서(404.html) 지정 — 사진 8H3. 2-3. 변경 사항 저장 — 사진 9

H2. 3. 웹사이트 파일 업로드 — 사진 10~12H3. 3-1. 객체 탭에서 업로드 — 사진 10H3. 3-2. 파일 및 폴더 추가 — 사진 11H3. 3-3. 업로드 완료 — 사진 12

H2. 4. 퍼블릭 액세스 및 버킷 정책 설정 — 사진 13~17H3. 4-1. 퍼블릭 액세스 차단 해제 — 사진 13~15H3. 4-2. 버킷 정책 추가 (s3:GetObject 허용) — 사진 16~17

H2. 5. 웹 사이트 엔드포인트 접속 확인 — 사진 18~20H3. 5-1. 엔드포인트 URL 확인 — 사진 18~19H3. 5-2. 브라우저 접속 테스트 — 사진 20

H2. 자주 묻는 질문 (FAQ) — 작성한 FAQ 섹션각 질문(Q1~Q6)을 H3로 지정

반응형
반응형

AWS 아마존 웹 서비스 회원가입 방법 안내입니다.

1. 회원가입 시 미리 준비해야 될 내용입니다.

AWS에서 사용할 이메일 주소
AWS계정이름
AWS에서 입력한 이메일주소로 인증코드 발송후 인증
AWS에서 사용할 패스워드
사업자등록증 PDF 파일 
AWS 담당자 이름 (영문)
회사이름 (영문)
AWS 담당자 연락처
회사 주소(영문)
우편번호 법인카드정보
법인카드정보
 

 

2. 회원가입 사이트 링크 접속 : https://signin.aws.amazon.com/signup?request_type=register

 

AWS Console - Signup

 

signin.aws.amazon.com

3. 가입 메일 주소 입력

3-1. 보안문자 입력

반응형

4. 가입할 이메일로 전송된 인증코드 확인

5. 확인코드 입력

6. 사용할 패스워드 입력 (해당 화면으로부터 10분간 다음 화면으로 동작이 없는 경우 세션 만료로 처음부터 다시 진행해야 함)

7. 계정 타입 선택 (회사계정이므로 유료 플랜 선택, 6개월 선택 시 제한적인 사용 및 6개월 사용 후 연장 없는 경우 계정해지)

7-1. 계정선택 시 참고내용

8. 연락처 정보 입력(모든 내용 영문으로 입력)

https://www.juso.go.kr/

 

주소정보누리집(도로명주소 안내시스템)

 

www.juso.go.kr

영문 주소 변환 사이트 참고

9. 결제정보 입력(카드만 가능)

9-1. 카드정보인증

10. 아마존 Support 플랜 선택 (무료)

이후 계산서 처리를 위한 사업자등록증 업로드 등 기타 내용은 다음 글에 작성하겠습니다.

반응형

+ Recent posts