[Init] CI/CD 파이프라인 구축 #6

odukong · 2026-01-01T11:32:50Z

✏️ Summary

close [Init] CI/CD 파이프라인 구축 #3

GitHub Actions를 활용하여 CI/CD 파이프라인을 구축했습니다. 코드 푸시부터 빌드, 테스트, 그리고 Vercel 배포까지의 과정을 자동화했으며, Discord 알림과 PR 코멘트를 통해 팀원들이 배포 상태를 실시간으로 파악할 수 있도록 구현했습니다.

📑 Tasks

파이프라인 역할 분담을 위한 workflow 분리 ➡️ ci.yml, cd.yml
깃허브 PR, commit 내역에 대한 디스코드 알림 기능 추가
vercel 경로 접근 문제 해결을 위한 vercel.json 파일 추가

CI/CD 파이프라인은 크게 main, dev 브랜치에 push, pull_request가 이루어질 때 빌드를 수행하는 ci.yml과 배포 레포지토리로 코드를 전달하여 vercel의 자동배포가 이루어지도록 하는 cd.yml로 분리하였습니다.

ci.yml

ci 워크플로우는 main, dev 브랜치에 대한 Push, Pull Request 발생 시 빌드 및 테스트를 수행하며 팀원 간 협업 효율성을 높이기 위한 PR commt, 담당자 및 리뷰어 자동 등록, 디스코드 알림과 같은 자동화 기능을 수행합니다

✅ CI 워크플로우를 분리하지 않은 이유

코드의 길이가 꽤나 길기 때문에 책임에 맞게 CI파일을 분리할 수도 있겠지만, 현재 프로젝트의 규모에서는 파일을 분리하는 것이 오히려 불필요한 복잡함을 초래할 수 있다고 느꼈고, 이어지는 흐름이 단순 명료하기 때문에 하나의 파일로 통합하여 관리하는 것이 직관적으로 파악할 수 있다고 생각해 굳이 분리하지 않고 하나의 파일로 구현하였습니다.

워크플로우는 다음과 같이 수행됩니다.

actions/checkout을 사용하여 저장소의 코드를 내려받습니다.
pnpm과 Node.js 환경을 설정하고, pnpm store를 수동 캐싱하여 필요한 패키지를 재사용합니다.
setup-node의 기본 캐싱(cache: 'pnpm')은 package-lock.json 파일 변경 시 전체 패키지가 재다운로드되는 점을 해결하기 위해 수동 캐싱을 사용했습니다.

# pnpm store 캐싱
- name: Get pnpm store directory
  id: pnpm-cache
  run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

- uses: actions/cache@v5
  with:
    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
    key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }}
    restore-keys: ${{ runner.os }}-pnpm-

# node.js 환경 설정
- name: Setup Node.js
  uses: actions/setup-node@v5
  with:
    node-version: '24.x'

의존성을 설치 및 린트 검사, 타입 검사, 프로젝트 빌드를 수행하며, 빌드 실패 시에도 PR 코멘트와 디스코드 알림 전송을 위해 프로세스를 중단되지 않도록 continue-on-error 옵션을 적용했습니다.

빌드 결과를 보여주는 PR comment는 추가 커밋마다 PR comment가 누적돼서 쌓이지 않고, marocchino/sticky-pull-request-comment@v2action을 사용해 이전의 코멘트를 갱신하여 사용할 수 있도록 구현했습니다.

디스코드 알림의 경우, PR 생성과 PR의 빌드 결과(성공/실패), 모든 PR commit내역 그리고 PR review을 보내도록 설정하였고, PR 빌드 결과에 대해서만 ci.yml에 커스텀하여 알림을 보내도록 하였습니다.

PR이 생성된 경우, 담당자와 리뷰어를 자동으로 지정합니다.

cd.yml

Organization Repository에서 Vercel 배포해야 할 때, 유료 플랜을 사용해야 합니다. 이 문제를 해결하기 위해 Organization Repository를 개인 repository로 fork하여 개인 repository를 vercel로 배포하도록 흐름을 구현했습니다.

main 브랜치에 코드가 push되면, repository 코드를 불러와 build.sh를 실행합니다.

#!/bin/sh
cd ../
mkdir output
cp -R ./COMFIT-CLIENT/* ./output
cp -R ./output ./COMFIT-CLIENT/

이때 빌드된 코드는 output 디렉터리에 담기게 됩니다.

cpina/github-action-push-to-another-repository action이 output 폴더의 내용을 개인 계정의 포크된 레포지토리로 그대로 복사해서 push 해줍니다.

with:
  source-directory: output
  destination-github-username: {개인 깃허브 아이디}
  destination-repository-name: {포크한 레포 이름}
  target-branch: ${{ github.ref_name }}

최종적으로 vercel은 개인 레포지터리에 push된 코드를 감지하여 자동으로 배포를 수행됩니다.

✨ actions/cache의 pnpm 캐싱

CI 실행 단계의 중요 단계인 install 단계를 최적화하기 위해, setup-node의 기본 캐싱 기능에서 actions/cache를 활용한 수동 캐싱되도록 구현하였습니다.

기존 방식

actions/setup-node의 cache: 'pnpm' 옵션은 설정이 간편하지만, 캐시 키 매칭이 엄격합니다.
즉, 의존성이 하나라도 변경되어 pnpm-lock.yaml의 해시값이 바뀌면, 기존 캐시를 사용하지 못하고(Cache Miss) 모든 패키지를 처음부터 다시 다운로드하는 비효율이 있었습니다.

- name: Setup Node.js
  uses: actions/setup-node@v5
  with:
    node-version: "24.x"
    cache: pnpm # pnpm 캐싱

최종 방식

기존 패키지는 reused하고 추가된 패키지만 새로 download하는 흐름을 원했기 때문에,
restore-keys옵션을 통해, package.json 파일이 변경되었더라도 ${{ runner.os }}-pnpm-prefix와 매칭되는 이전 캐시를 복원하여 재사용합니다.

- name: Get pnpm store directory
  id: pnpm-cache
  run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

- uses: actions/cache@v4
  with:
    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
    key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }}
    restore-keys: ${{ runner.os }}-pnpm-

결과적으로 변경된 패키지만 추가로 다운로드할 수 있도록 캐싱 방식을 변경하였습니다. (자세한 내용은 노션을 확인해주세요.)

Actions version

CI/CD파이프라인에 사용되는 Action들은 node LTS인 v24에 맞추어 버전을 통일하였습니다.

actions/checkout	CI 실행 환경으로 저장소의 코드를 내려받는 액션	v5
pnpm/action-setup	CI 환경에 pnpm을 설치	v4
actions/cache	pnpm store 캐싱	v5
actions/setup-node	프로젝트 빌드에 필요한 노드 환경 구축	v5

👀 To Reviewer

fork된 개인 레포로 과연 배포가 잘 될지 ..
모든 피드백 환영합니다🙆🏻‍♀️

📸 Screenshot

🔔 ETC

- vercel이 모든 경로에 대해 index.html파일을 찾을 수 있도록하는 vercel.json 파일 추가

- workflow 폴더명을 workflows로 변경하였습니다.

github-actions · 2026-01-01T11:40:23Z

🚀 빌드 결과

✅ 린트 검사 완료
✅ 빌드 성공

로그 확인하기

Actions 탭에서 자세히 보기

u-zzn · 2026-01-01T12:08:32Z

CI에서는 main/dev 기준으로 빌드와 검증 역할을 명확히 가져가고, CD에서는 개인 fork 레포를 거쳐 Vercel 자동 배포로 이어지는 흐름이 잘 정리되어 있어서 나중에 혹시 배포 이슈가 생겼을 때도 원인 추적이 비교적 수월할 것 같습니다!! ☺️

PR 코멘트가 쌓이지 않도록 sticky-pull-request-comment를 사용한 점이나, pnpm store를 수동으로 캐싱해서 install 단계 실행 시간을 줄인 부분도 너무 좋은 것 같습니다! 수고하셨습니다 🖤

u-zzn · 2026-01-01T12:11:13Z

.github/workflows/cd.yml

+        with:
+          source-directory: "output"
+          destination-github-username: odukong
+          destination-repository-name: COMFIT-CLIENT
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: ${{ github.ref_name }}


cd.yml의 commit-message: github.event.commits[0].message는 다중 커밋 push 시 첫 메시지만 들어가는 이슈가 있을 수도 있을 것 같아서 head_commit.message로 수정하는건 어떨까용? ☺️

github.event.commits[0].message는 가장 예전의 커밋 메시지을 의미하고, github.event.head_commit.message는 push의 HEAD커밋 메시지를 뜻한다고 해서 head_commit으로 수정하는게 의미가 더 명확해질 것 같아 해당 방식으로 수정하도록 하겠습니당🙆🏻‍♀️

저도 합세해서 동일한 이슈가 있어서 수정했었는데 유진이가 잘 캐치해주었네요 ㅎ.ㅎ 최고 !!

u-zzn · 2026-01-01T12:12:53Z

.github/workflows/cd.yml

+      - name: Install mustache
+        run: sudo apt-get update && sudo apt-get install -y ruby && gem install mustache


cd.yml에서 설치한 mustache가 현재 사용처가 보이지 않는 것 같은데, 실제로 템플릿 렌더링에 사용 중인지 궁금합니다! 아니라면 제거하는게 어떨까요! ☺️

허업 cd.yml 파일은 복사해서 가져오다보니 mustache 설치코드도 같이 가져와버렸네요..
말씀해주신대로 mustache는 CD 워크플로우 상에서 사용하지 않아 제거하도록 하겠습니다 🫶🏻

u-zzn · 2026-01-01T12:23:23Z

.github/workflows/ci.yml

+      # 프로젝트 린트 검사 및 타입 검사
+      - name: Check project
+        id: check_step
+        run: pnpm run lint && pnpm exec tsc --noEmit


제가 ci/cd에 대해 잘 몰라서 한 번 찾아봤는데, Check project(lint/tsc) 단계에서 실패가 발생하면 기본 동작상 job이 이 지점에서 종료될 수 있어서 뒤에 있는 PR 결과 코멘트나 Discord 알림 스텝이 실행되지 않는 경우가 생길 수도 있다고 합니다ㅠ!!

PR 코멘트 / Discord 스텝에 always() 조건이 있긴 하지만, job 자체가 중간에 종료되면 해당 스텝까지 아예 도달하지 못하는 케이스가 있을 수도 있다고 하네요 🥲

그래서 check_step에도 continue-on-error를 두고, 마지막에 lint / tsc / build 결과(outcome)를 종합해서 exit 처리하도록 하면 좋을 것 같은데 이 방향에 대해서는 어떻게 생각하시는지 궁금합니다! 🤔

lint 검사 단계에 실패한 경우에는 비교적 무거운 build단계를 실행하지 않고, 바로 comment 스탭으로 넘어가기 위해 continue-on-error옵션을 작성해두지 않았는데, 검사 실패로 인한 comment 스탭에 아예 도달하지 못하는 경우도 고려해서 lint 검사 단계에서도 continue-on-error옵션을 적용하도록 하겠습니다 구욷 (￣︶￣*))

- 린트 및 타입 검사가 실패해도 다음 build단계를 수행하도록 continu-on-error 속성 추가

qowjdals23

CI/CD 흐름을 ci.yml / cd.yml로 역할 분리해두신 게 명확해서 이해하기 수월했습니다!!
PR 코멘트로 빌드 결과 깔끔하게 남기고, Discord 알림까지 붙여서 상태를 바로 확인할 수 있게 한 점도 너무 좋네요 👍👍👍
수고 많으셨습니다 ~~~ ❤️‍🔥

hummingbbird

저도 ci/cd에 대한 이해도가 높은 게 아니라 이해하고 리뷰 남기는데 시간이 많이 걸렸네요 😅😅 유진이가 꼼꼼하게 리뷰 남겨준 덕분에 추가적으로 수정 필요한 부분은 없는 것 같습니다! 천재꼼꼼머신개발자들과 함께라 정말 행복하네요 .. 🙂‍↕️🙂‍↕️ 수고하셨어요!

+) 아이디어스에서부터 눈여겨 본 슈퍼꼼꼼 pr !! 파일 하나하나의 의도와 목적 그리고 역할까지 잘 작성해주셔서 코드의 흐름을 이해하는 게 훨씬 빠르고 수월했던 것 같아요 땡큐 !!!!! 👍👍👍

hummingbbird · 2026-01-01T14:35:27Z

vercel.json

vercel 배포에 필요한 설정도 같이 해주는 꼼꼼함 .. 최고다오두콩

칭찬에 덩실덩실대는 오두콩이되....

- vercel에서 참조하고 있는 브랜치는 개인레포의 dev브랜치입니다. 하지만 cd.yml에서는 target브랜치인 ${{ github.ref_name }}, 즉 main으로 타깃을 지정하고 있습니다. vercel에서 참조하고 있는 브랜치는 개인레포의 dev이기 때문에, main을 빌드한 결과물인 output 디렉터리 역시 개인 레포의 dev로 push되게 해야하기 때문에 target-branch를 dev로 수정하였습니다. - 추가로, vercel에서 참조 브랜치를 변경하게 되면 새로운 push부터 변경사항이 적용된다고 하여 yml을 수정하였습니다.

hummingbbird · 2026-01-01T15:22:38Z

.github/workflows/cd.yml

+          destination-repository-name: COMFIT-CLIENT
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: ${{ github.event.head_commit.message }}
+          target-branch: dev


저는 dev 브랜치는 개발용, main브랜치는 배포용(즉, 유저에게 제공되는 버전)이라고 생각해요. 그래서 수빈님 말씀대로 배포 후에 dev 브랜치로 push 되긴 하지만 브랜치를 분기한 목적을 고려했을 때 target-branch: main이 더 적절하다고 생각합니다!

- vercel 내 tracking branch가 main으로 체크됨으로 기존 타켓브랜치인 github.ref_name으로 변경

odukong added 3 commits January 1, 2026 19:55

init: ci.yml 파일 생성 (#3)

ec33ff5

init: cd.yml 파일 및 build.sh 파일 생성 (#3)

86d081b

init: vercel.json 파일 추가 (#3)

2e47d52

- vercel이 모든 경로에 대해 index.html파일을 찾을 수 있도록하는 vercel.json 파일 추가

odukong linked an issue Jan 1, 2026 that may be closed by this pull request

[Init] CI/CD 파이프라인 구축 #3

Closed

3 tasks

github-actions bot added 🎉INIT 초기 세팅 수빈🍋 labels Jan 1, 2026

odukong self-assigned this Jan 1, 2026

odukong requested review from hummingbbird, qowjdals23 and u-zzn January 1, 2026 11:34

odukong added 2 commits January 1, 2026 20:37

fix: workflows 폴더명 수정 (#3)

c6b74dd

- workflow 폴더명을 workflows로 변경하였습니다.

fix: 자동리뷰어 설정 문법 수정 (#3)

339baa9

u-zzn reviewed Jan 1, 2026

View reviewed changes

odukong added 3 commits January 1, 2026 21:45

refactor: 린트 및 타입 검사결과와 무관하게 step 진행 (#3)

9892587

- 린트 및 타입 검사가 실패해도 다음 build단계를 수행하도록 continu-on-error 속성 추가

fix: 사용되지 않는 mustache 설치 코드 제거 (#3)

8635bf1

refactor: commit-message를 head_commit 기준으로 변경 (#3)

f8304d1

qowjdals23 approved these changes Jan 1, 2026

View reviewed changes

hummingbbird approved these changes Jan 1, 2026

View reviewed changes

hummingbbird self-requested a review January 1, 2026 15:19

hummingbbird reviewed Jan 1, 2026

View reviewed changes

fix: target_branch 수정 (#3)

6dcc01e

- vercel 내 tracking branch가 main으로 체크됨으로 기존 타켓브랜치인 github.ref_name으로 변경

odukong merged commit 71370bd into dev Jan 1, 2026
2 checks passed

		- name: Install mustache
		run: sudo apt-get update && sudo apt-get install -y ruby && gem install mustache

[Init] CI/CD 파이프라인 구축 #6

[Init] CI/CD 파이프라인 구축 #6

Uh oh!

Conversation

odukong commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✏️ Summary

📑 Tasks

ci.yml

cd.yml

✨ actions/cache의 pnpm 캐싱

기존 방식

최종 방식

Actions version

👀 To Reviewer

📸 Screenshot

🔔 ETC

Uh oh!

github-actions bot commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 빌드 결과

Uh oh!

u-zzn commented Jan 1, 2026

Uh oh!

u-zzn Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

qowjdals23 left a comment

Choose a reason for hiding this comment

Uh oh!

hummingbbird left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

odukong commented Jan 1, 2026 •

edited

Loading

github-actions bot commented Jan 1, 2026 •

edited

Loading

u-zzn Jan 1, 2026 •

edited

Loading