태그
Date :

AWS S3 - Directory Listing (with CloudFront)

AWS S3 Static Hosting(+CloudFront) - Directory Listing


 Directory Listing은 http://ftp.kaist.ac.kr/CentOS/ 와 같이 내 서버의 디렉터리 내에 어떤 파일들이 있는지 리스팅을 하는 것을 의미한다.

 웹서버 데몬의 취약점으로 Directory Listing 되는 경우도 있지만, 가끔씩 위의 카이스트FTP미러처럼 공유의 목적으로 일부러 Directory Listing을 하는 경우도 있다.


AWS에서 CloudFront + S3는 대표적인 Static Hosting 조합이다.

(이 포스팅은) CloudFront + S3 조합으로 Directory Listing을 원하는 경우에 대한 포스팅



https://github.com/awslabs/aws-js-s3-explorer

위 링크에 대부분의 내용이 있다.

자신의 계정으로 해당 Repo를 Fork한 다음 작업하는 것을 추천한다.


이 포스팅과의 차이점은, CloudFront를 쓰냐 마냐의 차이이다.

(이 차이가 사실 매우 중요하다. *.cloudfront.net 혹은 CNAME을 쓰냐 아니면 *.amazonaws.com을 쓰냐의 차이)



* CloudFront + S3 조합을 한번이라도 사용해본 다음 진행할 것을 권장

포스팅에서 S3 버킷명 : dwer.web.share

포스팅에서의 CloudFront CNAME : share.dwer.kr


1. S3 버킷 생성

새 S3 버킷을 생성한다. (나머지 세팅은 입맛에 맞게 알아서)
이때, 퍼블릭 액세스를 위해 '새 ACL을 통해 부여된 버킷 및 객체에 대한 퍼블릭 액세스 차단' 및 '임의의 ACL을 통해 부여된 버킷 및 객체에 대한 퍼블릭 액세스 차단' 2개를 이 곳 '버킷 세팅'과, 좌측의 '퍼블릭 액세스 차단(계정 설정)에서 모두 해지한다.

만약 계정설정에서 모든 액세스 차단 설정을 하고 싶은 경우, 다른 방법으로 퍼블릭 액세스를 풀어야 한다. VPC와의 연계 등으로 해결하면 될 것 같다.

위와 같이 세팅이 될 것이다.


퍼블릭 액세스 권한에 'Everyone'이 있어야 한다. (없으면 Everyone 추가)


CORS 구성이 필요하다.
다음 값으로 CORS 세팅 (CNAME 업데이트 필요)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://share.dwer.kr</AllowedOrigin>
    <AllowedOrigin>https://share.dwer.kr</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>300</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
 
 
cs



(참고) : S3 옵션의 정적 웹 사이트 호스팅은 꺼져있어도 된다. (CloudFront가 웹 호스팅)



2. CloudFront 설정

새 CloudFront 배포를 생성한다. 보안상 OAI 사용을 권장한다. 

아까전에 생성한 S3 버킷을 선택한다.

"Grand Read Permissions on Bucket"에 Yes를 사용하면 S3 버킷의 Policy를 CloudFront에서 알아서 변경해준다.

만일 CloudFront에서 OAI를 사용하여 S3에 접근하는데, S3 버킷 정책을 직접 수정한다면 다음과 같이 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ### OAI 값 ###"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::dwer.web.share/*"
        }
    ]
}
cs


Origin Request Policy (혹은 Legacy 세팅 - Request Headers의 Whitelist 선택)

-> "Access-Control-Request-Headers" / "Access-Control-Request-Method"를 추가한다.


그 외 나머지 CloudFront 세팅은 본인의 입맞에 맞게 하면 된다. 특히 CNAME 부분 등.



3. 소스코드 세팅 및 업로드

https://github.com/awslabs/aws-js-s3-explorer 를 fork한 다음, index.html을 자신의 환경에 맞게 수정한 후 새로 생성한 S3 버킷에 올리면 끝~!

(버킷 이름, 버킷 리전 등을 세팅해야 한다)


해당 github repo에서 index.html을 그대로 S3 버킷에 올리면 일부 장애를 일으킨다.

필자의 경우 해당 장애를 수동으로 고쳤다.

필자가 고친 소스코드 : https://raw.githubusercontent.com/DWER001/aws-js-s3-explorer/master/_Customize/main.html

(https://share.dwer.kr 에서도 상시 확인 가능. 소스코드의 @TODO를 확인하면 됨)



4. 테스트

(https://share.dwer.kr 에서 상시 확인 가능)


Directory Listing이 잘 된다~

Category :

댓글

댓글 쓰기