프론트엔드 CI/CD AWS 배포하기2(Code Deploy, S3 코드 업로드)

Github actions과 aws CodeDeploy를 사용하여 코드에 수정사항들이 생기면 build를 다시 하고 자동으로 배포되는 작업을 손쉽게 할 수 있다.

 

권한 설정

이 것을 하기 위해 github actions와 CodeDeploy가 앞에서 만든 내 s3와 ec2에 접근해서 작업을 할 수 있는 권한을 설정해줘야 한다.
-> IAM 설정을 통해 권한 설정을 한다.

 

 

EC2 접속

 

전에 생성한 인스턴스에 들어와 SSH 클라이언트를 통해 EC2에 접속한다.

 

위 코드를 복사하여 터미널에 입력하면

이런 에러를 만나게 되는데

 

이 경고가 나오는 이유는 잘못된 permission으로 ssh 로그인을 접속하려고 했기 때문이다.

 

해결법

 

해결법은 간단한데 .pen 파일의 permission을 private key의 permission으로 변경해주기만 하면 된다.

chmod 명령어를 사용해 644로 되어있던 permission을 400으로 바꿔주자.

 

아래 코드를 복사해서 터미널에 입력한다.

chmod 400 your-key.pem

 

그 후 다시 접속을 해보면

 

성공적으로 접속이 되었다!

 

 

EC2에 CodeDeploy agent 설치

EC2에 CodeDeploy가 접근하여 파일을 업로드할 수 있도록 code deploy agent를 설치해야 한다.

 

1. CodeDeploy agent 설치

 

아래 명령어를 입력해서 설치해 보자

sudo apt-get update
sudo apt-get install ruby
sudo apt-get install wget
cd /home/ubuntu
wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto

 

2. 설치 완료 후 확인 해보기

sudo service codedeploy-agent status

성공적으로 실행 중!

 

 

EC2  IAM 설정

전에 만든 EC2가 S3와 CodeDeploy를 정상적으로 이용가능하게 하도록 권한을 설정해줘야 한다.

 

1. 역할 생성

역할 만들기를 클릭한다.

 

AWSCodeDeployFullAccess, AmazonS3 FullAccess 2개 체크하고

 

생성!

 

2. 생성된 IAM EC2에 연결

 

 

CodeDeploy 권한 설정

CodeDeploy가 S3에서 파일을 받아서 EC2에 오려야 하기 때문에 해당 작업을 위한 권한 설정이 필요하다.

AWS 서비스,  서비스: CodeDeploy를 선택하고 선택되어 있는 권한 그대로 두고 다음 버튼 클릭

 

역할 이름까지 설정하고 생성을 완료하면 된다.

 

 

이렇게 역할을 다 만들면 된다.

 

CodeDeploy 애플리케이션 생성,  배포 그룹 설정

권한 설정을 해줬으니 CodeDeploy 애플리케이션을 생성해줘야 한다.

• CodeDeploy -> 애플리케이션 -> 애플리케이션 생성

1. 어플리케이션 생성

 

2. 배포 그룹 생성

이름을 설정하고 서비스 역할은 클릭하면 생성했던 IAM이 뜬다.

 

 

3. 배포 유형, 환경 구성

• 배포 유형: 현재 위치
• 환경 구성: Amazon EC2 인스턴스
• 키: Name (반드시!!)
• 값-선택사항: 만들어 놓은 EC2 선택

3. 배포 설정, 로드 밸런스

그 아래 배포 설정, 로드 밸런서는 따로 건들지 않고 그대로 설정하였다.

 

 

AWS IAM 사용자 추가

 

기존 정책에 직접연결 AmazonS3FullAccess, CodeDeployFullAccess 정책을 선택 후 생성

그 후 액세스 키를 만들고 CSV 파일로 다운을 한다

CSV 다운 페이지를 나오게 되면 다시 다운을 못하니 나오지 말고 바로 잊지 말고 다운해서 꼭 가지고 있자!

 

 

Github key 등록

• 깃헙 레파지토리 -> settings -> Security -> Secrets and variables -> New repository secret

그 후 아까 다운한 내용들로 key를 추가한다.

 

• AWS_ACCESS_KEY_ID : access-key
• AWS_SECRET_ACCESS_KEY : secret-access-key
• AWS_REGION : ap-northeast-2

 

EC2에 등록

EC2에 awscli 설치 및 사용자 설정이 필요하다.

 

# 설치
$ sudo apt update
$ sudo apt install awscli
# 설치 확인
$ aws help
# 사용자 설정
$ aws configure
AWS Access Key ID [None]: 액세스 키를 입력
AWS Secret Access Key [None]: 시크릿 액세스 키를 입력
Default region name [None]: ap-northeast-2 # 혹시 리전이 다르면 해당 리전 기입
Default output format [None]: 그냥 Enter 입력

 

 

 

이제 작업을 위한 환경 세팅은 끝이 났다!!

 

이제 직접 명령어를 작성하여 어디 폴더에서 어디 경로에 파일을 업로드할 것인지 등을 지정할 차례이다.

2가지 단계가 필요하다.
1. 깃헙의 업데이트 내용을 s3로 올리는 명령어 작성 ( yml

파일 만들기)
2. s3에 올린 내용을 CodeDeploy를 통해 EC2로 업로드하는 명령어 작성 (appspec.yml 파일 만들기)

 

이제 프론트엔드 코드가 있는 곳으로 간다

yml 파일 만들기

deploy.yml 파일을 생성한다.

name: Deploy # Workflow 이름
on: # Event 감지
  push:
    branches:
      - develop # 해당 브랜치의 푸쉬가 일어날 때 CI/CD를 진행하겠다는 뜻
jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout source code. # Repo checkout
        uses: actions/checkout@v2

      - name: Check Node v # Node v 확인
        run: node -v

      - name: Create .env file
        run: |
          echo "VITE_GOOGLELOGIN_URL: ${{ secrets.VITE_GOOGLELOGIN_URL }}" >> .env
          echo "VITE_KAKAOLOGIN_URL: ${{ secrets.VITE_KAKAOLOGIN_URL }}" >> .env
          echo "VITE_BACKEND_URL: ${{ secrets.VITE_BACKEND_URL }}" >> .env
          cat .env

      - name: Install Dependencies # 의존 파일 설치
        run: yarn install

      - name: Build # React Build
        run: yarn build
        env:
          CI: ""

      - name: zip create
        # zip 파일을 만듭니다(파일명은 자유, 대신 아래 workflow에 적을 파일명과 동일하게 맞춰주세요).
        run: zip -qq -r ./build-fe.zip .
        shell: bash

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Upload to S3 # Upload build file to S3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
            aws s3 cp --region ap-northeast-2 ./build-fe.zip s3://{s3 이름!}/build-fe.zip

      - name: Deploy # Deploy to EC2
        run: aws deploy create-deployment
          --application-name {CodeDeploy 애플리케이션 이름!}
          --deployment-config-name CodeDeployDefault.AllAtOnce
          --deployment-group-name {CodeDeploy 애플리케이션 배포 그룹 이름!}
          --s3-location bucket={s3 이름!},key=build-fe.zip,bundleType=zip

 

위 코드의 내용은 코드를 build 하고 build-fe.zip으로 압축이 되어 S3에 올라가게 된다.

Create .env도 해줘야 .env 파일도 같이 압축된다. .env 내용을 채우기 위해서는 깃허브 키에 등록해야 한다.

그 후 S3이름과 CodeDeploy, 애플리케이션 배포 그룹들은 자신이 만든 이름으로 넣으면 된다.

 

여기까지가 S3에 코드를 올리는 작업이었다.

 

 

appspec.yml 파일 만들기

이제 s3에 빌드파일 zip을 ec2에 배포해야 한다.

리액트 최상단에 파일을 만든다.

 

 

version: 0.0
os: linux

files:
  - source: /
    destination: /home/ubuntu/deploy-fe
    overwrite: yes
permissions:
  - object: /home/ubuntu/deploy-fe
    owner: ubuntu
    group: ubuntu
    mode: 755
hooks:
  AfterInstall:
    - location: deploy.sh
      timeout: 60
      runas: root

내가 만든 ec2에 /home/ubuntu 경로에 deploy-fe라는 폴더를 만들었다.
이곳에서 build zip을 배포할 것이다.

 

deploy.sh 파일 만들기

프로젝트의 루트경로를 기준으로 파일을 올린 후 진행해야 하는 작업을 적은 deploy.sh 파일 경로를 적어준다.

#!/usr/bin/env bash
 echo "> FE 배포"

EC2에서 명령어를 실행할 수 있게 해주는 파일이다. 나는 아무 명령어도 적지 않았다.

 

 

여기까지 설정을 하였고 deploy.yml에서 설정한 브랜치에 푸시를 하면
CodeDeploy -> 배포에서 배포 성공여부를 확인할 수 있다.

 

나는 develop으로 설정을 하였으니 develop 브랜치에 푸시를 하고 확인을 각각 해보면

 

S3 업로드 성공

EC2에 코드 업로드 성공

 

 

발생 가능한 에러

 

develop 브랜치에 푸시를 해 배포가 되나 확인을 해보았는데

이렇게 계속 에러가 났었다.

 

에러 내용을 보기 위해

CodeDeploy Log: /var/log/aws/codedeploy-agent/codedeploy-agent.log

에 들어가 로그를 확인하고 나 같은 경우는

 

https://sundries-in-myidea.tistory.com/102

AWS EC2 프리티어에서 메모리 부족현상 해결방법

https://velog.io/@kmw10693/EC2-%ED%94%84%EB%A6%AC%ED%8B%B0%EC%96%B4-%EC%9A%A9%EB%9F%89-%EB%8A%98%EB%A6%AC%EA%B8%B0

EC2 프리티어 용량 늘리기

이 두 블로그를 보고 메모리와 프리티어 용량을 늘렸더니 해결이 되었다.