husky와 GitHub Actions을 사용한 CICD

 

이전에 투두태스크 프로젝트를 진행하던 팀 저장소를 fork해와서 개인 레포에서 AWS Amplify로 배포했는데, 변경 사항을 양쪽에 다 push 해줘야 했던 번거로움을 느꼈던 경험이 있었습니다.

Amplify로 진행했을 때 들었던 게 Next.js로 배포를 한다고 하면 vercel이 같은 회사라서 연동이 쉽고 CICD를 잘 구축해둬서 많이 사용한다는 말을 들은 적이 있었습니다.

웹서버 구축에 어려움을 느끼고 있던 때 Vercel로 어렵지 않게 하면 안되나? 싶어서 해보았는데, 작업을 끝내고 찾아보니까 Vercel을 웹서버로 사용하는 게 가능할 수는 있지만 Vercel의 서버리스 한계와 성능을 고려하지 못했다는 것을 깨달았고, 이후 AWS EC2와 Nginx를 사용해서 웹서버를 구축하는 방향으로 변경했습니다.

 

 

이번 프로젝트에서도 팀 저장소를 사용했기 때문에, 무료로 Vercel을 이용해서 호스팅을 하려면 개인 저장소를 Vercel에 붙여 사용해야했고 이를 위해 팀 저장소 뿐만 아니라 개인 저장소에도 변경사항이 적용되어야 했습니다.

결론적으로 다음과 같이 구성했습니다.

• CI: husky > pre-commit > npx lint-staged
• CD: github action

 

vercel을 사용하면 CICD가 필요한가? 라고 생각할 수 있지만, type 에러나 eslint error와 관련해 커밋할 때부터 체크해서 변경사항에 대한 문제를 바로 확인하고, 고칠 수 있도록 husky와 lint-staged를 설정해 커밋을 시도할 때마다 변경 사항을 확인하도록 했습니다.

 

이 프로젝트에는 타입스크립트를 사용하지 않아서 eslint와 prettier 설정만 해두었습니다.

"lint-staged": {
    "*.{js,jsx}": [
      "npx prettier --write",
      "npx eslint --fix"
    ]
  }

 

그리고 간단한 CD를 위해 저장소간 동기화 과정을 거치도록 했습니다.

 

 

전체적인 과정은 다음 순서를 따랐습니다.

1. organization repo의 root 위치에 build.sh 파일을 만든다
2. 개인 레포를 새로 만든다.
3. Vercel에 개인 레포를 연동시키면서 .env를 설정해준다.
4. Github Settings > Developer Settings -> Personal access tokens -> Tokens -> Generate new token으로 들어가서 ghp_로 시작하는 secret 키를 발급받는다.
5. organization repo와 개인 레포 각각 Settings > Secrets and variables -> Actions -> Repository secrets 에 GIT_EMAIL, AUTO_ACTIONS 이름으로 각각 시크릿 키를 만든다.
6. organization repo에 Actions로 들어가서 new workflow를 생성하고 필요한 내용을 작성한다.

---

 

1. 팀 레포의 root에 build.sh 파일을 만들고 다음과 같이 작성하고 push

#!/bin/sh
cd ../
mkdir output
cp -R ./팀 레포지토리 이름/* ./output
cp -R ./output ./팀 레포지토리 이름/

 

 

2. Personal Access Tokens 발급받기 

 

Settings > Developer Settings > Personal access tokens > Tokens > Generate new token을 통해 ghp_로 시작하는 secret 키를 발급받았습니다.

 

 

3. 각 Repository secrets에 내 github email과 personal access token을 값으로 시크릿 키를 등록하기 

 

GIT_EMAIL에 깃헙 이메일, AUTO_ACTIONS에 이전에 발급 받은 ghp_로 시작하는 personal access Token을 등록했고 organization repo랑 forked된 레포 양쪽 모두 등록해야 했습니다.

 

 

4. Organization repo > Actions > set up a workflow yourself ->  로 .yml 작성

 

 

내용에는 다음과 같은 프롬프트를 사용했습니다. 지금 지원하지 않는 라이브러리를 사용했고 링크는 아래 남겼습니다

https://cpina.github.io/push-to-another-repository-docs/generic-example.html

// .github/workflows/mfc_cicd.yml
name: git push into another repo
on:
  push:
    branches: [develop]
jobs:
  build:
    runs-on: ubuntu-latest
    container: pandoc/latex
    steps:
      - uses: actions/checkout@v2
      - name: Install mustache (to update the date)
        run: apk add ruby && gem install mustache
      - name: creates output
        run: sh ./build.sh
      - name: Pushes to another repository
        id: push_directory
        uses: cpina/github-action-push-to-another-repository@main
        env:
          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
        with:
          source-directory: "output"
          destination-github-username: "jieunwang0"
          destination-repository-name: "mfc-front"
          user-email: ${{ secrets.GIT_EMAIL }}
          commit-message: ${{ github.event.commits[0].message }}
          target-branch: develop
      - name: Test get variable exported by push-to-another-repository
        run: echo $DESTINATION_CLONED_DIRECTORY

 

이렇게 하고 이후 커밋 내역들을 push하면 organization repo에서 자동으로 개인 레포로 push 되는지 확인할 수 있다.

 

 

이렇게 해서 로컬 저장소에 커밋할 때 husky로 prettier 설정과 eslint를 체크해서 커밋할 수 있도록 하고, 팀 원격 저장소로 push하면 개인 저장소로 동기화 되도록 되어있습니다.