• [AWS] S3 버킷으로 정적 웹사이트 호스팅하기

    2019. 7. 1.

    by. 나나 (nykim)

    320x100

    1. S3에 버킷을 만든다. 이때 이름은 웹사이트 도메인과 동일해야 한다.

    예를 들어, 사이트 도메인이 thevitolabs.com 이라면 thevitolabs.com 이란 이름의 버킷을 만들어야 한다.

     

     

     

    2. 기존 웹호스팅처럼 폴더를 만들고 그 안에 정적 웹사이트를 구성하는 파일을 업로드한다.

     

     

    3. '권한' 탭으로 들어가 퍼블릭 액세스를 허용해준다.

    버킷 정책에 아래 내용을 붙여넣으면 버킷 자체가 퍼블릭으로 변한다.

     

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::{여기에버킷이름을적는다}/*"
            }
        ]
    }

     

     

    4. '속성' 탭에 들어가 정적 웹 사이트 호스팅을 활성화한다. 인덱스 문서의 파일명을 적는다. (대부분은 index.html일 것!)

     

     

     

    5. 요 엔드포인트는 잘 복사해서 가지고 있자.

     

     

     

    6. 도메인을 구매한 사이트로 접속해 DNS 관리로 들어간다.

    CNAME에서 도메인 이름은 도메인 주소 그대로 넣고, 연결할 도메인 주소는 엔드포인트에서 버킷이름을 제외하면 된다.

    's3-website.ap-northeast-2.amazonaws.com'

     

     

     

    만약 엔드포인트를 그대로 넣을 경우 404 NoSuchKey 오류를 내놓는다(ㅠ.ㅠ)

    찾아보니까 경로가 일치하지 않은 경우 발생하는데, 아마 이거 때문에 일어난 거 같다.

     

    여기서 잠깐!

    DNS(도메인 네임 시스템)에는 A 레코드 / CNAME 레코드 두 가지 방식이 있다.

     

    A 레코드 = 특정한 IP 주소

    1. 브라우저: www.nykim.net 의 IP 주소는 뭐야?

    2. 서버: 123.45.678.90이야

     

    CNAME 레코드 = IP가 아닌 도메인 이름

    1. 브라우저: www.nykim.net 의 IP 주소는 뭐야?

    2. 서버: 그건 nykim.net 이랑 같아

    3. 브라우저: nykim.net의 IP 주소는 뭔데?

    4. 서버: 그건 123.45.678.90이야

     

    따라서 CNAME으로 지정해놓으면, 추후 IP 주소가 변경되더라도 메인 도메인 주소만 바꾸고 하위 도메인은 변경할 필요가 없어 편리하다.

     

     

    7. 하위 도메인을 위해 www나 test 등의 서브 도메인네임을 추가해준다.

    이때도 마찬가지로 엔드포인트에서 버킷이름을 제외한 주소를 넣어준다.

     

     

    8. 하지만 이대로는 서브도메인에 접속할 수 없다. 아마 그런 버킷은 없눈데여ㅇㅅㅇ? 란 에러가 나올 것이다.

    그 이유는, 서브도메인명(test.nykim.work)+AWS주소(s3-website.ap-northeast-2.amazonaws.com)로 접속하려 들기 때문.

    하지만 당연히 저 서브도메인명으로 되어 있는 버킷은 없다. 그래서 오류가 나는 것.

     

     

    9. 따라서 AWS로 돌아가 서브도메인명으로 된 버킷을 새로 만들어준다.

    여기서는 test.thevitolabs.com이라는 버킷을 생성했다.

     

     

    10. 이 버킷 역시 퍼블릭으로 설정하고, 웹 호스팅을 활성화한다.

    이때 '요청 리디렉션' 항목을 선택하고, 리디렉션 시킬 주소를 적는다.

    임시로 nykim.net이라고 적어주었다.

     

     

     

    11. 이제 test.thevitolabs.com을 주소창에 치면, DNS가 "아 걔는 nykim.net인데여" "nykim.net의 IP주소는 123.456.78입니당" 이라고 알려줘서 쓔웅 리디렉션 된다.

     

     

     

    12. 결론! www처럼 입력을 해도 그냥 nykim.net으로 들어가게 하고 싶으면,

    www.nykim.net과 nykim.net 버킷 두 개를 만들고, 전자를 nykim.net으로 리디렉션시키면 된다.

     

     

    [참고링크]

     

     

    728x90

    'Blog > etc.' 카테고리의 다른 글

    웹 퍼블리셔를 위한 VS CODE 확장 프로그램  (2) 2020.04.05
    [DP] Web Publishing Copy - Studio JT  (1) 2019.10.31
    [SVG] clip path  (0) 2019.09.17
    iTerm, Zsh, Oh my Zsh 설치하기  (0) 2019.03.07
    [PHP] PHP 맛보기 - 1  (0) 2019.01.24

    댓글