EtoC
정적웹페이지 배포 본문
터미널에서 내가 배포할 폴더의 경로로 들어간다.
1. React 앱 build 하기
# react app build 명령어
npx react-scripts build
CRA(npx-create-react-aoo)으로 생성한경우 package.json의 build 스크립트를 바로 활용할 수 있다.
# CRA로 앱 생성한 경우 package.json의 빌드 스크립트로 가능
npm run build
build 하면 build 폴더가 생성되고 내부에 정적 웹 컨텐츠가 생긴다.
2. AWS S3 Bucket 생성하기
클라우드 스토리지 | 웹 스토리지| Amazon Web Services
닫기 이 다이어그램은 데이터를 Amazon S3로 이동하고, 저장된 데이터를 관리하며, 다른 서비스로 데이터를 분석하는 방법을 보여줍니다. 왼쪽에서 오른쪽으로 세 개의 섹션이 표시됩니다. 첫 번
aws.amazon.com
1) aws 에 로그인하여 s3 서비스에서 Bucket을 생성한다.
2) Bucket명을 입력하고 지역을 선택한다.
bucket이름은 나만 사용하는 것이 아닌 다른 유저들과도 공유되기 떄문에 중복되지 않게 작성해야한다.
3) Block 해제 후 Bucket 생성하기
Public Access 가 필요해서 모든 퍼블릭 엑세스 차단을 해제하고 아래의 체크박스에 체크하고 Bucket을 생성한다.
4 ) 파일 업로드하기
생성된 bucket 명을 클릭해서 파일을 업로드 한다.
파일 추가/ 폴더 추가 버튼을 눌러 처음에 생성한 build 폴더 내의 모든 파일과 폴더를 업로드한다.
위처럼 뜨면 업로드 성공!
이제 호스팅을 활성화 해야한다.
5) 정적파일을 호스팅
업로드된 Bucket의 속성(properties) 탭에서 맨아래로 내리면 정적 웹 사이트 호스팅이 있다.
호스팅이 비활성화되어있는데 활성화하고 기본페이지를 지정한다.
이제 접속해 볼 수 있다.
하지만 접속해보면 Access Denied 라며 403 Forbidden이 뜬다.
이유는 bucket의 객체(정적 파일들)에 대한 접근 정책을 작성하지 않았기 때문이다.
6) Bucket 정책 추가
다시 생성한 버킷으로 돌아와서 권한(Permissions) 탭으로 이동한다.
밑으로 내려보면 버킷 정책이 텅 비어있는 것을 볼 수 있는데 편집을 누르고 정책을 입력하고 저장하면 된다.
다시 스토리지 주소로 접속해보면 잘 뜨는것을 확인할 수 있다.
