[AWS] S3에 CRA 프로젝트 배포하기

정찬욱·2023년 3월 1일

React S3 aws

AWS

목록 보기

1/1

방법

우선 각자가 만든 React 프로젝트가 있다고 가정하자.

1. local에서 빌드시키기

터미널을 키고 프로젝트 경로에 npm run build를 실행시킨다.
명령어를 실행하면 build 폴더가 생성되어 빌드 시키기 위한 정적인 파일이 담겨져있다.

그리고 터미널엔 다음과 같이 출력이 된다.

serve -s build를 입력하면 local에서 서버를 실행시킬수 있다. 참고로 powershell에선 보안때문에 명령어가 안먹히므로 cmd에서 실행하자.

명렁어를 입력하면 실행시킬 수 있는 서버가 나온다.

주어진 서버에 들어가면 npm run build를 실행시킨 시점인 화면이 나오게 된다. 만약에 수정된 부분이 있으면 다시 npm run build를 실행시킨 후 서버에 들어가야 한다.

2. aws 홈페이지 접속

s3 서비스 페이지에 들어간다. 만약 aws 회원이 아니라면 회원가입을 하고 시작하자.
https://s3.console.aws.amazon.com/s3/get-started?region=us-east-1
버킷 생성을 클릭한다
버킷이름과 리전을 입력한다. 버킷이름은 사용자가 원하는 이름으로 작성할 수있고 리전은 본인이 서비스를 하고 있는 지역을 선택하면 된다.
객체 활성화 부분은 넘어가고 버킷의 public 접근 차단이라는 게 있을텐데 기본적으로 모든 보안은 다 막고 시작한다. 하지만 우리는 배포한 서버를 누구나 이용할 수 있게 해야하기때문에 아래 사진과 같이 접근 차단을 풀어준다.
그 외 과정들은 그대로 냅두고 최종적으로 버킷생성 버튼을 누르면 된다.
버킷 생성이 완료되면 내 버킷 리스트가 나온다. 리스트에 있는 버킷을 클릭해보자.
다음과 같이 객체 / 속성 / 권한 등 여러가지가 있을 것이다.
객체는 버킷 안에 저장해 둔 파일을 뜻하고 처음에는 빈 객체일 것이다. 여기 안에 들어갈 파일은 대표적으로 react폴더 안에 있는 build폴더에 있는 파일들을 업로드 해주면 된다.
업로드 할때 주의할점은 build폴더를 통째로 업로드하면 안되고 폴더 안에 있는 파일들을 전체선택해서 업로드해줘야 한다.

속성 버튼을 누르고 맨 아래로 내려가면 정적 웹 사이트 호스팅이 있는데 비활성화 되어있으므로 편집을 눌러서 활성화에 체크해주고 인덱스 문서에 index.html을 적어준다.
그럼 주소가 주어진다.
하지만 이 주소대로 들어가면 403 에러가 나온다. 즉 권한이 없기 때문에 권한 셋팅을 해줘야하는데 권한에 들어가면 다음과 같은 화면이 나올것이다. 그러면 버킷 정책 오른쪽에 있는 편집버튼을 누른다.

그리고 버킷 정책에 JSON 형태로 다음과 같이 넣어준다.

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

JSON형태의 권한 정책을 살펴보면