S3 버킷으로 웹사이트 배포하는 법 (정적 호스팅 하는 법)

프로젝트로 게임을 만든 뒤 AWS로 배포하는 법을 선택하고 배포하였다. 

프로젝트로 만든 게임 화면은 다음과 같다.

 

 

먼저 AWS 콘솔 창에서 로그인 후 검색창에 S3를 검색해서 아래와 같은 그림을 선택한다.

그러면 다음과 같은 화면이 나온다. 여기서 버킷만들기를 선택한다.

 

AWS 리전은 서울, ap-northeasr-2로 지정하고, 버킷의 퍼브릭 액세스 차단을 풀어준다. 아래 경고 문구의 체크박스를 체크한다.
버킷 만들기를 누르면 버킷이 생성된다.

버킷만들기 창

 

생성한 버킷에 들어가 권한-> 버킷 정책->편집->정책생성기로 들어간다.

 

Select Type of Policy는 S3 Bucket Policy 선택. Principal은 * 기입. Actions는 Getobject 선택. ARN은 버킷정책편집에 있는 버킷 ARN을 복사해서 붙이고, 뒤에 /*을 추가.
ex) arn:aws:s3:::hamario-test/*
그리고 Add Statement를 클릭하면 Generate Policy 버튼이 생기고 이를 클릭하면 정책이 생성된다.  이걸 복사해서 버킷 정책 편집 창에 붙여넣고 변경 사항 저장을 클릭하면 정책 생성이 완료된다.

 

객체 -> 업로드를 클릭해서 사이트를 구성하는 모든 파일을 업로드한다. 

위와 같이 파일에서 직접 끌어다가 놓으면 편하다.

속성 -> 정적 웹 사이트 호스팅 -> 편집으로 가서 인덱스 문서를 지정한다. index.html이 될 수도 있고, 우리처럼 stage0.html 등이 될 수도 있다. 자신의 html 문서 중에서 가장 먼저 시작되는, 보이고 싶은 html 문서를 지정하면 된다.
오류 발생시에 반환되는 문서도 지정할 수 있는데, 나는 똑같이 stage0.html로 지정했다. 변경사항을 저장하면 웹사이트 URL이 생성된다.

*이건 Optional한 것. 우리 사이트는 음악을 넣으려고 하니 CORS(Cross-Origin Resource Share) 오류가 계속 발생했음. 이를 해결하고자 권한 탭 내의 CORS를 구성했음. 혹시 CORS 오류가 발생하시는 분들은 참고하시면 됩니다. 아래 코드블럭에 있는 코드를 넣으면 된다. AllowedOrigins 만 방금 만든 사이트 정적 호스팅 url로 바꿔서 올리면 된다.

 

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "정적 웹 사이트 호스팅 주소" //여기 바꿔 넣으시면 됩니다.
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

 

여기까지 됐으면 아까 만든 정적 웹 사이트 호스팅 주소로 들어가면 정상적으로 사이트가 작동하는 것을 볼 수 있을 것이다! 😊