AWS / CI/CD

CI/CD

Continuous Integration, Continuous Development

테스트, 통합, 배포의 과정을 자동화하는 것을 의미

 

코드를 업데이트 / 추가 작성 후 커밋, 브랜치에 Merge, 배포, s3 코드 변경, 무효화 등...의 번거로운 과정을 자동화시킨다. => 코드에만 집중할 수 있음! 

 

CI/CD의 과정

 

 

CI/CD 구축 툴 종류

• Github Actions
• Jenkins
• Circle CI
• Travis CI

 

Jenkins 자체는 많이 쓰이지만, 별도 서버에 구축을 해야한다는 단점이 있다.

반면 Github Actions는 별도의 서버 구축 없이 기능을 사용할 수 있어서 비용적인 측면으로나 서버 셋팅이 필요없다

 

 

Github Actions

깃허브에서 공식적으로 제공하는 CI/CD 툴로, 빌드-테스트-배포 로직을 실행시키는 역할

 

1. 코드 작성 후 Commit
2. Github에 Push
3. Push를 감지해서 Github Actions에 작성한 로직이 실행
   1. 빌드(Build)
   2. 테스트(Test)
   3. 서버로 배포(Deploy)
4. 서버에서 배포된 최신 코드로 서버를 재실행

 

 

 

---

 

 

 

실습

일단 실습용으로 새 레포지토리를 하나 생성했다.

 

github actions 실습용이므로 프로젝트를 따로 굳이 만들 필요는 없어서

어제 실습용으로 생성했던 vite 프로젝트를 들고와서 push했다.

 

git init # 깃 초기화
git add . # 파일 추가
git commit -m "first commit" # 커밋
git branch -M main # main 브랜치로
git remote add origin 레포지토리 링크 # 레포지토리와 연결하기
git push -u origin main # push하기

 

 

그리고 프로젝트 폴더 내 최상단에 다음과 같이 폴더 및 파일을 생성한다. Github Actions를 실행시키기 위해서는 반드시 만들어줘야된다..

프로젝트 폴더
ᄂ.github
    ᄂworkflows
        ᄂdeploy.yml

 

deploy.yml

# Workflow : 하나의 yml 파일을 하나의 Workflow라고 부름
name: Github Actions 실행시키기

# Event : 실행되는 시점을 설정
# main이라는 브랜치에 push 될 때 아래 Workflow를 실행
on:
  push:
    branches:
      # - 브랜치명 << 이런식으로 띄어쓰기 꼭 할것..
      - main

# Workflow는 여러 개의 Job으로 이루어질 수 있고 병렬적으로 수행됨
jobs:
  # Job을 식별하는 id
  My-Develop-Job:
    runs-on: ubuntu-latest
    # 하나의 Job은 여러 개의 step으로 이루어져 있음
    steps:
      - name: Hello World 출력하기 # Step의 이름
        run: echo "Hello World" # 실행시킬 명령어

      - name: 여러 명령어 문장 작성하기
        # 여러 명령어 작성할 때는 | 사용하기
        run: |
          echo "Good"
          echo "Morning"
          pwd

      # 참고: https://docs.github.com/en/actions/learn-github-actions/variables
      - name: Github Actions 자체에 저장된 변수 사용
        run: |
          echo $GITHUB_REPOSITORY
          echo $GITHUB_SHA

      - name: Github Actions Secret 변수 사용
        run: |
          echo ${{ secrets.MY_NAME }}
          echo ${{ secrets.MY_HOBBY }}

 

이제 add commit push를 해보면

 

 

이 때 마지막 Github Action Secret 변수들은 출력되지 않고 있는데,

변수를 지정해주지 않았기 때문에 당연하다.

변수를 지정해주려면 레포지토리의 Settings 탭에 들어가 Secrets and variables - Actions으로 들어간다.

 

그리고 New repository secret을 생성한다

 

 

이제 action을 재실행해야하므로 deploy.yml에서 step 이름을 조금 수정하던가 주석을 추가해서 변경사항을 만들어내 add commit push를 한 후 다시 action을 실행해보면

 

 

뭔가 출력은 되는데 ***로 암호화돼서 보여지고있다 

보통 이런 secret 변수는 민감한 값(비밀번호 등)을 저장할 때 생성하기 때문에 보여주지 않고 있다.

 

 

 

---

 

 

 

React 프로젝트에 CI/CD 적용

전체적인 흐름

 

 

일단 github actions 자체는 aws의 외부 서비스이기 때문에 따로 액세스키를 발급받아야 한다.

 

IAM

 

유명한 노래가 생각나지만 그건 아니고

Identity and Access Management의 약자로 AWS 리소스에 대한 액세스 관리를 하는 서비스다.

https://us-east-1.console.aws.amazon.com/iam/home?region=ap-northeast-2#/home 

 

 

1. 사용자 생성

 

아무튼 IAM에 들어가서 액세스 관리 - 사용자 - 사용자 생성 클릭

이름은 임의로 아무거나 주고 다음으로 넘어간다

 

 

이제 권한 정책을 연결한다. 직접 정책 연결을 클릭 후

1. Amazons3fullAccess

2. CloudFrontFullAccess

를 체크 후 다음 클릭 -> 사용자 생성 클릭

 

 

사용자 생성을 완료한것이다..

 

 

2. 액세스 키 발급

이제 생성된 사용자 클릭 후 보안 자격증명 탭 - 액세스 키 항목 - 액세스 키 만들기를 클릭한다.

 

그다음 AWS 외부에서 실행되는 애플리케이션 클릭 - 설명 태그는 굳이 안쓰고 생략하고 넘어감 - 액세스키 만들기!

 

 

이제 액세스가 만들어졌는데 이제 여기서 창을 나가면 안된다... 나가면안되고

액세스 키랑 비밀 액세스키를 어디다 미리미리 복붙해둬야한다

 

 

 

이제 다시 내 깃허브 레포지토리로 이동

Settings - Secrets and variables - Actions 이동해서 new repository secret 두개 추가

1) AWS_ACCESS_KEY_ID : 액세스 키

2) AWS_SECRET_ACCESS_KEY : 비밀 액세스 키

 

 

이제 비밀 키도 만들고 이를 사용해서 deploy.yml에서 자동화하는 코드를 작성해줘야 한다.

 

 

3. deploy.yml 작성

일단 여기서 커밋 후 Push한 파일들을 불러와야 하는데, 이를 어떻게하냐면

github marketplace 에 가서 checkout 라이브러리를 사용해야한다.

 

1) checkout v4 사용

 

기본 사용방법은 step에 -uses: action/checkout@v4 를 추가하기.

그 외 기타 설정은 해당 라이브러리 참고

 

이 외에도 aws와의 연결 라이브러리들을 사용하는데 그건 아래 deploy.yml에 적어뒀다

name: Deploy To S3 and Invalidate CloudFront

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Github Repository 파일 불러오기
        # github 라이브러리 checkout 사용
        uses: actions/checkout@v4

      - name: 의존성 설치
        run: npm i

      - name: 빌드하기
        run: npm run build

      - name: AWS Resource에 접근할 수 있게 AWS 인증 설정
        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 기존 파일들 전체 삭제
        # 250528-facebook-web : S3에서의 배포명
        run: aws s3 rm --recursive s3://250528-facebook-web

      - name: S3에 빌드된 파일 업로드하기
        run: aws s3 cp ./dist s3://250528-facebook-web/ --recursive

      - name: CloudFront 캐시 무효화
        # --distribution-id 배포ID
        run: aws cloudfront create-invalidation --distribution-id E233UE5GOZVBDT --paths "/*"

 

 

이제 똑같이 add commit push를 하면 자동화가 잘 될 것이다! 

 

 

 

 

 

 

이미지 출처
CI/CD 과정 : https://www.performetriks.com/post/load-test-in-a-cicd-environment