AWS S3로 CRA 배포 + GitHub Actions로 자동화 (1)

🏝 정적 웹 사이트 배포

 

AWS 콘솔에서 S3 서비스 사용

AWS 콘솔로 이동한다.

https://us-east-1.console.aws.amazon.com/console/home

https://us-east-1.console.aws.amazon.com/console/home

 

 

검색을 통해 S3 서비스로 이동한다.

 

 

 

버킷 만들기

좌측 메뉴에서 버킷 탭으로 이동한다.

여기서 버킷은 하나의 저장소 구획이라고 볼 수 있다.

 

 

버킷 만들기를 통해 버킷을 생성한다.

 

 

버킷 이름와 AWS 리전 세팅한다.

 

 

객체 소유권은 권장하는 세팅인 ACL 비활성으로 둔다.

 

 

버킷의 퍼블릭 액세스 차단 설정으로 이동한다.

프로젝트 배포를 위해 차단을 해제한다.

 

 

버킷 만들기를 통해 버킷을 생성한다.

 

 

생성된 버킷 확인할 수 있다.

여기서 버킷 안에 저장해둔 파일을 객체라고 부른다.

 

웹 사이트로 배포하기

CRA에서 npm run build 를 통해 빌드한 파일을 버킷에 업로드한다.

 

 

속성 탭으로 이동한다

 

 

정적 웹 사이트 호스팅 편집을 활성화한다.

인덱스 문서란에 index.html을 기입한다.

 

 

저장 시 배포 url이 생성된 것을 확인 가능하다.

하지만 url에 접속 시 403 오류로 접근이 안 되는 것을 확인 할 수 있다.

 

 

권한 탭으로 이동한다.

 

 

버킷 정책 편집으로 이동한다.

현재 버킷에 모든 사용자가 접근 가능하도록 정책을 설정한다.

아래는 예시 json 코드이다

Statement의 Resource에는 자신의 버킷 ARN을 넣어주면 된다.

bash

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

 

 

권한 설정 후 배포 링크를 새로고침해보면 접근 가능한 것을 확인할 수 있다.

 

 

---

🏝 AWS CLI을 활용해서 배포하기

 

AWS CLI 를 이용하면 매 번 빌드 파일을 버킷에 업로드하지 않고도 명령어로 간단하게 배포가 가능하다.

 

AWS CLI 설치

아래 명령어로 AWS CLI를 설치한다.

 

Window

bash

msiexec.exe /i https://awscli.amazonaws.com/AWSCLIV2.msi
aws --version

 

Mac

bash

$ brew install awscli
$ aws --version

 

 

프로필 인증 설정

설치 후 인증 설정이 필요하다.

Access Key 발급을 위해 AWS 우측 상단의 계정을 클릭해서 보안 자격 증명으로 이동한다.

 

 

액세스 키 만들기를 통해 키를 생성한다.

키 정보는 생성된 시점에 딱 한 번만 확인할 수 있으므로 미리 기록해 두거나 키 파일 다운로드 버튼을 눌러 로컬에 받아 둔다.

 

 

아래 명령어로 프로필 인증을 진행한다. (default 프로필)

bash

aws configure

 

 

아래 명령어로 제대로 인증되었는지 확인이 가능하다.

javascript

aws s3 ls s3://<bucket-name> --profile default

 

 

명령어로 배포

아래 명령어로 배포한다.

javascript

npm run build
aws s3 sync build/ s3://<bucket-name> --delete

 

 

이제 package.json에 scripts로 추가하여 간편하게 사용이 가능하다.

javascript

// package.json
"scripts": {
    ...
    "deploy": "npm run build && aws s3 sync build/ s3://<bucket-name> --delete"
},