AWS 로그인 !!
계정 없으면 회원가입 ⬇️
https://signin.aws.amazon.com/signup?request_type=register
📎 IAM
✔️ IAM 계정 생성 + 권한 설정
IAM → 액세스 관리 → 사용자 → 사용자 생성
이렇게 사용자 세부 정보를 설정해주고,
다음 누르면 권한 설정이 나오는데 직접 정책 연결 → AmazonS3FullAccess, CloudFrontFullAccess를 검색하여 추가!
다음 누르면 이렇게 나오고 사용자 생성 버튼을 눌러 .csv 파일 다운로드 해준다.
근데..! IAM 사용자를 쓰는 이유는 여러 명이 하나의 계정을 공유할 때 발생하는 보안 문제 때문인데 난 혼자 쓰니까 IAM 사용자 지우고 root로 사용하는 게 맞는건가? 라고 생각할 수 있다. but, 혼자 사용하더라도 보안 상 IAM 사용자를 쓰는 게 좋으므로 사용하자 !!!!!
✔️ Access Key & Secret Key 생성
IAM > 사용자 > 만들었던 사용자 이름 > 보안 자격 증명
중간 즈음으로 스크롤하면 액세스 키 만들기가 보인다. 클릭!
CLI 클릭 & 확인 체크
액세스 키 만들기 클릭
액세스 키 생성 완료! 액세스 키와 비밀 액세스 키는 github actions CI/CD 에 필요하므로 .csv 파일을 안전한 곳에 다운로드 해두자!
📎 S3 버킷 설정
✔️ S3 버킷 만들기
S3
지역 : 서울로 설정하자 !
버킷 만들기 클릭
버킷 이름에 짓고 싶은 이름을 넣어주면 된다
ACL 활성화됨 클릭
모든 퍼블릭 액세스 차단 체크 해제 & 현재 설정으로 ~ 체크
-> 버킷 만들기 클릭
✔️ 정적 웹 사이트 호스팅 설정
만들어진 버킷 클릭 > 속성
가장 하단에 정적 웹 사이트 호스팅 > 편집
비활성화를 활성화로 변경 & 인덱스 문서와 오류문서에 index.html 입력 > 변경 사항 저장
✔️ 버킷 정책 설정 & CORS 설정
권한
조금 내려서 버킷 정책 > 편집
아래 코드 붙여넣어 주기 (단, Resource 부분에서 BUCKET_NAME에는 본인의 버킷 이름이 들어가야 함. 즉, 버킷 ARN에 ::: 우측 부분을 붙여넣기 하면 됨. 붙여넣다 뒤에 /* 빼먹지 말자!)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::BUCKET_NAME/*"
}
]
}변경 사항 저장!
권한 탭에서 가장 아래에 CORS 편집
아래 코드 복붙 > 변경 사항 저장
[
{
"AllowedOrigins": [ "*" ],
"AllowedMethods": [ "GET", "PUT", "POST", "HEAD" ],
"AllowedHeaders": [ "*" ],
"ExposeHeaders": [ "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2" ],
"MaxAgeSeconds": 3000
}
]✔️ 빌드 파일 업로드
올리고 싶은 프로젝트에서 터미널에 yarn build 를 실행하여 vite 로 진행한 나는 dist 폴더가 만들어진다.
dist 폴더 바로 아래에 있는 파일이나 폴더들을 하나하나 객체 탭에 업로드 해주자
업로드를 완료하였다면 속성 > 정적 웹 사이트 호스팅 > 버킷 웹 사이트 엔드포인트에 나온 주소에 접속하면 배포된 것을 볼 수 있다.
📎 Route 53
도메인을 가비아 등에서 구매를 하자 ! 우리팀은 이미 도메인을 구매해놓아서 바로 진행해보겠다.
Route 53
시작하기
호스팅 영역 생성 > 시작하기
여기에 구매한 도메인 이름 넣어주기! http 이런 거 안 붙여도 된다
다른 거 건드릴 필요 없이 호스팅 영역 생성 클릭하면 레코드에 NS와 SOA로 두 개가 뜰텐데
NS유형에 있는 값/트래픽 라우팅 대상 4개를 가비아에서
가비아 > My가비아 > 도메인 > 매핑할도메인의 관리버튼 > 네임서버 설정 버튼 클릭 후 4개를 순서대로 채워넣어주면 된다.
근데 ..! 나의 경우 백엔드 친구랑 같이 하는데, 이미 백엔드 친구가 도메인을 사용하여 배포가 되어있는 상태였다. 같은 도메인을 사용하기 위해 백엔드 친구 AWS 계정의 IAM 사용자에 나를 추가해 같은 계정으로 사용하기로 했다.
나와 비슷한 상황이라면 백엔드 친구에게 내 IAM 사용자 권한에 AmazonRoute53FullAccess랑 AWSCertificateManagerFullAccess도 더 추가해달라 하자.
즉, 제일 처음 IAM 사용자 계정 생성 및 권한 설정 과정은 생략 가능하고, 모든 과정을 IAM 사용자 계정에서 하면 된다.
✔️ SSL 인증서 발급 + CNAME 레코드 생성
Certificate Manager
인증서 요청 (반드시 위치를 버지니아 북부로 하자!)
완전히 정규화된 도메인 이름에 구입했던 도메인 그대로 넣어주고 요청 클릭
인증서의 도메인에 Route 53에서 레코드 생성 > 생성 클릭
다시 Route 53으로 돌아와서 호스팅 영역 > 레코드를 확인해보면 CNAME 유형으로 하나 생겼을 것이다.
인증서 발급됨을 확인하고 다음으로 넘어가자
📎 CloudFront 배포
CloudFront
✔️ CloudFront 배포 생성
원본 도메인에 S3 버킷의 엔드포인트 주소를 선택해준다.
뷰어 프로토콜 정책 Redirect HTTP to HTTPS 선택
방화벽 보안 보호 비활성화 클릭
대체 도메인 이름(CNAME)에는 구입했던 도메인을 입력해주고, Custom SSL certificate 에 앞에서 만들었던 인증서를 클릭해준다. 여기서 인증서는 반드시 미국 동부(버지니아 북부) 리전(us-east-1)에 있어야 한다고 하므로 앞에서 인증서 만들 때 버지니아 북부로 선택해주었던 것이다.
기본값 루트 객체는 index.html로 입력해주자
✔️ 오류 페이지 설정
오류 페이지 탭
사용자 정의 오류 응답 생성 클릭
사용자 정의 오류 응답 생성 클릭하여 다음과 같이 뜨게 하자
✔️ 캐시 무효화 설정
무효화 탭 > 무효화 생성
이렇게 /* 추가해주고 무효화 생성 클릭
✔️ Route 53 A 레코드 추가
Route 53 > 호스팅 영역 > 레코드 생성
- 레코드 유형: A
- 별칭: 켜기
- 트래픽 라우팅 대상: CloudFront 배포에 대한 별칭 선택
- 배포 선택: 아까 만든 CloudFront 배포 주소(cloudfront.net으로 끝남) 선택 (나의 경우 배포 선택 부분에 아무것도 안 떴었는데 cloudfront 배포 생성했던 거 지우고 다시 만드니까 떴다 ㅠ.ㅠ)
레코드 생성 버튼을 눌러주고 구입했던 도메인을 주소창에 입력하면 배포된 내 프로젝트를 확인할 수 있다!! 😍😍😍😍😍
📎 Github Actions로 CI/CD 구축
✔️ Github-Secrets 설정
깃허브 레포지토리 > Settings > Secrets and variables > Actions에서 초록 버튼 New repository secret을 클릭해준다
Name에는 변수명을, Secret에는 값을 입력하고 Add secret을 눌러 하나씩 추가해준다.
AWS_ACCESS_KEY_ID : IAM 액세스 키값
AWS_CLOUDFRONT_ID : CloudFront의 ID값
AWS_REGION : 배포할 S3 버킷의 지역을 의미. (위의 과정대로 진행하였다면, "ap-northeast-2"가 될것이다.)
AWS_S3_BUCKET: S3 버킷 이름
SOURCE_DIR : 배포할 빌드 파일이 위치한 디렉토리 (VITE라면 "dist", cra라면 "build")
AWS_SECRET_ACCESS_KEY : IAM 의 비밀 액세스 키값
✔️ yaml 파일 작성
내 프로젝트 루트에 .github/workflows/develop.yml 파일을 만들어주고 다음과 같이 작성해주었다.
나의 경우 develop 브랜치에 push, PR 올릴 때마다 github actions가 진행되어 개발 중 자동 배포가 가능하게 하였다.
또한 프로젝트 하면서 .env파일에 환경변수가 추가된다면, run 밑에 echo VITE_TEST_DATA ~ 부분처럼 yaml 파일에 추가해주면 된다.
ex) 환경변수의 이름이 KAKAO_REST_API라면
echo "VITE_KAKAO_REST_API=${{ secrets.VITE_KAKAO_REST_API}}" >> $GITHUB_ENV
라고 적어주면 된다. 그리고 해당 값을 Github-Secrets에 위와 같이 추가해주면 된다.
name: CI/CD
on:
push:
branches:
- develop
pull_request:
branches:
- develop
jobs:
cicd:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 20.10.0
cache: yarn
- run: yarn install
- name: Create .env file
run: |
echo "VITE_TEST_DATA=${{ secrets.VITE_TEST_DATA }}" >> $GITHUB_ENV
- run: yarn build
- name: deploy to s3
uses: jakejarvis/s3-sync-action@master
with:
args: --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: ${{ secrets.AWS_REGION }}
SOURCE_DIR: ${{ secrets.SOURCE_DIR }}😇 레퍼런스
외쳐 갓태윤. 코테이토에서 만난 프짱 스승님이시다. 코테이토 프론트엔드 네트워킹 시간에 프론트엔드 파트장이었던 분,, 내가 CI/CD 배포 궁금하다고 물어봤었는데 본인이 직접 작성한 이 링크를 공유해주셨다-! 덕분에 AWS로 프론트 배포를 어떻게 하는 지 처음부터 끝까지 모든 과정을 상세하게 알 수 있었다. 고마워유 😊
AWS S3 + Cloudfront + Route53로 React (Vite) App 배포하기 및 Github Actions를 통한 CI/CD
