[React] GDSC 2차 프로젝트 CI/CD

1차 프로젝트 때 같은 팀 프론트 분이 하셨던 github 레포지토리 배포(?)를 이번 프로젝트 하면서 적용해보고 싶어져서 새벽에 프로젝트 시작하면서 하는 김에 같이 해보았다.

헛짓을 좀 많이 해서 오래 걸리긴 했지만 정상적으로 일단 돌아가는 걸 확인해서 했는 걸 정리해보려 한다. 

지난 글에서 했던 프로젝트 세팅에 이어서 작업을 해주었는데, github 레포지토리에 아직 연결을 안해둬서 연결 작업 부터 해주었다.

echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/krokerdile/xxx.git
git push -u origin main

github에서 알려주는 명령어 순서대로 쭉 작성을 하면 간단하게 github의 레포지토리와 프로젝트를 연결 할 수 있다. 여기서 git branch -M main을 해주는 건 'Black Lives Matter' 운동에 발맞춰 주종(주인과 노예)관계를 뜻하는 'master', 'slave'를 다른 단어로 대체하기 위해서 라고 한다. 뭔가 자동으로 main 설정을 해주면 편할 거 같은데 개발자(?) 마인드로 보면 이미 있는 수많은 레포지토리의 master branch를 main으로 바꿔줘야 된다? 상당히 비용이 많이 들지 않을까 싶긴 하다. main으로 바꾼다는 결정에 대해서 듣고 나서도 구글에 검색을 해보면 관련된 글들이 많은 걸 보니 호불호가 갈리는 부분인 거 같긴하다. 

여튼 다시 돌아가서 해당 부분을 마무리 해주면 일단 github의 레포지토리와 연결 하는 부분 까지는 완성이다.

GitHub - sitek94/vite-deploy-demo: Deploy Vite app to GitHub Pages using GitHub Actions

이제 몇 가지 작업을 해주어야 하는데 관련해서 참고한 곳은 위의 github 레포지토리이다. 간단하게 되있어서 보고 했지만 더 자세하게 적힌 곳들도 많으니까 찾아봐도 좋은 것 같다. 

먼저 .github/workflows/deploy.yml을 디렉토리에 추가하여 준다. 해당 파일이 이제 우리가 github action을 통해 배포(?)를 진행할 때 기본적인 설정이나, 내용이 들어가 있는 파일이다. 

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v3
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

위의 코드를 해당 파일에 추가하여 주면 되고, 이 내용까지 commit&push 해주면 된다.

github 레포의 Actions

아마 여기 까지 해주고 레포지토리의 actions에 들어가게 되면 배포가 진행 되어지고 있을 것 같다. 처음에 실패 했던 부분이 어제 위의 내용까지 push를 해줬던 부분인데, 처음에 실패했던 이유는 확실하진 않은데 yarn install을 안해주고 실행을 한게 문제가 아니었을까 싶다. 

package-lock.json이 없어서 에러남.

위에서 참고했던 github actions 관련 코드는 npm으로 돌아가는데 yarn 으로 플젝을 만들었는데.. 호환성 이슈가 있다고 알고 있었는데 일단 돌아가는 걸 보니 되는 거 같다. 아마도 혹시나 이슈가 생길 거를 생각한다면 배포 소스 코드에 yarn으로 바꿔적어줘야 될 거 같다. 이부분은 그냥 해보기만 했지 관심을 가지고 해보는게 처음이라 공부해보고 추가로 글을 적는 걸루😅

참고했던 github 레포에 올라와있는 에러 로그, 아마 이거랑 똑같이 에러날 거 같다.

여튼 이 부분을 이렇게 해결 하고 나면, 그 다음으로는 아마 경로 관련 에러가 나올텐데 그 부분도 vite.config.ts에 경로를 추가해주면 해결 된다. 경로를 추가해줄 때는 본인 레포지토리 이름으로 경로를 작성해주면 정상적으로 돌아간다. 

base: "/xxx/", 추가 해줌

그리고 마지막으로 github actions 관련 설정이다.

해당 레포지토리 설정 페이지- github action에 들어가서, 먼저 위의 사진과 같이 설정을 바꿔준다. 이 부분이 이제 돌아갈 수 있도록 허락을 해주는 부분이고, 아래 사진은 이제 deploy 단계가 마무리 되고 나면 gh-pages branch가 생길 텐데 해당 브랜치로 설정을 해주면 페이지 배포가 마무리 된다. 

잘 동작하는 모습

아마 정상적으로 작업이 완료 됐다면 위의 사진 처럼 잘 작동하는 결과물을 확인 할 수 있을 것 같다. 이번이 제대로 찾아보고 하는 건 처음이라서 관련해서 조금 더 공부하는데로 자세한 내용도 올려둘 거 같다.