S3 + Github action - CI/CD리액트 기초/배포하기-S32022. 6. 11. 20:16
Table of Contents
S3 버킷 설정하기
- 우선 가비아에서 도메인을 하나 구입하자.
- AWS에 로그인해서 S3 탭으로 이동한 후 버킷 만들기를 클릭하자.
- 배포할 사이트 도메인 이름과 버킷 이름을 꼭 같게 만든다
- 모든 퍼블릭 액세스 차단을 해제하고 현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다. 선택
- 아래로 내려서 버킷 만들기 클릭
- 버킷 이름 선택
- 권한 탭에 잇는 버킷 정책에서 편집 클릭
- 버킷 ARN 복사 후 정책 생성기 클릭
- Select Type of Policy: S3 Bucket Policy 선택
- Principal: * 입력
- Actions: GetObject 선택
- ARN: 위에서 복사한 ARN 붙여넣기
- Add Statement 클릭 후 Generate Policy 선택
- ARN 뒤에 /* 붙이고 복사하기
- 버킷 정책 편집으로 돌아와서 정책에 붙여넣은 후 변경 사항 저장
정적 웹사이트 호스팅 설정
- 관리 탭 선택
- 아래로 쭉 내려서 정적 웹 사이트 호스팅 편집 클릭
- 정적 웹 호스팅: 활성화
- 호스팅 유형: 정적 웹 사이트 호스팅
- 인덱스 문서: index.html
- 오류 문서: index.html
- 위와 같이 설정 후 변경사항 저장
GitHub Action 설정하기
AWS IAM 설정하기
- S3 버킷을 설정한 AWS 계정에 접속한 후 IAM에 들어가서 사용자를 추가해야된다
- IAM에서 사용자 탭 클릭
- 사용자 추가 클릭
- 사용자 이름을 원하는 이름으로 지정하고 AWS 자격 증명 유형 선택은 액세스 키- 프로그래밍 방식 엑세스 선택!
- 기존 정책 직접 연결 선택
- AmazonS3FullAccess 선택
- 태그 추가는 선택사항이므로 안해도 됨!
- 사용자 만들기 선택
- csv 파일 다운로드하기. 만약 이 파일을 잃어버리면 다시 다운받을 수 없으므로 꼭 잘 보관하자!
Gihub Action 설정하기
- 우선 자신의 프로젝트를 github에 하나 올리자!
- 프로젝트에 들어가서 Settings 탭 선택
- 왼쪽 아래 Secrets → Actions 클릭
- New repository secret 클릭해서 AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY를 추가하자
- Name을 AWS_ACCESS_KEY_ID로 하고 위에서 받은 csv 파일의 Access key ID에 해당하는 값을 입력
- 마찬가지로 Name을 AWS_SECRET_ACCESS_KEY로 한 후 csv 파일의 Secret access key에 해당하는 값 입력
- csv 파일은 아래처럼 생겼다
- action에 사용할 ID와 KEY를 설정했으므로 이제 action을 설정하자!
- github 프로젝트에서 Actions 탭 클릭
- set up a workflow yourself 클릭!
- yml 파일에 아래 내용 복사 붙여넣기하기
name: Deploy to Production
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- name: Checkout source code
uses: actions/checkout@master
- name: Cache node modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.OS }}-build-
${{ runner.OS }}-
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
env:
CI: ''
- name: Deploy
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
aws s3 cp \
--recursive \
--region ap-northeast-2 \
build s3://[버킷 이름]
- 이제 push 한 프로젝트에서 git bash를 열고 pull을 한 후에 프로젝트를 업데이트할 때마다 바로 s3 버킷에 반영된다!
- 일일이 s3 버킷에 빌드 파일을 올리지 않아도됨!!
도메인 연결하기
- AWS에서 Route 53 선택 후 호스팅 영역 생성
- 도메인 이름에 도메인 입력 후 호스팅 영역 생성하기
- 아래 네임서버 영역(NS)의 값/트래픽 라우팅 대상 4개 복사하기
- 가비아에 접속해서 구입한 도메인에서 네임서버 설정 클릭
- 1차, 2차, 3차, 4차에 위에서 복사한 Route 53 네임 서버 4개 1, 2, 3, 4차에 .빼고 각각 붙여넣기
- 다시 AWS 53으로 돌아와서 레코드 생성 클릭
- 레코드 유형 A 선택 후 별칭 탭 선택
- 엔드포인트 선택: S3 웹 사이트 엔드포인트에 대한 별칭
- 리전 선택: 서울 선택
- S3 엔드포인트 선택: 웹 프로젝트를 배포한 S3 버킷 선택
- 이후 등록한 도메인으로 접속을 하면 잘 된다!
'리액트 기초 > 배포하기-S3' 카테고리의 다른 글
S3 설정 및 배포 (0) | 2022.06.03 |
---|
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!