CICD 적용해보기

현재 프로젝트에는 리액트로 간단한 프론트까지 포함되어 있다.

+ CICD 파이프라인에 대해서 이해도가 완벽하지 않았어서 약 이틀동안 많은 시행착오를 거쳤다.

 

1. 특별한 조건을 주지 않는이상 예를들어 특정이벤트에만 작동하도록 한다거나 특정브랜치에서만 작동은 한다거나의 

    작업이 있지 않는이상은 크게 변화를 주지않은것 같아서 기본에만 충실하고자 기본 기능만 적용을 했었다.

    그 작업코드가

name: Illjaler Deployment
on:
  workflow_dispatch:
  push: # push이벤트가 발생하면서 브랜치가 main일 경우와,
    branches: [main]
  pull_request: # pull_request이벤트가 발생하면서 브랜치가 main | dev 인 경우에 workflow가 실행.
    branches:
      - main
      - dev
jobs:
  lint:
    runs-on: ubuntu-latest #우분투 환경에서 작업실행
    strategy:
      matrix:
        node-version: [16, 18, 20]
    steps:
      - name: Get Code
        uses: action/checkout@v3
      - name: Install NodeJs
        uses: action/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install dependencies
        run: npm ci
      - name: Install dependencies
        uses: npm ci
      - name: Lint Code
        uses: npm run lint
  test:
    needs: lint
    runs-on: ubuntu-latest #우분투 환경에서 작업실행
    strategy:
      matrix:
        node-version: [16, 18, 20]
    steps:
      - name: Get Code
        uses: action/checkout@v3
      - name: Install NodeJs
        uses: action/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install dependencies
        uses: npm ci
      - name: Test code
        run: npm run test
  build:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - name: Get code
        uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Build website
        id: build-website
        run: npm run build
  deploy:
    needs: build
      - name: Deploy
      	run: echo "Deploying..."

이거 였다.

당연히 기본에 맞춰서 했으니 바로 성공할줄 알았지만 실패 했으니 다시 코드를 봤다

뭐가 문젠지 전혀 모르겠어서 여기서 일단 시간을 많이 보냈다.

어디에 어떤 키워드를 써야하는지도 모르니 또 에러가 보이질 않으니 답답함을 좀 느낀것 같았다.

그렇게 하나 하나 뜯어보니

      - name: Install dependencies
        run: npm ci
      - name: Install dependencies
        uses: npm ci
      - name: Lint Code
        uses: npm run lint

명령어를 작성해야하는 곳에서 run이 아닌 uses를 쓰고 있었다.

작업은 실패하였지만 그래도 pull_request로 작동이 되면서 파이프라인이 생긴것에 감사했다.

 

2. lint작업에 대하여

처음 구상은 지금까지 개발 - 배포까지의 순서가 CI/CD파이프라인으로 자동화를 시키면 되겠다고 생각을 했다.

지금까지의 순서는

a. 프로젝트를 만들때 프리티어로 코드들을 협업에 스타일에 일치하도록 구성함

b. 비즈니스 로직과 개발이 완료되면 테스트를 거쳐서 코드의 안정성을 최대한 확보함

c. 배포하기 전에 소스 코드파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하여 사용하기 위한 빌드를 진행.

d. 모든 과정이 성공적으로 실행되면 배포를 시작.

이러한 과정의 순서대로 진행을 하려고 했다.

 

일단 협업을 하고 있는 프로젝트 였기 때문에 해당 레포지토리 관리자의 토큰을 secret에 설정하여 사용하였다.

하지만

이런 에러가 또 떳다.

자료를 찾아보는데 토큰이 없어서 못읽는다고 밖에 자료가 나와있지 않았다.

코드를 다시 하나하나 뜯어보면서 내려가는데

action/checkout을 사용하여 코드를 내려받는 곳에서 오타가 있었다.

s를 빼고 코드를 작성하여 읽지를 못한것이다.

yaml파일에서는 에러가 나질않아서 이런 오타때문에 생기는 에러를 찾는데 너무 오래걸리는것 같다.

그래도 에러가 바꼇으므로 하나하나 해결하는것에 의의 두며 해결해나가면 끝을 볼수 있을거라 생각하고 한다.

바뀐에러는 "react-app설정을 찾을수가 없으니 client폴더안의 package.json안에 참조를 해주어라" 였다.

이부분이 리액트를 사용하고 있는 부분이였는데

리액트의 ㄹ도 모르니 어디를 손봐야 할지 몰라 많은 것을 시도했다.

a. eslint eslint-plugin-react eslint-config-react-app 패키지 지우기

b. client/package.json의 lint부분 "lint": "cd client && eslint 'src/**/*.js' --fix"를 "lint": "eslint 'src/**/*.js' --fix"로 수정.

    → cd client로 이동을 할수 없는 위치에 있었기때문이 파일을 못읽는것 같아 지워 주었다.

c. add module eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript 모듈 설치

d. eslintrc.json in extends안에     "plugin:react/all","eslint:all", 설정해주기

모두 실패를 했다.

저 에러를 잡을 수가 없었다. 

일단 현재 백엔드를 공부하고 있기도 했고 프론트는 차차 배워보도록하고 

 

3. 백엔드쪽 ci에 집중을 해봤다.

ci순서를 바꿧다.

a. build

b. test

c. deploy

아직 테스트 전이므로 build가 잘 되는지 확인해 보았다.

동시에 배포까지 가는지 확인해보니 잘 작동하는걸 확인할수가 있었다.

이어서 테스트까지 진행을 하였더니

모든 과정이 통과하엿다..

 

에러가 바뀔때마다 처음 보는 에러이다보니 무엇이 원인인지, 어떠한 부분에서 문제가 생기는지 판단하기가 힘들어

자료를 찾고 적용 시키는것에 1~2시간은 기본으로 지나가는것 같아서 이부분이 가장 힘들었던것 같다.