S3, cludeFront CI/CD 정리 & 웹 배포
1, aws 세팅
https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2
1, s3. 버킷생성
- 버킷만들기
- 버킷이름, 리전 지정
- 버킷의 퍼블릭 엑세스 차단 설정 해지 외 다른 수정없이 버킷 생성을 진행한다.
{
"Version": "2012-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "Stmt1652175066409",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:*",
"Resource": [
"arn:aws:s3:::{{버킷이름}}/*",
"arn:aws:s3:::{{버킷이름}}"
]
}
]
}- 버킷 권한 설정 수정
2, cloudfront 생성
https://us-east-1.console.aws.amazon.com/cloudfront/v3/home?region=ap-northeast-2#/distributions
- 배포 생성 선택
- 원본 도메인 선택 → 생성한 버킷 등록
- Legacy access identities 선택
새 OAI 생성선택
새 OAI 생성→ 새로 생성한버킷 이름선택 →생성- 버킷정책 :
아니요선택
- Origin Shield 활성화 :
예선택 - 리전 :
서울선택
- 뷰어 프로토콜 정책 :
Redirect HTTP to HTTPS
- WAF :
보안보호비활성화 - 기본값 루트 :
index.html - 배포 생성 클릭
3, ACM, Route53
https://ap-northeast-2.console.aws.amazon.com/acm/home?region=ap-northeast-2#/welcome
AWS Certificate Manager, 인증서등록
ACM 관리형 인증서
- 리전 :
버지니아 북부로 선택 - 인증서 요청 선택
퍼블릭 인증서 요청선택
- 사용할 도메인 이름 입력 후 생성
인증서 ID선택
Route53에서 래코드 생성선택
- 레코드 생성 선택
- 기다리면 상태가
검증대기중→발급됨으로 변경
4, cloudFront 에 도메인 연결
- cludeFront → ID 선택
- 일반 → 설정 → 편집
- 대체도메인 이름 입력
- SSL 인증서 선택
- 변경사항 저장
5, Route 53에서 CloudFront 연결
https://us-east-1.console.aws.amazon.com/route53/v2/hostedzones#ListRecordSets/Z0067878JQYEY0KCKNZ
- 레코드 생성
- 레코드 이름 : 설정할 도메인으로 입력
- 별칭 : 예
- 트래픽 라우팅 대상 :
cloudFront 배포에 대한 별칭
6, 에러 발생 시
Access Denied : SPA를 통해 S3-floudFront배포를 진행하면 Redirect 문제가 발생한다.
- url을 지정하여 접속하면 Access Denied 문제 발생 → cloudFont에서 리다이렉트를 403으로 막음
- 오류처리
- 사용자 정의 오류 응답 생성
- 404, 403 오류 응답 생성
2, git CI/CD 설정
해당 이벤트 발생 시 yml 파일 실행된다. 현재는 develop브런치 push로 설정되어 있다.
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
name: stage deploy
on:
push:
branches:
- stage
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source code
uses: actions/checkout@master
- name: Cache node modules # node modules 캐싱
uses: actions/cache@v1
with:
path: node_modules
key: ${{ runner.OS }}-master-build-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.OS }}-build-
${{ runner.OS }}-
- name: Install Dependencies
run: npm ci
- name: Build
run: CI=false npm run build
- name: Deploy
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_STAGE }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_STAGE }}
run: aws s3 cp --recursive --region ap-northeast-2 build //{{버킷 명 : s3://cokadminfront-bucket}}
.github/workflows폴더 내 작성- 혹은 github 레파지토리 > Actions > New workflows 을 추가하여 작성한다.
- screts.AWS_ACCESS_KEY_ID 등은 깃허브-설정에서 발급된 키를 넣어 작성한다.
웹 배포
배포 방법
push 진행
// 관리자페이지를 기준으로 작성
cokAdminFront git:(newBranch) git push --set-upstream origin newBranch
// new branch add, commit, push 진행
cokAdminFront git:(newBranch) git checkout develop
cokAdminFront git:(develop) git merge newBranch
cokAdminFront git:(develop) git push
// 개발 단계 배포 완료
cokAdminFront git:(develop) git checkout stage
cokAdminFront git:(stage) git merge develop
cokAdminFront git:(stage) git push
// 테스트 단계 배포 완료
cokAdminFront git:(stage) git checkout release
cokAdminFront git:(release) git merge stage
cokAdminFront git:(release) git push
// 실제 서버 배포 완료Actions 확인
- 깃 레파지토리의 Actions에서 해당 작업 (git push)이 제대로 되었는지를 확인한다.
- 초록색 표시가 됐으면 오류 없이 제대로 됐다는 표시
AWS 무효화 작업
https://us-east-1.console.aws.amazon.com/cloudfront/v4/home?region=us-east-1#/distributions
- IAM으로 로그인한다.
- AWS 계정 확인 (링크 이동 →)
- cludeFront 설정창으로 이동
- 대체 도메인 이름을 확인한 후 ID를 클릭한다.
- 무효화 클릭
- 신규로 복사 클릭
- /* (모든 파일)
- 무효화 생성 클릭
- 변경사항이 잘 적용됐는지를 확인한다.
'개발환경 구축' 카테고리의 다른 글
| mysql & prisma 개발환경 구축 (0) | 2024.01.29 |
|---|---|
| react - kakao map API 설정하기 (0) | 2022.08.10 |
| Docker 설치 및 세팅 (for mac) (0) | 2022.08.09 |
| react error - 배포할 때 발생하는 흰 화면 Uncaught SyntaxError: Unexpected token '<' 오류 (0) | 2022.08.08 |
| readme.md 작성 요령 (0) | 2022.07.25 |