[init/#4] CI/CD 파이프라인 구축 , vercel 배포 by mimizae · Pull Request #11 · SOPT-all/37-COLLABORATION-WEB-IDUS

mimizae · 2025-11-16T07:37:38Z

📌 Summary

close init: CI/CD 파이프라인 구축 및 vercel 배포 #4
CI/CD 파이프라인 구축 , vercel 배포

📄 Tasks

리드 님께서 주신 참고자료들을 보고 진행했습니다.

이번에 공부한 CI/CD란 무엇인지...

CI는 ci.yml, CD는 develop.yml로 분리하여 각각 역할을 수행하도록 구성했습니다!

먼저 CI(Continuous Integration) 는 코드가 main 또는 develop 브랜치로 들어올 때마다 자동으로 빌드가 수행되어, 코드에 문제가 없는지 확인하는 역할을 합니다.

예를 들어 ci.yml에서는 다음 과정이 자동으로 수행됩니다!!

on: pull_request 와 on: push 설정을 통해 PR을 열거나 main/develop에 코드를 push하면 자동으로 워크플로우가 실행됩니다.
가장 먼저 actions/checkout으로 레포지토리를 체크아웃해 현재 코드 상태를 가져옵니다.
이후 pnpm/action-setup과 actions/setup-node를 사용해 필요한 Node.js와 pnpm 환경을 세팅합니다.
pnpm install --frozen-lockfile를 통해 의존성을 정확한 버전으로 설치하고, pnpm run build로 빌드를 시도합니다. 실패해도 계속 진행하도록 continue-on-error: true를 걸어두어, 이후 단계에서 빌드 결과를 판단할 수 있습니다!
그 다음 스크립트에서는 ${{ steps.build.outcome }} 값을 기반으로 빌드 성공 여부를 판별하고, 성공이면 "빌드 성공 🥳", 실패이면 "빌드 실패 ⛔️"라는 메시지를 PR에 자동으로 댓글로 남기도록 했습니다!!

- name: Build project with Vite
  id: build
  run: pnpm run build
  continue-on-error: true

이 단계에서 빌드를 실행하고, continue-on-error: true 덕분에 실패하더라도 워크플로우 전체가 중단되지 않습니다.

if [ "${{ steps.build.outcome }}" == "success" ]; then
  result="success"
  message="빌드 성공 🥳"
else
  message="빌드 실패 ⛔️"
fi

이렇게 실제 성공 여부를 판단해 메시지를 자동 생성하도록 했습니다!

- name: Fail job if build failed
  if: steps.build.outcome == 'failure'
  run: exit 1

여기서 빌드가 실패한 경우 워크플로우 전체를 실패 상태로 종료해, GitHub에서 한눈에 실패 여부를 확인할 수 있게 했습니다!

CD(Continuous Deployment) 는 코드를 배포용 레포지토리로 자동으로 전달해 Vercel에서 자동 배포가 이루어지도록 하는 단계입니다. 이 역할은 develop.yml에서 수행합니다!

main 또는 develop에 push가 발생하면 워크플로우가 실행됩니다.
actions/checkout으로 저장소를 불러온 뒤 sh build.sh를 실행해 output 디렉토리를 생성합니다.
이후 cpina/github-action-push-to-another-repository 액션을 통해 output 디렉토리를 별도의 배포용 레포지토리로 push합니다.

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

이 설정은 "output 폴더의 결과물을 GitHub 사용자 mimizae의 37-COLLABORATION-WEB-IDUS 레포지토리의 동일한 브랜치(main 또는 develop)로 그대로 push해라"라는 뜻입니다!! 신기합니다

이렇게 배포용 레포지토리가 갱신되면 Vercel에서 해당 레포지토리를 감지해 자동으로 배포가 진행됩니다.

++) vercel.json이란?

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

이 파일을 사용해야 하는 이유는 React의 SPA의 동작과 관련이 있습니다.
SPA는 모든 경로를 index.html로 로드한 뒤 JS가 URL을 해석해 화면을 전환합니다.
만약 rewrites를 설정하지 않으면 주소창의 루트 페이지(/) 이외의 주소 (ex: /home)을 입력할 시, vercel이 해당 주소에 해당하는 정적 파일을 사용하지 못해 404가 발생합니다.

즉, rewrites를 설정하면 어떤 경로로 접근하더라도 첫 로드가 항상 index.html이 되도록 보장할 수 있으며, 이후 React가 라우팅을 처리해 정상적으로 페이지가 표시됩니다!

🔍 To Reviewer

잘 될까요...??? 두근...두근

📸 Screenshot

main 배포

develop 배포

- main, dev 둘 다 자동 배포 되도록 수정

github-actions · 2025-11-16T07:37:57Z

빌드 결과

빌드 성공 🥳

odukong

상세한 PR 감동...... (´▽`ʃ♡ƪ) 수고 많으셨습니당 💛

jstar000

디자인 토큰 설정, CI/CD 파이프라인 구축과 배포까지 까다로운 부분을 담당하셨는데도 빠르게 잘 적용해주신 것 같아요 고생 많으셨습니다ㅠㅠ
리뷰 몇 개 달았는데 확인 부탁드려요!

jstar000 · 2025-11-19T03:14:46Z

.github/workflows/cd.yml

@@ -0,0 +1,30 @@
+name: git push into another repo to deploy to vercel


파일 이름이 develop.yml인데, 혹시 cd.yml이나 deploy.yml이 더 적절하지 않을까요..?

앗;;; 처음 세팅할 때 잘못 적은 걸 그대로 두었네요 ci.yml이 존재하니까 통일감 있게 cd.yml로 수정하겠습니다!

jstar000 · 2025-11-19T03:27:38Z

.github/workflows/develop.yml

+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: pandoc/latex


제가 드렸었던 참고자료에 pandoc/latex 컨테이너 이미지를 사용하는 코드가 포함돼있는데, 해당 코드는 ubuntu-latest Virtual Machine에서 pandoc/latex Docker 컨테이너를 실행하는 코드예요.
pandoc/latex는 마크다운 문서를 PDF같은 다른 형식으로 변환하는 작업을 수행하는 도커 이미지인데,
이번 저희 프로젝트에서는 문서 관련 기능은 없으므로 해당 컨테이너 위에서 코드를 돌릴 필요 없이 바로 ubuntu-latest VM 기본 환경 위에서 코드를 실행하면 될 듯해요.

따라서 container: pandoc/latex 코드는 삭제해도 될 것 같은데, 혹시 코드 삭제한 뒤 배포에 문제가 생긴다면 말씀해주세요!

앗 정말 pandoc/latex 컨테이너가 필요한 작업이 없으니 말씀해주신 대로 container: pandoc/latex 부분은 제거하겠습니다!

또한, 말씀 주신대로 수정하면 기본적으로 ubuntu-latest 환경에서 실행되게 되니 mustache 설치 명령도 ubuntu 기준으로(apt-get) 변경해두었습니다!

크ㅡㅡ.. 너무 좋습니다

jstar000 · 2025-11-19T03:48:47Z

.github/workflows/develop.yml

+    runs-on: ubuntu-latest
+    container: pandoc/latex
+    steps:
+      - uses: actions/checkout@v2


uses: actions/checkout은 Github repository의 코드를 다운로드하고, ubuntu-latest VM의 기본 환경으로 가져오는 역할이에요.

현재 버전이 v2로 설정되어 있는데, v2는 이제 곧 deprecated될 예정이라 v4로 수정하는게 좋을 것 같아요!

헉... 정보 감사합니다! 최신 블로그가 아닌 점을 고려해서 버전을 살폈어야 했는데 😅
혹시나 하는 마음에 공식 문서 찾아보니 @v5까지 나온 것 같은데 가장 최신 버전으로 수정할까요?!

좋아요좋아요 Checkout v5가 나왔으니 v5로 적용해봐요!

jstar000 · 2025-11-19T03:50:28Z

vercel.json

+      "destination": "/index.html"
+    }
+  ]
+}


vercel.json 세팅까지 세심한 설정 좋아요🔥🔥🔥

참리드 참스장

jstar000 · 2025-11-19T03:54:48Z

.github/workflows/ci.yml

@@ -0,0 +1,71 @@
+name: ci


ci 파일 세팅 굿굿 😎😎

github-actions · 2025-11-19T06:47:31Z

빌드 결과

빌드 성공 🥳

github-actions · 2025-11-19T08:25:40Z

빌드 결과

빌드 성공 🥳

mimizae and others added 5 commits November 15, 2025 02:16

Create develop.yml

55a1be8

init: build.sh 파일 생성

f881673

init: develop.yml 파일 수정

c1fe46e

- main, dev 둘 다 자동 배포 되도록 수정

init: ci 구축

444d42b

init: vercel.json 추가

e3275c7

mimizae requested review from jstar000, odukong and qowjdals23 November 16, 2025 07:37

mimizae self-assigned this Nov 16, 2025

mimizae added 🌸 민재 init 개발 환경 세팅 labels Nov 16, 2025

odukong approved these changes Nov 18, 2025

View reviewed changes

jstar000 reviewed Nov 19, 2025

View reviewed changes

mimizae added 3 commits November 19, 2025 15:19

chore: cd 워크플로우 파일명 변경

bf167de

chore: actions/checkout 버전을 v4로 업데이트

7fbdf7c

refactor: 필요없는 컨테이너 제거

4fd532b

chore: actions/checkout 버전 번경

2e4ffc6

jstar000 approved these changes Nov 19, 2025

View reviewed changes

jstar000 merged commit 0365db1 into develop Nov 19, 2025
1 check passed

		@@ -0,0 +1,30 @@
		name: git push into another repo to deploy to vercel

Conversation

mimizae commented Nov 16, 2025

📌 Summary

📄 Tasks

🔍 To Reviewer

📸 Screenshot

Uh oh!

github-actions bot commented Nov 16, 2025

빌드 결과

Uh oh!

odukong left a comment

Choose a reason for hiding this comment

Uh oh!

jstar000 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!

jstar000 Nov 19, 2025 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 19, 2025

빌드 결과

Uh oh!

github-actions bot commented Nov 19, 2025

빌드 결과

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jstar000 Nov 19, 2025 •

edited

Loading