[AWS] S3 퍼블릭 버킷을 이용한 정적 웹 사이트 배포하기

1. 개요

Amazon S3(Simple Storage Service)를 이용한 정적 웹 사이트 배포과정을 설명한다.

 

2. 서비스 소개

AWS S3: AWS에서 제공하는 객체 스토리지 서비스로, 데이터의 저장 및 검색 기능을 제공한다. 본 포스팅에서는 정적 웹 사이트 호스팅에 사용한다.

 

3. 필수 구성요소

정적 웹 파일: 배포하기 위한 리소스가 필요하다. HTML, CSS, JavaScript 파일등 웹 사이트를 구성하는 파일

AWS S3 버킷: 웹 리소스 파일을 저장할 S3 버킷

 

4. 배포 과정

1. 버킷 생성

리전을 선택하고 S3 서비스로 접근한 후 '버킷 만들기' 메뉴를 통해 새로운 버킷을 생성한다.

여기서 AWS Route 53을 이용하여 도메인을 배포할 계획에 있는 경우 도메인 명과 버킷 명을 일치시켜야 한다.

버킷 생성

아래로 스크롤하여, 버킷의 퍼블릭 액세스차단 설정을 공개 설정으로 변경한다.

버킷 퍼블릭 액세스 설정

이 설정의 사용은 버킷 내 저장된 모든 객체가 외부에서 접근 가능한 상태로 변경한다는 뜻으로 AWS 로그 등 민감한 정보를 절대 같은 버킷에 저장하지 않도록 주의한다.

3. 퍼블릭 액세스 권한 설정

버킷이 생성된 후에 "권한" > "버킷 정책" > "편집" 으로 진행한다.

버킷 정책 설정
정책 생성기 메뉴 접근

아래의 정책 생성기에 따라 새로운 정책을 설정한다.

- Effect의 경우 Allow(허용)을 선택한다.

- Action의 경우 리소스 접근 권한을 허용하기 위한 "GetObject" 권한을 선택한다.

- ARN의 경우 AWS에서 리소스를 구분하는 고유한 식별자로 방금 생성한 버킷의 ARN을 입력한다.

Add Statement 버튼으로 생성한다.

나타나는 팝업창의 정책을 복사하여 버킷 정책에 붙여넣기 한다. 이때 버킷의 접근 권한이 아닌 버킷 내 객체의 접근 권한을 허용하기 위해 구문을 아래와 같이 수정한다.

 

아래에 복사가 가능하도록 구문으로도 제공한다.

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

 

4. 리소스 업로드 및 엔드포인트 설정

버킷 설정을 완료했다면 웹 리소스 구성 파일들을 업로드한다.

객체 업로드

버킷의 속성 메뉴에 접근하고 정적 웹 사이트 호스팅 메뉴에 접근한다. 인덱스 문서 설정의 경우 웹 사이트의 메인 페이지(보통 index.html)를 인덱스 문서로 지정한다.

 

설정을 완료한 후에는 버킷 웹 사이트 엔드포인트 주소를 확인할 수 있다. URL에 접근하여 정상적으로 접근이 되는지 확인한다.

접근 확인

5. 도메인 연결

필요한 경우 AWS Route53 또는 다른 DNS 서비스를 사용하여 사용자 정의 도메인을 S3 버킷에 연결할 수 있다. S3 엔드포인트로 제공된 URL을 보면 버킷명과 리전으로 자원의 위치를 식별하고 있으며, 지나치게 많은 정보를 외부에 공개하고 있어 취약할 우려가 있다. 도메인을 연결하는 과정은 다음 포스팅에서 계속한다.

 

5. 마치며

웹  페이지의 샘플 데이터로 사용한 "자모조립소"는 깃허브 페이지(https://github.com/colfax0483/win_file_renamer)에 공개되어 있다.

 

GitHub - colfax0483/win_file_renamer: mac과 windows 한글 파일명 인코딩 간 자소분리현상 해결

mac과 windows 한글 파일명 인코딩 간 자소분리현상 해결. Contribute to colfax0483/win_file_renamer development by creating an account on GitHub.

github.com

 

반응형