배포 자동화 프로젝트(4) - AWS 배포 및 Github Actions 실습

신혜린·2024년 6월 9일

CI/CD TIL 배포자동화

배포 자동화 프로젝트

목록 보기

4/5

1️⃣ 🪣 S3 버킷 생성

버킷 생성 > 버킷 이름 > 퍼블릭 액세스 차단 설정

💡 누구든지 접근 가능하도록 해야 하기 때문에 ‘퍼블릭 액세스 차단’을 해제한다.

🪣 1-1. 버킷 정책 설정

생성된 버킷의 모습

💡 버킷 > 권한 탭 > 버킷 정책 작성 필요

S3 - GetObject 추가 : 버킷 안에 있는 파일들 조회, 다운로드 할 수 있게 하는 권한

리소스 유형 - object 설정
{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Principal": "*",
			"Effect": "Allow",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::practice-web-page/*"
			]
		}
	]
}

🪣 1-2. 소스 업로드

💡 업로드 버튼 > 소스파일(폴더) 추가

🪣 1-3. 정적 웹 사이트 호스팅 기능

💡 속성 > 정적 웹 사이트 호스팅

'활성화’ 체크

‘인덱스 문서’ : index.html

2️⃣ ☁️ CloudFront 생성

S3 뿐만 아니라 별도로 CloudFront 가 필요한 이유?
1. 성능 개선
2. https 적용을 위함

CloudFront 배포 생성 > 도메인 선택 > 기본 캐시 동작 설정

💡 Redirect HTTP to HTTPS

HTTP 로 접근하는 것들은 강제로 HTTPS 로 변환시켜서 보완성이 낮은 HTTP 로 통신하는 것을 방지하는 역할

사용하고자 하는 지역에 따라 가격 정책이 달라지므로 참고

-> 보통 한국에서만 사용하는 웹 사이트의 경우 '아시아' 포함 옵션 선택

기본값 루트 객체 - ìndex.html

이후 배포 생성 을 클릭하면 다음과 같이 생성된 CloudFront를 확인할 수 있다.

3️⃣ 🎬 Github Actions

Github Repository 내 Github Actions와 S3, CloudFront 간 CI/CD 연결 작업을 위한 세팅 작업

aws IAM 사용자 권한 발급

IAM > 사용자 > 사용자 생성

🎬 3-1. 권한 설정 > 직접 정책 연결 > 권한 정책

💡 S3 와 CloudFront 에 대한 전체 접근 권한 허용 후 생성

AmazonS3FullAccess 추가

CloudFrontFullAccess 추가

🎬 3-2. 액세스 키 발급

생성한 사용자 권한 > 보안 자격 증명

액세스 키 만들기 > AWS 외부에서 실행되는 애플리케이션 선택

⭐️ 액세스 키 및 비밀 액세스 키는 페이지에서 벗어나면 다시 확인하는 게 불가하므로 잘 저장해두기 !
⭐️ 만일 저장을 하지 못한 채로 페이지를 벗어났다면, 새로 액세스 키를 생성해서 다시 저장하면 된다.

🎬 3-3. 발급받은 키 Github Secrets로 등록

Github Repository > Settings

🎬 3-4. yml 파일 추가

루트 위치에 .github / workflows / deploy.yml 파일 생성

yml 문법을 참고하여 생성하고자 하는 CI/CD 명령어를 작성해준다.

다음은
1. 코드에 변화가 감지된 경우 (git push),
2. s3에 업로드 되어 있는 기존 코드를 삭제하고 (aws s3 rm s3://practice-web-page --recursive)
3. 새로운 코드를 s3에 재업로드하는 (aws s3 cp ./ s3://practice-web-page/ --recursive)
배포 실행 명령어이다.

name: Deploy To S3

on:
  push:
    branches:
      - main

jobs:
  Deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Github Repository 파일 불러오기
        uses: actions/checkout@v4

      - name: AWS Resource에 접근할 수 있게 AWS credentials 설정
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ap-northeast-2
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

      - name: S3 기존 파일들 전체 삭제 후 새로 업로드
        run: |
          aws s3 rm s3://practice-web-page --recursive
          aws s3 cp ./ s3://practice-web-page/ --recursive

      - name: CloudFront 캐시 무효화
        run: aws cloudfront create-invalidation --distribution-id E16XJNCF4BWCRJ --paths "/*"

💡 CloudFront 캐시 무효화 시 distribution-id 값으로는 CloudFront 에 배포된 ID 값(E16XJNCF4BWCRJ)을 붙여 넣어주면 된다
- name: CloudFront 캐시 무효화
        run: aws cloudfront create-invalidation --distribution-id E16XJNCF4BWCRJ --paths "/*"