용어

CI (Continuous Integration)

지속적인 통합
- branch에 여러명이 merge → Conflict 또는 build test 등을 자동화

CD (Continuous Deployment)

지속적인 배포
- 변경된 코드 내역을 고객들이 사용가능한 프로덕션 환경으로 배포

Github Actions

Github 에서 제공하는 CI/CD 툴

Workflow

자동화된 프로세스가 정의되어있는 파일로, .github/workflow 에 저장되어있음

YAML 로 작성된 스크립트
레포지토리 內에서의 이벤트(push, PR…), 특정 주기, 또는 수동으로 트리거됨

Runner

Workflow가 실행되는 인스턴스 - 사실상 우리가 작성한 스크립트들이 돌아가는 서버
실제 동작은 Microsoft Azure의 cloud
Github에서 제공하는 인스턴스 이외에도 자신의 서버를 사용할수도 있음 (self-hosted runner)

Jobs

Workflow 파일에서 지정
Runner 위에서 수행되는 명령들
별도의 지정이 없다면 병렬로 작동
- 주의해야 할 점은 서로 다른 인스턴스에서 작동!

Learning by Doing

CI와 CD 한번씩 실습해보면서 정리해보자
https://github.com/catensia/ci-cd-practice ←github 링크

CI - 목표

└── project/
    ├── client/
    │   └── src
    └── server

위 폴더 구조에서 Develop branch에 Pull Request를 날리면 아래 작업들을 자동으로 해주는 workflow를 작성해보자
1. client/src 와 server 내부의 .js 및 .jsx 파일들에 대해서 eslint를 체크
2. client 에서 build가 성공적으로 수행되는지 확인하기

준비물

ESLint가 적용된 프로젝트

상황

현재 ESLint에 의해서 빨간줄로 에러가 표시되고 있는데, 이 에러들을 해소하지 않으면 Pull request의 merge가 진행되지 않도록 구성해보자.

Untitled

Workflow 작성

Untitled

Update : 기본 브랜치를 branch 설정에 들어가서 develop으로 설정해야 한다

Untitled

Workflow 작성 코드

name : build + eslint

# 이벤트를 발생시킬 트리거
on:
	pull_request: # pull request, push 등등 가능
			branches: # branches로 지정할 수 있음
				- develop 
jobs: # 실행할 작업들! 병렬적으로 실행된다는걸 의식하자
	check:
		name: check #이름을 적어줘야 branch protection 설정에서 찾아줄 수 있다 
		runs-on: ubuntu-latest
		steps:
      - uses: actions/checkout@v3 
      - name: Install client dependencies # client 폴더에서 npm 설치
        run : |
            cd client
            npm install 
      - name: Install server dependencies # server 폴더에서 npm 설치
        run : |
            cd server
            npm install
            
      - name: Check eslint # eslint 돌리기
        run : |
            ./client/node_modules/.bin/eslint client/src --ext .js,.jsx
            ./server/node_modules/.bin/eslint server --ext .js,.jsx
            
      - name: Run build check # 빌드 돌리기
        run: |
            cd client
            npm run build

uses: actions/checkout@v3 ?

초기에 runner 인스턴스는 깨끗한 상태이다.
- 따라서 우리가 작성한 코드를 다운로드 해야 하는데, 이걸 모두 yml 코드로 작성하는건 번거롭다
- 따라서 github에서 제공하는, workflow를 묶어서 제공하는 기능이 있는데, 이게 actions고, checkout@v3으로 제공한다
  
  github actions - checkout 참고링크

주의점 ! Jobs는 병렬

만약 위 코드를 아래와 같이 작성한다면 ?

name : build + eslint

# 이벤트를 발생시킬 트리거
on:
	pull_request: # pull request, push 등등 가능
			branches: # branches로 지정할 수 있음
				- develop 
jobs: # 실행할 작업들! 병렬적으로 실행된다는걸 의식하자
	check1:
		runs-on: ubuntu-latest
		steps:
      - uses: actions/checkout@v3 
			- run: |
					cd client
					npm install 
	check2:
		runs-on: ubuntu-latest
		steps:
			- run: |
          cd server
          npm install
	check3:
		runs-on: ubuntu-latest
		steps:
			- run: |
          ./client/node_modules/.bin/eslint client/src --ext .js,.jsx
          ./client/node_modules/.bin/eslint server --ext .js,.jsx

	check4:
		runs-on: ubuntu-latest
		steps:
			- run: |
          cd client
          npm run build

<aside> 🚫 돌아가지 않는다.

정확히는 두번째 check2에서부터 오류가 나올 것인데

이유는 jobs는 서로 독립된 인스턴스에서 실행되기 때문이다

즉 check1에서 actions/checkout@v3를 통해서 코드를 내려받아도, check2에서는 깨끗한 인스턴스이기 때문에 server폴더같은건 없기 때문이다 https://www.daleseo.com/github-actions-jobs/

</aside>