프론트엔드 AWS에 배포하기

1. 버킷만들기

2. 버킷만들기

- 버킷 이름은 규칙에 나온 것에 맞춰 소문자로만 작성하여야 한다.

3. 퍼블릭 엑세스 차단 설정 풀기

 

이후 나머지는 그대로 놔두고 버킷을 만들도록 한다.

 

아래와 같이 만들어진 버킷을 볼 수 있는데 이름을 클릭 한다.

 

4. 업로드를 클릭하고 빌드 폴더의 파일과 폴더를 모두 업로드 한다.

 

이후 업로드를 누르면 아래와 같은 창이 나타난다

 

5. 이후 속성 탭을 들어가 아래와 같이 작업한다.

- 속성을 들어가 정적 웹 사이트 호스팅 편집 클릭

- 정적 웹 사이트 호스팅 활성화로 변경

- 인덱스 문서 index.html이라고 작성

- 오류 문서 index.html이라고 작성

- 이후 변경사항 저장 클릭

 

 

하지만 엔드포인트를 들어가보아도 아래와 같이 403 에러가 나타날 것이다

6. 버킷 정책의 코드 모두 삭제후 아래 코드 복사 붙혀넣기

- 권한 탭에서 버킷 정책 편집을 들어간다

- 코드가 있다면 모두 삭제하고 바로 아래의 코드를 복사 붙혀 넣기 한다

※ 주의 할 점은 아래의 Bucket-Name 에는 본인의 버킷 이름을 넣어줘야 한다.

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

예시 사진

ps) 버킷 정책 커스텀이 필요할 시 

- 정책 생성기에 들어가 필요한 정책을 추가하여 코드를 생성한다

- 동그라미 친 것들을 천천히 확인하며 ARN에 자기 자신의 버킷ARN을 복사 붙혀넣기하고 Add를 눌러 코드를 확인한다

 

 

 

 

6-2. 만약 아래와 같은 액세스 차단이 뜰때  

 

- 위와 같이 정책을 변경할 수 없을 시에 퍼블릭 액세스 활성화 차단을 풀고 다시 진행한다

- 변경 사항 저장을 한 후 액세스 차단 비활성을 확인하고 다시 정책을 복사 붙혀넣기를 한다

 

 

■ 카카오 API를 이용하였을 시에 나타나는 오류 해결 법

- 참고 자료: https://velog.io/@minju1009/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-AWS-%EB%B0%B0%ED%8F%AC%ED%95%98%EB%8A%94-%EB%B2%95