한재원

한재원

🛠️ 저는 커서 백엔드 개발자가 될래요!

[AWS] AWS로 정적사이트 배포하기

Updated: Categories:

S3 + CloudFront를 사용하여 정적 사이트를 배포해보자

환경

  • AWS S3
  • AWS CloudFront
  • AWS ECM
  • Gabia

S3

  • 1. S3 서비스로 이동 -> 버킷 만들기

  • 2. 생성시 설정

    • 토이 프로젝트용이므로 퍼블릭 액세스는 허용해주자
    • 나머지 설정도 건들지 않고 바로 생성

image

  • 3. 업로드와 권한 설정
    • 이제 버킷에 파일을 업로드하면 url로 접근할 수 있음
    • 추가적으로 권한을 설정해보자

image

  • 4. 권한 -> 버킷 정책 탭으로 이동 후 편집 클릭

image

  • 5. 정책생성기를 통해 정책 생성 후 정책 작성 (그냥 public 설정임)
    • Principal : *
    • Actions : ALL
    • ARN : 버킷 속성에서 복붙

image

image

  • 6. 정적 웹 설정 : 속성 -> 정적 웹 사이트 호스팅 탭으로 이동, 편집 클릭
    • 인덱스 문서 : index.html로 해주자

image


ACM

  • CloudFront에서 붙여줄 도메인은 반드시 ACM에서 미리 인증서를 발급 받아둬야함

  • 난 가비아의 서브도메인에 CloudFront를 연결할 것이므로, 서브도메인의 인증서를 받아보자

  • 1. ACM 서비스 이동 -> 인증서 요청 -> 공인 인증서 요청 선택

  • 2. 도메인 이름 추가에 서브도메인을 추가
    • ❓ 여기서 abcd.example.com으로 특정 서브도메인을 지정하면 뒤에서 DNS인증이 되지 않았다.. 그냥 *로 해주자

image

  • 3. DNS 검증 선택 -> 태그는 알아서 설정 -> 검토

image

  • 4. 이렇게 생성하면 이제 DNS 검증을 해줘야 한다.
    • 아래처럼 탭을 열어서 이름과 값을 도메인 사이트에서 CNAME으로 테스트 매핑해줘야함 (난 가비아에서 진행)
    • 이름에서 뒤에 .example.com 이렇게 붙어있는건 지우고 넣어줘야함.

image

  • 5. 가비아 -> 도메인관리 -> DNS 정보 -> DNS 관리 클릭

image

  • 6. 아래처럼 도메인 선택 후 DNS 설정을 눌러주면…

image

  • 7. 레코드를 추가할 수 있다!
    • 타입은 CNAME, 호스트는 AWS에서 알려준 이름, 값/위치도 AWS에서 알려준 값을 입력해주고 저장
    • 이제 1분 안쪽으로 ACM에서 발급완료가 뜰것이다!

image


CloudFront

  • 1. CloudFront 서비스로 이동 -> 배포 생성

  • 2. 원본 도메인 : S3 버킷 도메인 선택 (딴건 냅두자)

image

  • 3. 기본 캐시 동작 : 사용할 기능들을 골라주면 됨
    • 난 HTTP 메소드는 모두 허용으로 했음

image

  • 4. 다른 옵션은 건들지 않고 바로 생성한다
    • 일단 생성해야 CloudFront 도메인이 만들어지기 때문에 도메인도 설정 X
  • 5. 생성 후 가비아에서 서브도메인 레코드를 생성 후 매핑
    • 타입 : 당연히 CNAME
    • 호스트 : 사용한 서브도메인명
    • 값/위치 : CloudFront 배포 인스턴스의 배포 도메인 이름

image

image

  • 6. 이제 CloudFront의 배포 인스턴스를 편집해주자
    • 연결할 서브도메인명과 아까 생성했던 인증서만 추가해주고 저장

image

  • 7. 끝!!! S3에 html을 올려놨으면 서브도메인/파일.html으로 접속시 웹페이지가 잘 뜰것이다~