배포와 CI/CD 완벽가이드

내가 원하는 웹사이트를 만들었는데 다른 사람에게 보여줘야 한다면?

웹브라우저에 나와있는 localhost://~ 이 주소를 보내줄건가요?

이건 내 컴퓨터에서만 볼 수 있죠.

 

그래서 이렇게 내가 만든 웹사이트를 외부에서도 다른 사람들이 볼 수 있도록 공유하기 위한 작업, 즉 "배포" 라는 것을 합니다.

한마디로 어디 서버에 내가 만든 웹사이트를 올려놓는다는거죠.

(개인적으로 배포라는 단어가 의미전달을 제대로 하지 못하는 것 같아 별로 좋아하지 않습니다만)

 

이런 과정을 아예 자동화하는 것이 CI(Continuos Integration)/CD(Continuos Deployment) 라고 하는 것입니다.

내가 소스를 고치고 깃허브와 동기화하면, 깃허브와 연결된 Vercel에서 이를 감지해 배포까지의 과정이 자동으로 이루어지는 것입니다. 편리하겠죠?

 

꼭 Vercel 서비스를 이용하지 않더라도 깃허브 자체의 Page 라는 기능을 이용하면 마찬가지로 깃허브의 주소를 가진 배포사이트를 만들 수 있습니다.

 

다만 깃허브의 페이지를 이용하려면 Private이 아닌 Public 즉, 소스가 공개되어 있어야 합니다.

소스는 감추고 최종 결과물만 보여주고 싶다면 Vercel을 이용하면 되겠죠.

 

---

GitHub와 Vercel을 연동하여 웹사이트를 배포하는 전체 과정은 다음과 같습니다.

1단계: GitHub 리포지토리(저장소) 생성 및 코드 업로드

• GitHub에 로그인한 후 우측 상단의 '+' 버튼을 클릭해 **'New repository(새 리포지토리)'**를 생성합니다.
• 리포지토리의 이름과 설명을 입력하고, 필요에 따라 공개(Public) 또는 비공개(Private) 여부를 선택한 후 생성합니다.
• 자신의 로컬 환경에서 작업한 프로젝트 폴더를 열고 git init으로 초기화한 뒤, git add ., git commit으로 커밋을 생성하고 git push 명령어를 사용하여 GitHub 리포지토리에 코드를 업로드(Push)합니다. 명령어 없이 GitHub 웹상에서 직접 파일을 업로드할 수도 있습니다.

2단계: Vercel 가입 및 GitHub 계정 연동

• Vercel 홈페이지(vercel.com)에 접속하여 **'Sign Up(가입)'**을 진행합니다.
• 가입 시 **반드시 'Continue with GitHub'**을 선택하여 자신의 GitHub 계정으로 로그인하고 두 플랫폼을 연동합니다.
• 처음 연동할 때는 Vercel이 접근할 수 있는 GitHub 저장소를 전체로 할지 선택적으로 할지 고른 후 설치(Install) 및 승인(Authorize) 과정을 거칩니다.

3단계: Vercel에서 프로젝트 가져오기(Import)

• Vercel 대시보드 화면에서 'Add New Project' 또는 'Import Project' 버튼을 클릭합니다.
• 연동된 GitHub 리포지토리 목록이 나타나면, 방금 코드를 올린 프로젝트를 찾아 'Import' 버튼을 클릭합니다.

4단계: 프레임워크 확인 및 환경 변수(Environment Variables) 설정

• 프로젝트를 가져오면 Vercel이 Next.js, React, 일반 HTML 등 프로젝트의 프레임워크를 자동으로 감지하여 빌드 커맨드와 같은 기본 설정을 맞춰줍니다.
• 만약 프로젝트에 API 키나 데이터베이스 URL과 같은 보안 정보(.env 파일)가 포함되어 있다면, GitHub에는 이러한 보안 파일이 업로드되지 않으므로 Vercel의 'Environment Variables' 설정란에 해당 키와 값을 직접 입력해 주어야 합니다.

5단계: 배포(Deploy) 진행 및 확인

• 설정을 마친 후 'Deploy' 버튼을 클릭하면 빌드가 시작됩니다.
• 성공적으로 빌드와 배포가 완료되면 축하 메시지와 함께 Vercel이 무료로 부여한 고유 도메인(URL 주소)이 생성되며, 이 주소를 통해 전 세계 누구나 웹사이트에 접속할 수 있습니다. 이후 별도로 구매한 커스텀 도메인 연결도 가능합니다.

6단계: 코드 수정 시 자동 배포 (CI/CD 파이프라인)

• 배포가 완료된 후 로컬에서 코드를 수정하고 GitHub의 메인(main) 브랜치에 다시 푸시(Push)하기만 하면, Vercel이 이를 자동으로 감지하여 빌드하고 새로운 버전을 프로덕션 환경에 배포합니다.
• 안전한 관리를 위해 메인 브랜치에 바로 올리기보다, 새로운 브랜치를 따서 코드를 수정한 뒤 Vercel의 프리뷰(Preview) 배포를 통해 변경 사항이 실제 환경에서 잘 동작하는지 먼저 테스트하고 메인에 병합(Merge)하는 방식을 사용할 수 있습니다.

---

 

이런 과정 자체가 복잡해 보이나요?

처음에 깃허브나 Vercel에 가입만 해두고, AI툴을 이용해서 배포 자동화 해줘 라고 한 마디만 지시하면 모든 것이 알아서 이루어지니 걱정할 필요없습니다.

 

그럼 깃허브의 페이지와 Vercel 서비스와의 무슨 차이가 있을까요?

 

---

실제 웹 검색을 통해 **GitHub Pages vs Vercel (깃허브 페이지와 Vercel 비교)**에 대해 조사한 결과입니다:

단순 정적 파일 호스팅과 Jekyll 기반 블로그에는 완전히 무료이고 대역폭 및 도메인 연결이 간편한 GitHub Pages가 훌륭한 선택이지만, Next.js나 React 등 현대적인 프론트엔드 프레임워크 기반의 유연한 빌드, 분기별 자동 프리뷰 배포, 서버리스 함수(Serverless API) 처리가 필요한 동적 웹 애플리케이션에는 Vercel이 압도적으로 유리합니다.

발견한 주요 테마:

1. 서버 사이드 로직의 유무 (Dynamic vs Static): GitHub Pages는 서버 사이드 로직을 실행하지 못하는 100% 정적 파일 서비스이므로 Node.js, Python, PHP 등 백엔드 API를 구동하거나 데이터베이스에 직접 연동할 수 없으나, Vercel은 강력한 서버리스 환경을 기본으로 제공하여 동적인 데이터 제어가 가능합니다.
2. 개발 생산성 및 배포 워크플로우: Vercel은 커밋 및 풀 리퀘스트(PR)마다 자동으로 고유 프리뷰 도메인을 생성해 주어 안전하게 배포 전에 결과물을 검토할 수 있지만, GitHub Pages는 브랜치별 프리뷰 링크를 기본 제공하지 않아 사전에 변경 사항을 테스트하기 까다롭습니다.
3. 프레임워크 감지 및 빌드 파이프라인: Vercel은 Next.js, React, Astro, Sveltekit 등 35개 이상의 현대적인 프레임워크 설정을 자동으로 감지하는 Zero-Config 방식을 자랑하지만, GitHub Pages는 Jekyll 외의 정적 프레임워크를 빌드하여 배포하려면 GitHub Actions 등의 복잡한 CI/CD 워크플로우를 직접 정의해야 합니다.
4. 상업적 제약 및 추가 비용 한도: GitHub Pages는 개인용 및 프로젝트 단위 호스팅이 자유롭고 무료이지만 상업적 사이트(SaaS, 전자상거래 등) 운영을 공식 약관상 제한하며, Vercel은 상업용 Pro 요금제가 구비되어 있으나 트래픽 급증 시 대역폭(Bandwidth) 초과 과금 위험이 있습니다.

---

 

 

 

위에서 설명했듯이 깃허브는 동적인 서비스는 할 수가 없습니다. PHP 등으로 만든 웹사이트는 서버에서 작업을 해서 클라이언트로 최종결과물을 뿌려주는데 깃허브는 정적인 서비스만을 업로드할 수 있습니다.

 

 

 

https://youtu.be/ULDiQNYVAXY?si=8_Ja7R0mfHIUf0qh