파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅

📌 시리즈 포스팅

1.  파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발
2.  파일 업로드 웹 페이지 구축: (2) AWS IAM 역할 생성
3.  파일 업로드 웹 페이지 구축: (3) AWS Lambda 생성
4.  파일 업로드 웹 페이지 구축: (4) AWS S3 생성
5.  파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성
6.  파일 업로드 웹 페이지 구축: (6) AWS Lambda 함수 작성
7.  파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call
8.  파일 업로드 웹 페이지 구축: (8) 파일 업로드 테스트
9.  파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅

👨‍💻 들어가며

본 포스팅에서는 AWS S3를 기반으로 정적 웹 호스팅 방법을 소개합니다. 지금까지 프론트엔드는 localhost에서 구동했기 때문에, 로컬 PC가 아닌 외부에서 URL을 타고 접근할 수 없었습니다. 이번 튜토리얼을 마치시면 언제, 어디서든 버킷 웹 사이트 엔드포인트(i.e., URL)를 통해 파일 업로드 웹 페이지에 접속하여 서버에 파일을 업로드하실 수 있습니다.

📚 목차

1.  S3 버킷 생성
2.  S3 버킷 정책 편집
3.  S3 속성 편집
4.  배포 파일 생성
5.  배포 파일 업로드
6.  웹 구동 테스트

---

1.  S3 버킷 생성

1) S3 콘솔 접근

• S3 검색 후 S3 콘솔 접근(그림 1)

그림 1. S3 콘솔 접근

2) 버킷 생성

• "버킷 만들기" 클릭(그림 2)

그림 2 버킷 만들기

3) 버킷 네이밍

• 버킷 이름 설정(그림 3)

그림 3. 버킷 네이밍

4) 퍼블릭 엑세스 차단 해제

• 테스트 목적이므로 '모든 퍼블릭 액세스 차단' 체크 해제(그림 4)

그림 4. 퍼블릭 액세스 차단 설정

5) 버킷 버전 관리 및 암호화

• 버킷 버전 관리 및 서버 측 암호화 모두 '활성화' 선택(그림 5)
• 우측 하단 '버킷 만들기' 버튼 클릭

그림 5. 버킷 버전 관리 및 서버 측 암호화 활성화

2.  S3 버킷 정책 편집

1) 버킷 접근

• 방금 생성한 버킷 접근(그림 6)

그림 6 버킷 접근

2) 권한 편집 콘솔 접근

• 버킷 내 메뉴바에서 권한 클릭(그림 7)

그림 7. 권한 편집 콘솔 접근

3) 버킷 정책 편집

• 버킷 정책 '편집' 버튼 클릭(그림 8)

그림 8. 버킷 정책 편집

4) 버킷 정책 입력

• 아래의 버킷 정책 복사 및 붙여넣기
• Resource에는 본인 S3 버킷 이름 입력(그림 9)

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

그림 9. 버킷 정책 입력

3.  S3 속성 편집

1) 속성 편집 콘솔 접근

• 버킷 메뉴바 내 속성 버튼 클릭(그림 10)

그림 10. 속성 편집 콘솔 접근

2) 정적 웹 호스팅 편집 콘솔 접근

• 정적 웹 사이트 호스팅 편집 버튼 클릭(그림 11)

그림 11. 정적 웹 사이트 호스팅 편집 콘솔 접근

3) 정적 웹 호스팅 편집

• 정적 웹 사이트 호스팅 활성화 체크(그림 12)
• 호스팅 유형: 정적 웹 사이트 호스팅
• 인덱스 문서: index.html
• 오류 문서: index.html(상동)

그림 12. 정적 웹 사이트 호스팅 편집

4.  배포 파일 생성

프론트엔드 프로젝트 터미널로 돌아와서 아래 명령어를 통해 배포 파일을 생성합니다(그림 13).

npm run build

그림 13. 배포 파일 생성

5.  배포 파일 업로드

1) S3 객체 콘솔 접근

• 프론트엔드 담당 S3 버킷 접근
• 메뉴바 - 객체 버튼 클릭(그림 14)

그림 14. 배포 파일 S3 업로드 콘솔 접근

2) 파일 업로드

• "파일 추가" 버튼 클릭(그림 15)

그림 15. 파일 추가 버튼 클릭

• 빌드한 파일 선택(그림 16)

그림 16. 빌드 파일 업로드

• "폴더 추가" 버튼 클릭(그림 17)

그림 17. 폴더 추가 버튼 클릭

• static 파일 추가(그림 18)

그림 18. static 폴더 추가

• 우측 맨 하단에 "업로드" 버튼 클릭(그림 19)

그림 19. 파일 업로드

6.  웹 구동 테스트

• 속성 탭 클릭(그림 20)

그림 20. 속성 탭 접근

• 하단에 정적 웹 사이트 호스팅 탭 내 엔드포인트 링크 클릭(그림 21)

그림 21.웹 사이트 엔드포인트

• 웹 페이지 확인(그림 22)

그림 22. 웹 페이지 확인

• 파일 업로드 후 콘솔창 확인(그림 23)
• 에러 없이 업로드 로직의 수행 여부 확인

그림 23. 웹 콘솔 기반 파일 업로드 테스트 확인

• 파일 저장용 S3 내 파일 업로드 확인(그림 24)

그림 24. S3 내 파일 정상 업로드 확인

이것으로 S3를 활용하여 웹 페이지를 호스팅 하고, S3, Lambda, API Gateway를 활용하여 파일을 업로드하는 시스템 구현까지 완성하였습니다.

📌 시리즈 포스팅

1.  파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발
2.  파일 업로드 웹 페이지 구축: (2) AWS IAM 역할 생성
3.  파일 업로드 웹 페이지 구축: (3) AWS Lambda 생성
4.  파일 업로드 웹 페이지 구축: (4) AWS S3 생성
5.  파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성
6.  파일 업로드 웹 페이지 구축: (6) AWS Lambda 함수 작성
7.  파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call
8.  파일 업로드 웹 페이지 구축: (8) 파일 업로드 테스트
9.  파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅

---

포스팅 내용에 오류가 있거나 궁금한 사항이 있으시다면 아래에 댓글 남겨주시길 바랍니다.

그럼 오늘도 즐겁고 건강한 하루 보내시길 바랍니다😊

고맙습니다 :)