9분 59초 만에 Github Action + AWS Elastic Beanstalk로 TS 프로젝트 CI/CD 파이프라인 구축하기

서론

AWS는 가끔 버전에 따른 이슈가 발생하기 때문에 참고만 해주세요!

 

필자는 대부분의 프로젝트에서 Github Action을 CI/CD 툴로 이용하고 있다.

그 이유는 "매우 간편"하게 사용할 수 있기 때문이다.

물론 다른 서비스(Travis CI 등등)도 사용할 수 있겠지만,

해당 파이프라인이 실패할 경우 바로 GIthub에서 확인할 수 있다는 점이 상당히 간편하다고 생각했다.

(물론 메일도 온다)

 

또한 배포 후 관리를 위한 툴로는 AWS Elastic Beanstalk를 적극 활용하고 있다.

AWS Elastic Beanstalk의 장점은 다음과 같다.

• 완전 관리형이기 때문에 초반 세팅만 잘 해준다면 어지간해서 손을 댈 부분이 없다.
• 진짜 자동으로 뚝딱 환경을 만들어준다. 그렇기 때문에 사람이 직접 알아야 하는 프로세스가 적다.
• Load Balancer, Auto Scaling, Health Checker 등 배포 이후에 운영을 하면서 필요한 것들을 쉽게 수정 및 조작할 수 있다.
• 생각보다 다양한 배포 방식을 제공한다. (Rolling, Canary, Immutable, Blue-green 등등)
• 필요하다면 Customizing 할 수 있고 생각보다 그렇게 어렵지 않다.
• 버전 관리가 자동으로 잘 되고 있으며, 따라서 이전 버전을 재배포하기도 매우 쉽다.

단점은... 솔직히 아직 못 찾았다.

듣기로는 규모가 있는 스타트업에서도 AWS Elastic Beanstalk를 사용해서 작업하고 있다고 하기 때문에

확실히 괜찮은 서비스인거 같다.

 

아무튼 Github Action + AWS Elastic Beanstalk는 내가 상당히 애용하는 조합이기 때문에

TypeScript를 사용하는 프로젝트에서 위의 조합으로 배포를 해보는 글을 써 보고자 했다.

(생각보다 TS를 이용한 프로젝트를 배포하는 글들이 없어서..)
(참고해야 할 점 : TS로 빌드하는 커맨드는 npm run build를 이용하였다. 아래의 CD에서 사용하니 확인하자)

 

본론

시작은 AWS Elastic Beanstalk부터

Github Action을 설정해주기 전에, AWS Elastic Beanstalk에 환경 설정을 해줘야 한다.

왼쪽의 환경 탭을 클릭하고 나서 "새 환경 생성" 버튼을 눌러주자.

 

AWS EB 들어갔을 때 화면

 

필자가 만든 것은 Web Application이기 때문에 웹 서버 환경을 선택했다.

이외에도 작업자 환경이라는 것을 제공한다.

 

작업자 환경 : 배치 및 스케줄 프로그램을 위한 환경으로 SQS라는 Queue를 통해 메시지를 받아서 실행하는 애플리케이션에 사용하는 환경이다.

 

환경 선택 화면

 

애플리케이션 이름과 환경 이름이 매우 중요하다. 잘 설정하고 까먹지 않도록 하자.

아래의 Github Action 설정에서 사용하니 꼭 기억하도록 하자.

 

환경 이름 설정 화면

 

플랫폼은 정말 다양한 플랫폼이 있지만,

다음과 같이 Node 12버전을 쓰는 환경을 구축해서 사용해보도록 하자.

(Node 12 버전을 쓰는 이유는, 최신 버전은 생각보다 AWS에 약간씩 미흡하게 지원하는 경우가 종종 있기 때문이다.)

플랫폼 설정

 

맨 마지막에 추가 옵션 구성이라고 흰색 버튼이 있다.

나중에 옵션을 설정할 수 있지만 귀찮으니깐 지금 해버리자!!

 

추가 옵션 구성 버튼은 오른쪽 하단에 있다.

 

사전 설정에서 고가용성(High Availability)를 선택해줘야 로드밸런서를 자동으로 만들어준다.

꼭! 고가용성을 선택해주자.

 

사전 설정에서 꼭 고가용성을 택해주자!

사실 배포 방식은 본인의 마음대로이지만,

필자는 개발 환경에서는 한 번에 모두 방식을 통해서 빨리 배포하고 확인하는 방법을 더 선호하고

배포 환경에서는 변경 불가능 방식을 통해 시간이 오래 걸리지만 안전하게 배포하는 방법을 더 선호한다.

더 알고 싶다면 아래의 글을 읽어보자

www.slideshare.net/awskorea/aws-elastic-beanstalk-aws-aws-devday2018

AWS Elastic Beanstalk 활용하여 수 분만에 코드 배포하기 (최원근, AWS 솔루션즈 아키텍트) :: AWS …

배포 방식 설정

 

여기서 편집을 누르면 인스턴스의 보안그룹을 설정할 수 있다.

인스턴스에서 필요한 보안그룹을 만들고 온 다음, 추가해주도록 하자.

(보안 그룹은 AWS EC2 Instance에서 열어야 하는 인, 아웃 바운드 포트에 관한 정보이다.

해당 정보를 설정하지 않으면 DB 연결이나 이런 부분이 미흡할 수 있으니 꼭 설정하도록 하자)

 

여기서 편집 버튼을 눌러 보안그룹을 설정해주자

 

기본적으로 Elastic Beanstalk는 로그를 확인할 수 있는 기능을 제공한다.

그렇지만 인스턴스에 직접 접근해야 할 일이 분명 생길 수 있다.

그 때를 위해 보안 탭에 들어가서 EC2 키 페어를 설정해주도록 하자.

(참고 : EC2 키 페어는 AWS EC2에서 유저를 생성하고 받을 수 있다.
만약 본인이 IAM에 대해서 잘 모른다면, 본 글 하단부의 EC2 Keypair 만들기 를 먼저 하고 다시 여기로 돌아오자.)

 

보안 -> 편집을 누르면 나타나는 화면

 

좋다. 이 외에도 다양한 기능을 지원하지만, 이 정도의 환경설정이면 사용하기 불편하지는 않을 것이다.

이제 환경 생성 버튼을 눌러 생성을 하도록 하자.

참고로, 환경 생성에는 꽤 시간이 걸린다.

 

우리는 그 사이에 Github Action을 설정해볼 것이다.

 

짬을 내서 Github Action을 설정하자.

잠깐! AWS IAM 계정 부터!!!

하지만 그 전에, Github Action에서 ElasticBeanstalk에 접근할 수 있는 권한을 가진 유저가 필요하다.

따라서 우리는 AWS IAM에 먼저 들어간다.

왼쪽 사이드 바에서 사용자를 누르고, 상단에 있는 파란색의 사용자 추가 버튼을 눌러주면 아래와 같은 화면이 나온다.

원하는 사용자 이름을 적어주고, 프로그래밍 방식 액세스를 선택해주자.

 

사용자 추가 첫 화면

 

기존 정책 직접 연결을 누르고, elasticbeanstalk를 검색해서 Admin 권한을 주자.

(주의 : 원래 IAM 권한 설정은 필요한 부분만 세밀하게 해야 한다. 하지만 독자의 편의상 간단하게 할 수 있는 방법으로 진행한다.)

 

Admin Access 권한을 준다.

 

쭉쭉 넘어가서 사용자 만들기를 눌러준다.

 

사용자 만들기를 누르자!

 

사용자를 성공적으로 만들었다면, 액세스 키 ID와 비밀 액세스 키도 생성되었을 것이다.

비밀 액세스 키의 경우 잃어버리면 매우 곤란한 상황이 생기기 때문에 잘 저장해두도록 하자!!

아, 참고로 해당 키 두 개는 아래의 Github Action을 세팅할 때 필요하다.

 

 

 

먼저 프로젝트의 Github Repository에 .github/workflows라는 폴더를 만든다.

 

대략적으로 이런 경로가 될 것이다.

 

아래에 deploy.yaml 파일을 만들자.

아래의 주석을 잘 살펴보며 본인의 입맛대로 수정하도록 하자.

참고로 웹 서비스이며 Amazon Linux AMI 플랫폼 버전을 사용하고 있다면, 기본 포트를 8081로 설정해줘야 한다.

참고한 링크는 다음과 같다.
https://docs.aws.amazon.com/ko_kr/elasticbeanstalk/latest/dg/nodejs-platform-proxy.html

프록시 서버 구성 - AWS Elastic Beanstalk

name: Deploy to EB

# main branch에 push 되면 실행
on:
  push:
    branches:
      - main

jobs:
  buildAndTest:
    name: CI Pipeline
    runs-on: ubuntu-18.04
    strategy:
    # Node version은 12 버전을 이용한다.
      matrix:
        node-version: ['12.x']
	
    steps:
      - uses: actions/checkout@v2
	
      # Initialize Node.js
      - name: Install Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      # Install project dependencies, test and build
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build

  deploy:
    name: CD Pipeline
    runs-on: ubuntu-18.04

    strategy:
      matrix:
        node-version: ['12.x']
	# 위의 buildAndTest가 실행되고 진행된다.
    needs: buildAndTest
    steps:
      - uses: actions/checkout@v2
	  # env 파일을 이용할 일이 보통 많은데,
      # Github Secrets를 이용하여 env 파일을 만들고 추가한다.
      # 참고로 ElasticBeanstalk에 Node 관련을 배포할 때는,
      # 8081 포트를 열어줘야 한다!!
      - name: Create env file
        run: |
          touch .env
          echo PORT=8081 >> .env
          echo NODE_ENV=${{ secrets.NODE_ENV }} >> .env
          cat .env
      # Initialize Node.js
      - name: Install Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      # Install project dependencies and build
      - name: Install dependencies
        run: npm install
      # 필자는 TS 파일들을 빌드해서 dist 폴더에 js 파일들을 만들기 때문에
      # 아래에서 zip 파일 구성 시 src 폴더를 제외한 것을 확인할 수 있다.
      - name: Run build
        run: npm run build

      # Install AWS CLI 2
      - name: Install AWS CLI 2
        run: |
          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
          unzip awscliv2.zip
          which aws
          sudo ./aws/install --bin-dir /usr/local/bin --install-dir /usr/local/aws-cli --update
      # Configure AWS credentials
      - 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 }}

      # Make ZIP file with source code
      # -x는 zip파일 생성 시에 해당 부분들을 제외한다.
      - name: Generate deployment package
        run: zip -r deploy.zip . -x '*.git*' './src/*' './aws/*' awscliv2.zip

      # Deploy to Elastic Beanstalk
      # application_name과 environment_name을 꼭 확인하자!
      # 해당 부분은 꼭 같아야 한다!!
      - name: Deploy to EB
        uses: einaregilsson/beanstalk-deploy@v14
        with:
          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          application_name: test-server
          environment_name: Testserver-env
          region: ${{ secrets.AWS_REGION }}
          version_label: ${{github.SHA}}
          deployment_package: deploy.zip

 

자 여기까지 작성하고 해당 코드를 main branch에 푸쉬하기 전에, 한 가지 설정을 해야 한다.

바로 위의 yaml에서 보이는 secrets.xxxx와 같은 값들을 설정해줘야 한다.

Github Repo에서는 secrets를 이용하여 Github Action의 환경 값을 세팅한 후 사용할 수 있다.

 

깃헙 레포에서 Settings를 클릭한 후, 좌측에 있는 사이드 바에서 Secrets를 눌러주자.

Github Action에서 사용할 수 있는 Secret 값들

 

 

오른쪽 상단에 있는 New Repository Secret을 눌러주도록 하자.

좋아 거의 다 왔다! 빨리 설정해보자!!

아래의 값들을 한 개씩 만들어준다.(위의 화면에서 Name과 Value를 한 개씩 각각 추가해주면 된다.)

그러니깐 New Repository Secret을 4번 눌러서 생성해야 한다는 것!

- Name : AWS_ACCESS_KEY_ID            value : 아까 만든 액세스 키 

- Name : AWS_SECRET_ACCESS_KEY  value : 아까 만든 시크릿 키

- Name : AWS_REGION                            value : Elastic Beanstalk가 있는 리전

- NODE_ENV(이건 환경변수 예시를 위해 넣어두었다! 환경변수를 사용할 때 위의 yaml과 함께 참고하자.)

 

좋다. 이제 모든 준비가 끝났다.

환경이 잘 만들어졌는지 AWS console에서 한 번 확인해 본 후,

main branch에 만든 yaml이 담긴 .github/workflows 폴더를 push하면 배포가 시작된다!

참고로 Actions 탭에 들어가면 이렇게 진행 상황과 로그를 확인할 수 있다.

 

성공!

 

자 이제 배포가 자동화되었으니 마음 편하게 개발해보자!!

 

혹시 pm2를 사용하고 있다면,

scripts 부분에 start와 poststart를 꼭 써줘야 한다!

"start": "node ./node_modules/pm2/bin/pm2 start ./dist/app.js --name server",
"poststart": "node ./node_modules/pm2/bin/pm2 logs",

 

참고 : EC2 Key pair 만들기

AWS EC2에 접속한 후 사이드 바의 키 페어를 누르자.

그러고 나서 우측 상단의 키 페어 생성을 누르자.

 

하단의 키페어 클릭

키 페어 이름을 적어주고 생성하면 끝!

pem키가 자동으로 받아졌을텐데 잘 관리하도록 하자!

 

P.S. 본 글은 필자의 게으름으로 세상에 나오지 못할 뻔 했으나, 귀염뽀짝한 Y.K.Y님과의 대화 후 빛✨을 보게 되었습니다.