[AWS] S3 -> CloudFront 극대노 연결 후기 #Route53

cafe24 에서 서버 빌려서 작업하거나, 회사 서버에서만 끄적거렸던 나에게 험난한 경험이 다가오게된다.
바로 AWS ...

극대노 연결 후기를 작성한다.
들어가기전에 앞서 아래는 나같은 게초보가 이해할수 있게끔 내가 이번에 사용했던 AWS 서비스 별 한줄요약이다.

S3 = 구글 드라이브랑 비슷함 , 파일보관 용도, 다만 특이하게 내가 원하는 도메인으로 연결해서 보는거 가능

LightSail = cafe24 서버 빌리는거랑 비슷

Route53 - 도메인 구매 및 연결하는곳

CloudFront - CDN 방식으로 assets 들 저장해서 더 빨리 불러올수 있게함

난 처음에 너무 헷갈렸다.
LightSail 이란놈에게서 서버가 돌아가고있는데 , S3 에서도 접속이 되네 ?
S3 도 서버 역할 하는건가 ? 여기다가 자바 깔고 ,PHP 깔수있는건가 ? 푸티 접속해서 systemctl 뭐시기 치는건가?
싶었는데 그게 아니고 S3 는 말그대로 저장소 역할 하는놈이다. 
친한 개발자 형에게 여쭤보니 보통 이미지 저장소로 많이 쓰인다고 하더라.

여튼 내가 하고자 했던것은

S3 에 올라가있는 html 을 도메인 연결해서 열고싶었다.
aws 제대로 알지도 못해서 끄적이다가 Access Denied 만 엄청 본듯..
열받은김에 까먹으면 더 열받을까봐 정리 들어간다..

아 도메인은 이미 보유하고있고, SSL 인증서도 기존에 발급 받아있다는 가정하에 진행한다
그리고 창 3개 틀어놓고 하는게 편하다
하나는 S3, 하나는 CloudFront, 하나는 Route53

처음에 아래 이미지를 보고 이해를 못했는데 이제서야 이해가 된다.
딱 이런 구조가 된다.

S3

얘는 "버킷" 이라는 개념이 존재하다 약간 도커로 치면 컨테이너 개념 비슷
말그대로 양동이, 그냥 윈도우 탐색기로 치면 버킷 하나에 폴더 하나라고 보면 편하다
보통 example.com 이런식으로 버킷 이름을 만듬

버킷 이름 당연히 중요하고 , 리전은 그냥 그대로 두면 됨

이 버킷의 퍼블릭 액세스 차단 설정, 저거 기본으로 "모든 퍼블릭 액세스 차단" 되어있는데 이거 풀어줘야된다.
안풀어주면 말그대로 다 차단해서 접근을 못함
차단 풀어주고 밑에 퍼블릭 상태 되는데 찐으로 괜찮냐? 묻는거 체크 해주면됨

버킷 만드는건 별거없다
1. 버킷 이름 짓고,
2. 퍼블릭 접근 갠춘 체크

아래 처럼 버킷이 하나 생길꺼다, 난 삽질을 하도 많이해서 버킷 3개나 있음 ㅎㅎ

자 이제 만들었으니까 이름 클릭해서 들어가갖고 html 파일 하나 아무거나 올려보자
들어가면 "객체" 쪽에

버튼 겁나 잘 보이게 있으니 누구나 쉽게 올릴수있다.
아래 스크린샷 객체(8) 은 무시해도된다.
다른 짜잘한 파일이 있어서 부끄러우니까 일부러 index.html 만 보여주려고 검색해서 캡쳐함

여튼 여기서 index.html 을 들어가게되면 아래와 같은 화면이 나오는데

저기서 객체 URL 클릭했을때 index.html 잘 열리는지 부터 확인하자
만약에 잘 안열리면 버킷 만들때 퍼블릭 뭐시기 정상적으로 안열려서 그렇다

정상적으로 잘 열었는데 안열리는 경우엔 정책을 수정해줘야되는데 그건 밑에서 한번에 추가하면되니까 우선 넘어가자

---

CloudFront

배포 -> 배포 생성

1. 원본 도메인 선택
버킷을 정상적으로 만들었다면 원본 도메인에 내가 방금 만든 버킷이 보인다 그거 클릭해서 넣어주자

Select box 가 밑에 가려서 캡쳐본엔 보이지 않는다만

2. 원본 경로 - 선택 사항
이 있는데, 이건 버킷에 index.html 이 그냥 해당 폴더의 최상위 / 에 위치해있으므로 그냥 아무것도 안적어도된다
만약에 m 이라는 폴더에 있으면 /m 이라고 적어주면된다.

3. 이름
1번에서 원본 도메인 선택을 했다면 여기에 이름이 자동으로 채워지면서 
S3 버킷 액세스 라고 보일거다 이 부분이 핵심

"원본 액세스 제어 설정(권장)" 클릭 -> 제어 설정 생성 클릭 누르면

이름 기본으로 들어가있는데 굳이 수정 안해도된다. 다른거 건드리지말고 그대로 생성 클릭

기본 캐시 동작은 기본값 그대로 놔둬도된다.

함수 연결 - 선택 사항 도 기본값 놔둬도 됨

맨 마지막 "설정" 부분에서 대체 도메인 입력

그리고 대체도메인 입력할거면 사용자 정의 SSL 인증서 선택하라고한다.
그러고 난후에 다른건 다 기본값으로 놔두되 , 연결할 루트 객체에 index.html 이라고 써주자

이렇게 하면 배포 생성 완료되고 목록에 보면
내가 방금 만든 배포본이 나와있다, 내가 방금 입력한 대체도메인도 이쁘게 잘 들어가있으면된거다.

여기서 이제 "도메인 이름" 을 보면 뭔가 변태같이 암호화 된것마냥 ljkfdsaasdfas134.cloudfront.net 이라고 되어있는데
거길 한번 들어가보자 정상적으로 접속이 안되는걸 확인할 수 있다.
사이트에 연결을 할수 없다거나 Access Denied 가 뜰거다 ( 이부분은 정확히 체크를 안해서 다시 확인 필요)
여튼 안될건데 정책을 추가해줘야한다.

내가 방금 만든 배포본 상세 ID 클릭해서 상세페이지로 진입하고 "원본" 클릭

원본 진입하면 아래와 같은 창이 뜨는데 거기에 있는거 체크 하고 "편집" 클릭

편집창 들어가서 밑에 좀 내리면 "정책 복사" 라는 버튼이 생겨있는데 해당 부분 클릭해서 정책 복사

정책 복사 하면 아래와 같은 내용이 복사가 된다.

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::myexample.com/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::11111111111111:distribution/E1AWXWSPWWWWJ"
                    }
                }
            }
        ]
      }

이거 복사 잘 해둔채로 다시 아까 만들었던 버킷 상세 페이지로 간다.
상세 페이지에서 "객체" 가 아닌 "권한" 페이지로 이동하면 아래와 같은 페이지가 보이는데 
저기서 "버킷 정책" - "편집" 창 들어가서 방금 복사했던거 복붙하고 "변경 사항 저장"

이렇게 정책 추가 하고나서 CloudFront 의 변태같던(ljkfdsaasdfas134.cloudfront.net) 도메인을 클릭해서 들어가보면 정상적으로 html 페이지가 열리는걸 확인할수 있다.

---

Route 53

호스팅 영역이 이미 있다는 가정하에 도메인 진입 하면 레코드들을 볼수있는데 거기서 레코드 생성

서브도메인 쪽은 아무것도 쓰지말고 레코드 유형 맞게 선택 
(서브도메인쪽에 www 붙은 버전으로 하나 더 만들어도 된다.)
그리고 별칭 체크해서 CloudFront 배포에 대한 별칭 선택하고 아래 아까 그 변태같던 도메인 선택

하면 내가 원하는 도메인으로 연결이 된것을 확인할수 있다.
접속도 잘된다.

---

편의상 반말로 포스팅 했는데 양해부탁드립니다.
저도 aws 에대해서 정말 하나도 모르고 혼자 삽질하다가 겨우겨우 한거라 .. 혹시 이상하거나 저대로 안되는거 있으면 댓글 부탁드립니다 !