Github action 실습

Github Action 이란?

Github Action 이란 Github가 공식적으로 제공하는 빌드, 테스트, 및 배포 파이프라인을 자동화할 수있는 CI/CD 플랫폼입니다.

레포지토리에서 Pull Request나 push 같은 이벤트를 트리거로 깃헙 작업 워크플로우(Work Flow)를 구성할 수있습니다
워크플로우는 .yml 또는 .yaml 파일에 의해 구성되며, 테스트,배포 등 기능에 따라 여러개의 워크 플로우로도 만들 수 있습니다
생성된 워크 플로우는 .github/workflows 디렉토리 이하에 위치합니다

YAML 이란?

Yet Another Markup Language의 약자로, 사람이 읽을 수 있는 데이터 직렬화 언어를 의미합니다. 여기서 YAML을 YAML ain’t markup language(재귀 약어)로 생각하는 사람도 있습니다. 후자는 YAML이 문서가 아닌 데이터용임을 강조하는 말이라고 생각하시면 됩니다. 파일로 작성 시 확장자는 .yaml 혹은 .yml 확장자를 가집니다.

YAML 은 사람이 읽을 수 있고 이해하기 쉬운 프로그래밍 언어입니다. 그래서 YAML 은 그 유연성과 접근성으로 자동화 프로세스를 형성하는데도 기여합니다

name: Bare Minimum Requirements
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Bare Minimum Requirements
        uses: actions/setup-node@v1
        with:
          node-version: '16'
      - run: npm install
      - run: npm test

YAML 파일은 JSON 파일과 비교했을때, ""(큰따옴표)없이 문자열 작성이 가능해, 한눈에 데이터가 들어옵니다.

그리고 일일이 JSON 파일처럼 {}로 감싸줄 필요가 없기 때문에 스코프 압박에서 벗어날 수 있습니다""

게다가 YAML 파일은 JSON 파일과 다르게 주석을 작성할 수 있다는 점도 굉장한 이점으로 작용합니다. JSON 파일은 주석을 작성할 수 없기 때문에 해당 파일 하나만 두고 커뮤니케이션하기가 까다롭지만, YAML 파일은 애초에 파일 내에 주석을 작성할 수 있기 때문에 커뮤니케이션하기가 훨씬 수월합니다.

기본 표현

key: value이며, : 다음에는 무조건 공백 문자가 와야 합니다.

1
key: value

---

 

Github Actions를 통한 배포 Flow (클라이언트)

• 이번 클라이언트 배포는 간단하게 3가지로 나뉩니다.
  
  
• Source: Github reference 브랜치에 코드가 커밋되면
• Build: .github/workflows/client.yml 경로의 YAML 파일에 적힌 명령어를 토대로 WebPack 을 이용해 빌드를 하고
• Deploy: AML 파일에 적힌 명령어를 토대로 , aws 콘솔 홈페이지에 들어가 c3에서 빌드결과를 업로드 합니다
  
  
  

아래의 코드 중 -<?> 부분을 채워야 하고, 레퍼런스인 깃헙 액션 시크릿 정하기를 참고하여 깃헙 액션에서 aws 시크릿을 넣어야 한다

이게 무슨말이냐면 아래 코드 중 엑세스 키 아이디와 비밀 엑세스 키를 그대로 넣을 수 없으니 
깃헙 액션에서 시크릿하게 만들어서 넣어야 한다는 소리이다

env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true

요런 부분이 있는데, 바로 AWS에 접근할 수 있는, 비밀 키들인 셈이다

Encrypted secrets - GitHub Docs

# .github/workflows/client.yml
name: client
on:
  push:
    branches:
      - <?>
jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2
      - name: Install dependencies
        run: <?>
        working-directory: ./my-agora-states-client
      - name: Build
        run: <?>
        working-directory: ./my-agora-states-client
      - name: SHOW AWS CLI VERSION
        run: |
          <?>
      - name: Sync Bucket
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 <?> \
            --region ap-northeast-2 \
            build s3://<?> \
            --delete
        working-directory: <?>

위의 코드를 수정해서 빈 명령어와 값들을 채워주었다..

# .github/workflows/client.yml
name: client
on:
  push:
    branches:
      reference
jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
        working-directory: ./my-agora-states-client-react
      - name: Build
        run: npm run build
        working-directory: ./my-agora-states-client-react
      - name: SHOW AWS CLI VERSION
        run: |
          aws --version
      - name: Sync Bucket
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 sync \
            --region ap-northeast-2 \
            build s3://{aws콘솔버킷이름} \
            --delete
        working-directory: ./my-agora-states-client-react

깃헙 액션에 들어가서 build가 잘 되었는지 확인해보았습니다. (여러차례 오류를 수정한 끝에 되었군요..!)

그리고 https://aws.amazon.com/ko/console/ 이 페이지에 들어가서 c3에 빌드한 결과를 업로드했습니다
이때, build 폴더 그 자체를 업로드 하는 게 아니라 build 폴더의 하위파일을 업로드 하고, 배포 링크를 확인하시면 됩니다~!


나의 로컬 레포지토리 => 깃허브 액션 => aws console 순으로 이동하면서 깃헙 액션을 활용한 배포 실습을 진행해봤습니다~!