[AWS] 프론트 S3 버킷 배포

요약

AWS S3 버킷으로 프론트 코드 정적 배포

 

버킷 생성하기

• 우선 S3 버킷을 생성해 주자. (AWS > S3 > 버킷생성)
• 리전 ( 서울로 설정 ) 
• S3를 저장소로 사용하는 경우라면 퍼블릭 액세스는 막아두는것이 맞겠지만, 우리는 빌드한 프로젝트를 업로드해서 공개할 예정이니 모든 퍼블릭 액세스를 오픈한다.

---

파일 업로드 및 권한설정

• 생성된 버킷을 찾아 들어가면 아래의 화면이 나온다.
• 업로드를 누르면 나오는 창에 파일과 폴더를 하나씩 직접 넣는다.
• index.html이 루트 경로에 자리할 수 있도록 파일을 넣는다.

업로드 버튼을 눌러 빌드 폴더의 파일과 폴더를 모두 업로드 해준다.
이 때, 파일은 여러 개가 한꺼번에 올라가지 않으므로, 하나씩 선택하여 업로드해 주고, 폴더도 하나씩 클릭하여 업로드 해 준다.

 

예시 : 아래 사진 기준으로, 빨간색 박스 안에 들어있는 폴더or파일을 한번씩 클릭하여 총 5번 업로드를 진행한다.

---

속성 탭 제일 하단에 정적 웹 사이트 호스팅 편집

4-1. '편집'을 클릭하면 아래와 같은 창이 뜨는데, 체크박스의 설정을 아래와 동일하게 해 주면된다.
- 정적 웹 사이트 호스팅 ➡️ 활성화
- 호스팅 유형 ➡️ 정적 웹 사이트 호스팅
- 인덱스 문서 ➡️ index.html이라고 작성
- 오류 문서 ➡️ index.html이라고 작성
- 리디렉션 규칙 - 비워두어도 된다.
- 위와 같이 설정해 준 후, '변경사항 저장'을 클릭

여기까지 하면 앤드포인트가 생성됨을 확인할 수 있다.

---

버킷 권한 설정

권한 탭의 버킷 정책 > 편집으로 이동

 

⛔️ 아래 코드 붙여넣기 할 때 주의점!! 코드 가장 아래 줄의 'Bucket-Name'에 본인의 버킷 이름을 넣어줘야 한다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

내 버킷 이름을 넣은 예시)

이제 다시 속성 탭으로 가서 생성해놓았던 엔드포인트를 클릭하면

내 프로젝트가 화면에 정상적으로 나오는 것을 볼 수 있다.

 그런데 만약 내 화면이 나오지 않는다면? 불러온 API의 권한 설정이 되어있는지 확인해야 한다.

 

 

해당 도메인에 나의 엔드포인트를 허가시켜주면  API때문에 404 오류를 보지 않아도 될 것이다.