비전공자도 이해할 수 있는 CI/CD 입문/실전(2)

3. Docker + 백엔드(Spring Boot) 프로젝트에 CI/CD 적용하기

 

• 2가지 방법 존재
  • Docker: 컨테이너 기반 프로젝트
  • Docker, CodeDeploy: 컨테이너 + 확장성 고려한 프로젝트

 

1. Docker: 컨테이너 기반 프로젝트

• 전체 흐름

• 장점
  • Docker 기반 서비스 운영 시, 간단하게 구성 가능한 인프라 구조
• 단점
  • 무중단 배포 구현 or 여러 EC2에 배포해야 한다면, 직접 Github Actions에 스크립트 작성, 구현 필요 -> 복잡
• 사용
  • 컨테이너 기반 인프라 구성 시
  • 소규 모프로젝트

실습 1

• EC2에 Docker 설치, ECR 세팅
•  Ubuntu에서 Docker, Docker Compose 설치

$ sudo apt-get update && \
	sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common && \
	curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - && \
	sudo apt-key fingerprint 0EBFCD88 && \
	sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" && \
	sudo apt-get update && \
	sudo apt-get install -y docker-ce && \
	sudo usermod -aG docker ubuntu && \
	sudo curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && \
	sudo chmod +x /usr/local/bin/docker-compose && \
	sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
	
# 잘 설치됐는 지 확인
$ docker -v # Docker 버전 확인
$ docker compose version # Docker Compose 버전 확인

• Github Actions의 IAM에 권한 추가
  • AmazonEC2ContainerRegistryFullAccess 권한 추가
• ECR 생성

 

실습 2

• Docker 기반으로 프로젝트 수정
  • Dockerfile 작성
  • .dockerignore 파일 생성

#Dockerfile
FROM node:alpine

WORKDIR /usr/src/app

COPY . .

RUN npm install

RUN npm run build

EXPOSE 3000

CMD [ "node", "dist/main.js" ]

#.dockerignore 파일
node_modules

•  EC2가 private ECR에 접근하도록 셋팅
  • ECR Docker Credential Helper 설치 
  • Configuration 설정
  • IAM Role 활용하여 EC2의 ECR 접근 권한 부여
    • EC2에 연결된 IAM Role에AmazonEC2ContainerRegistryFullAccess 정책 추가

# ECR Docker Credential Helper 설치 
# Ubuntu일 경우
$ sudo apt update
$ sudo apt install amazon-ecr-credential-helper

# Configuration 설정
# ~ 경로에서 .dockerf 폴더 만들고, config.json 파일 생성
# ~/.docker/config.json
{
	"credsStore": "ecr-login"
}

• Docker 기반으로 CI/CD 구축
  • Github Actions 파일 작성

# .github/workflows/deploy.yml
name: Deploy To EC2

on:
  push:
    branches:
      - main

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

      - name: Node 설치
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: 의존성(라이브러리) 설치
        run: npm ci

      - name: .env 파일 만들기
        run: |
          touch .env
          echo '${{ secrets.ENV }}' >> .env

      - name: 테스트 코드 실행
        run: npm run test

      - 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: ECR에 로그인하기
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v2

      - name: Docker 이미지 생성
        run: docker build -t instagram-server .

      - name: Docker 이미지에 Tag 붙이기
        run: docker tag instagram-server ${{ steps.login-ecr.outputs.registry }}/instagram-server:latest

      - name: ECR에 Docker 이미지 Push하기
        run: docker push ${{ steps.login-ecr.outputs.registry }}/instagram-server:latest

      - name: SSH로 EC2에 접속하기
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USERNAME }}
          key: ${{ secrets.EC2_PRIVATE_KEY }}
          script_stop: true
          script: |
            docker stop instagram-server || true
            docker rm instagram-server || true
            docker pull ${{ steps.login-ecr.outputs.registry }}/instagram-server:latest
            docker run -d --name instagram-server -p 3000:3000 ${{ steps.login-ecr.outputs.registry }}/instagram-server:latest

 

2. Docker, CodeDeploy: 컨테이너 + 확장성 고려한 프로젝트

• 전체 흐름

• 장점
  • 컨테이너 기반 서버가 여러 대이더라도 자동 배포 용이
  • 무중단 배포 적용 용이
• 단점
  • CodeDeploy 사용 -> 인프라 구조 복잡
• 사용
  • 컨테이너 기반 인프라 구성 + 여러 대 + 무중단 배포

실습 

• Github Actions 코드 수정하기

# .github/workflows/deploy.yml
name: Deploy To EC2

on:
  push:
    branches:
      - main

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

      - name: JDK 17버전 설치
        uses: actions/setup-java@v4
        with:
          distribution: temurin
          java-version: 17

      - name: application.yml 파일 만들기
        run: echo "${{ secrets.APPLICATION_PROPERTIES }}" > ./src/main/resources/application.yml

      - name: 테스트 및 빌드하기
        run: ./gradlew clean build

      - 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: ECR에 로그인하기
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v2
      - name: Docker 이미지 생성
        run: docker build -t instagram-server .

      - name: Docker 이미지에 Tag 붙이기
        run: docker tag instagram-server ${{ steps.login-ecr.outputs.registry }}/instagram-server:latest

      - name: ECR에 Docker 이미지 Push하기
        run: docker push ${{ steps.login-ecr.outputs.registry }}/instagram-server:latest

      - name: 압축하기
        run: tar -czvf $GITHUB_SHA.tar.gz appspec.yml scripts

      - name: S3에 프로젝트 폴더 업로드하기
        run: aws s3 cp --region ap-northeast-2 ./$GITHUB_SHA.tar.gz s3://instagram-server/$GITHUB_SHA.tar.gz

      - name: Code Deploy를 활용해 EC2에 프로젝트 코드 배포
        run: aws deploy create-deployment
          --application-name instagram-server
          --deployment-config-name CodeDeployDefault.AllAtOnce
          --deployment-group-name Production
          --s3-location bucket=instagram-server,bundleType=tgz,key=$GITHUB_SHA.tar.gz

• appspec.yml, 스크립트 파일 수정
  • appspec.yml -> 코드 유지
  • scripts/start-server.sh

# appspec.yml -> 코드 유지
version: 0.0
os: linux

files:
  # CodeDeploy가 S3로부터 가져온 파일 중 destination으로 이동시킬 대상을 지정한다.
  # / 이라고 지정하면 S3로부터 가져온 전체 파일을 뜻한다.
  - source: /
    # CodeDeploy가 S3로부터 가져온 파일을 EC2의 어떤 경로에 저장할 지 지정한다.
    destination: /home/ubuntu/instagram-server

permissions:
  - object: /
    owner: ubuntu
    group: ubuntu

hooks:
  ApplicationStart:
    - location: scripts/start-server.sh
      timeout: 60
      runas: ubuntu

# scripts/start-server.sh
#!/bin/bash

echo "--------------- 서버 배포 시작 -----------------"
docker stop instagram-server || true
docker rm instagram-server || true
docker pull {ECR Repository 주소}/instagram-server:latest
docker run -d --name instagram-server -p 8080:8080 {ECR Repository 주소}/instagram-server:latest
echo "--------------- 서버 배포 끝 -----------------"

 

4. 백엔드(Nest.js) 프로젝트에 CI/CD 적용하기

 

5. Docker + 백엔드(Nest.js) 프로젝트에 CI/CD 적용하기

 

6. 프론트엔드 CI/CD 구성을 위해 필요한 기본 AWS 지식 (보충 강의)

 

7.웹 프론트엔드 프로젝트에 CI/CD 적용하기

 

S3

• 기능
  • 파일 저장
  • 정적 웹 사이트 호스팅 = 웹 서비스를 인터넷에 배포
  • 버킷: 깃허브의 Repository처럼 S3의 저장소
    • 정책: 권한 정의 JSON 문서
    • ex) 버킷에서 이미지 파일을 조회할 수 있는 정책을 추가한다.
  • 객체: S3에 업로드한 파일

CloudFront

• CDN(Content Delivery Network)
• 기능: 파일, 동영상 등의 컨텐츠를 빠르게 전송 해주는 서비스
• 가까운 위치에 컨텐츠의 복사본을 저장하여 임시 저장소로 사용
• 무엇보다 HTTPS를 적용하기 위해서는 CloudFront를 사용해야 한다.

 

S3 버킷 세팅

S3 버킷 생성

• S3 -> 버킷 만들기 -> 버킷 이름 지정하고 -> 이 버킷의 퍼블릭 액세스 차단을 모두 비활성화해야한다(이 페이지 접속해서 다운받는 모든 사용자가 다운받을 수 있어야 하기 때문에) -> 버킷 만들기

버킷에 정책 추가하기

• 권한 -> 버킷 정책 -> 편집 -> 새 문 추가 -> S3검색 -> GetObject -> 리소스 추가(서비스:S3, 리소스 유형:object, 리소스 ARN:arn:aws:s3:::{내가 만든 버킷명}/*) -> 정책에서 Principal을 "*"로 변경 -> 저장

 

S3에 업로드

S3에 업로드

• 테스트 위한 간단한 파일을 만든다.
• index.html

<h1>Title</h1>

• Amazone S3 -> 버킷 -> 버킷이름 -> 파일 드래그해서 업로드
• 버킷 들어가서 업로드 누르면 올라간것 확인 가능

S3에 정적 웹 호스팅 설정

• 버킷 -> 속성 -> 밑에 정적 웹 사이트 호스팅 -> 편집 -> 활성화, 정적 웹 사이트 호스팅 선택 -> 인덱스 문서: index.html -> 저장
• 맨 밑에 새로운 링크가 생긴것 확인 가능

이제 성능 문제와, https 적용을 위해서 CloudFront를 적용해보자

 

CloudFront 생성

• CloudFront -> 배포생성 -> 원본 도메인 입력 -> 이때 S3 버킷 엔드포인트말고 S3 정적 호스팅 웹 사이트 엔드포인트 선택-> HTTP,HTTPS에 대한 정책 선택: Redirect HTTP to HTTPS -> WAF 설정: 보안 보호 비활성화 -> 설정 -> 가격분류 설정: 북미, 유럽, 아시아, 중동 및 아프리카에서 사용 -> 기본값 루트 객체: index.html -> CloudFront 배포 생성 -> 확인
• 우리는 S3의 주소가 아니라 CloudFront의 주소를 알아야 한다. 이때,  배포 도메인 이름이 CloudFront의 주소

이제 CloudFront에 도메인을 연결하고, HTTPS를 적용하면 된다.

 

 

출처

https://www.inflearn.com/course/%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-ci-cd-%EC%9E%85%EB%AC%B8-%EC%8B%A4%EC%A0%84

비전공자도 이해할 수 있는 CI/CD 입문·실전 강의 | JSCODE 박재성 - 인프런