목차
- S3(Simple Storage Service) 버킷 생성 하기
- 버킷 생성
- 객체 액세스 퍼블릭 권한 설정
- build파일 업로드
- 정적 웹 사이트 호스팅 활성화
- IAM 생성하기
- Github Actions 연동하기
- 'The bucket does not allow ACLS' 오류
1. S3(Simple Storage Service) 버킷 생성하기
1) 버킷 생성
Amazon S3에 데이터를 업로드하려면 우선 S3 버킷을 생성해야 한다.
버킷은 Amazon S3에 저장된 객체에 대한 컨테이너이다.
Amazon S3에 올리는 데이터를 객체라고 보고, 객체를 모아 둔 것이 디렉토리,
디렉토리를 모은 것이 버킷이라고 생각하면 된다.
이런 식으로 버킷 이름을 원하는 대로 생성하고
*이미지는 testbucket이라고 나와 있지만 이미 있는 이름이라 t-est-bucket으로 설정하였다.
우리는 정적 웹 사이트 호스팅을 할 것이기 때문에 퍼블릭 액세스 차단 설정을 풀어놓는다.
나머지 설정은 기본 설정을 따라갔다. (이것때문에 뒤에 에러가 터진다..ㅎ)
버킷이 생성되었다!
2) 객체 액세스 퍼블릭 권한 설정
여기서 추가로 생성된 버킷에 객체를 퍼블릭으로 설정해야한다.
이를 위해서 버킷 > 권한 > 버킷 정책에 들어간다.
편집 버튼을 누르고 들어가서 버킷 ARN을 복사해둔다.
오른쪽에 정책 생성기를 누른다.
정책 생성기에서
Select Type of Policy는 'S3 Bucket Policy'로 설정.
Principal은 *
Actions는 GetObject로 설정.
ARN은 방금 복사해 둔 내용을 붙여넣기하고 맨 뒤에 /*를 추가한다.
그리고 Add Statement를 누르고 Generate Policy를 누르면
정책이 JSON형식으로 생성된다.
해당 내용을 그대로 복사해와서 정책에 넣고 변경사항을 저장한다.
그러면 이제 객체를 퍼블릭으로 액세스할 수 있는 권한이 설정되었다.
3) Build 파일 업로드
배포할 리액트 프로젝트에서 npm run build를 하면 public 폴더가 생성된다.
public 폴더에 있는 모든 파일을 버킷에 업로드한다.
4) 정적 웹사이트 호스팅 활성화
속성 > 정적 웹 사이트 호스팅 > 편집 > 활성화 를 하고
아래 사진과 같이 설정을 한다.
변경사항 저장을 누르면 주소가 생성된다.
해당 주소로 들어가보면 내가 만든 웹사이트가 뜬다.
잘 배포되었다😊
2. IAM 생성하기
이제 해당 프로젝트를 새로 업데이트하여 깃허브에 푸시할 때마다 자동으로
IAM은 Identity and Access Management의 약자로
AWS 리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스이다.
해당 프로젝트를 업데이트하면 자동으로 S3에 올라가있는 리소스도 업데이트 후 배포하도록 만들기 위해서
이 다음 단계에서 github actions를 통해 CI/CD를 구축할 것이다.
그 전에 우리가 S3에 올려놓은 버킷에 대한 권한이 필요하고, 해당 권한을 가진 사용자를 생성해야 한다.
AWS에서 IAM > 사용자 로 들어가서 오른쪽위에 사용자 생성 버튼을 누른다.
사용자 이름을 입력하고 다음을 누른다.
권한 설정에서 직접 정책 연결을 선택하고 아래 2가지를 선택한다.
- AmazonS3FullAccess
- CloudFrontFullAccess
위와 같이 생성하면 된다.
이제 사용자 탭에 들어가보면 방금 생성한 사용자를 볼 수 있다.
test-user를 클릭해서 들어간 뒤에,
액세스 키 만들기를 한다.
CLI로 선택 > 다음 > 액세스 키 만들기
생성하면 액세스 키, 비밀 액세스 키 이렇게 2개의 키가 생성되는데
나중에 필요하므로 csv 파일을 다운받아둔다.
3. Github Actions 연동하기
이제 github에서 github actions를 이용하여 CI/CD를 구축한다.
작업할 프로젝트 레포에 들어가서
Settings > Secrets and variables > Actions에 들어간다.
여기서 New repository secret을 누르고
위에 있는 사항들을 저장하면 된다.
- AWS_S3_ACCESS_KEY_ID : IAM 생성할 때 받은 액세스 키 값
- AWS_S3_BUCKET_NAME : 버킷 이름(t-est-bucket)을 적는다.
- AWS_S3_BUCKET_REGION : 지역 값(아시아 태평양(서울) ap-northeast-2)
- AWS_S3_SECRET_ACCESS_KEY_ID : IAM 생성할 때 받은 비밀 액세스 키 값
그리고 프로젝트 폴더로 가서
.github > workflows > main.yaml 파일을 생성한다.
main.yaml 파일 안에 아래 코드를 작성하고 저장한다.
name: (MAIN)Auto Deploy to S3 Bucket
on:
push:
branches:
- main
jobs:
deploy:
name: (MAIN)Auto Deploy to S3 Bucket
runs-on: ubuntu-latest
steps:
- name: Checkout codes
uses: actions/checkout@v4
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
- name: NPM install
run: npm install
- name: NPM Build
run: npm run build
- name: Transfer to S3 for serving static
uses: jakejarvis/s3-sync-action@master
with:
args: --acl public-read --follow-symlinks --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET_NAME}}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_S3_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }}
AWS_REGION: ${{ secrets.AWS_S3_BUCKET_REGION }}
SOURCE_DIR: 'build'
이제 푸시를 하면 프로젝트에 actions 탭이 활성화되면서
자동 배포를 할 것이다.
4. The bucket does not allow ACLs 오류
나는 여기까지 작업하고 오류를 만났다.
" The bucket does not allow ACLs "
ACL은 '객체 액세스 제어 목록'으로 각 객체에 대한 액세스 제어 목록을 관리할 수 있다.
객체의 ACL에서는 이 객체에 대한 액세스 권한이 부여되는 aws 계정 또는 그룹의 유형을 정의하여 액세스를 관리한다.
맨 처음에 버킷을 생성할 때 ACL활성화를 안 한 것이 문제였던 것 같아서
버킷에서 > 권한 > 객체 소유권 > 편집 으로 들어가서
ACL을 활성화하고 다시 re-run을 해 보았다.
배포 테스트를 잘 통과하였다.😄
https://whyeskang.com/411
https://velog.io/@krkorklo58/AWS-S3%EB%A1%9C-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#3-s3%EC%97%90-%EC%BD%94%EB%93%9C-%EC%97%85%EB%A1%9C%EB%93%9C
https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/Welcome.html