Vercel과 GitHub Pages로 웹사이트 자동 배포해보기 (CI/CD 입문 정리)
웹개발 공부를 하다 보면 “내가 만든 파일을 실제 인터넷 주소로 접속 가능하게 만들고 싶다”라는 순간이 꼭 온다.
처음에는 단순히 HTML 파일만 만들었는데, 나중에는 “수정하면 자동으로 반영되는 구조”까지 경험하게 되는데 이 과정이 바로 CI/CD 흐름의 시작이다.
이번에는 실제로 공부하며 진행했던 내용을 기준으로
Vercel(버셀) 배포
GitHub Pages 배포
GitHub 연동
자동 배포 구조
배포 후 오류 수정 과정
까지 한 번에 정리해보려고 한다.
처음에는 어렵게 느껴졌는데, 직접 해보니 “깃허브에 올리기만 하면 자동 배포되는 구조”가 생각보다 엄청 편했다.
CI/CD란 무엇인가?
처음에는 이름부터 어려웠다.
CI/CD는 쉽게 말하면:
코드 수정
깃허브 업로드(push)
자동 빌드
자동 배포
를 자동으로 처리하는 구조다.
즉 예전처럼:
파일 압축
FTP 접속
서버 업로드
같은 작업을 반복하지 않아도 된다.
지금은 HTML/CSS/JS 정도의 정적 프로젝트만 공부 중이지만, 나중에 React나 앱 개발을 할 때도 거의 동일한 흐름으로 사용된다.
관련 기초 내용은 이전에 정리했던
Git과 GitHub 차이 설명 글
이랑 같이 보면 흐름 이해가 더 쉬웠다.
Vercel(버셀)로 무료 배포하기
둘 다 소량의 무료 배포가 가능하다.
이번에는 Vercel 기준으로 진행했다.
1. 회원가입 및 GitHub 연동
Vercel 회원가입 시 이름 작성 후
GitHub 아이디 연동 방식으로 가입을 진행했다.
이 방식의 장점은:
GitHub 수정 시 자동 반영
자동 재배포
저장소 연결 자동화
가 가능하다는 점이다.
가입 완료 후 GitHub 연동 팝업이 나오는데
여기서 “GitHub 연동” 버튼을 클릭한다.
그 다음:
이메일 인증번호 전송
번호 입력
GitHub 연동 완료
순으로 진행된다.
처음에는 복잡해 보였는데 실제로는 금방 끝났다.
Import Git Repository 화면
GitHub 연동이 끝나면
“Import Git Repository” 리스트 화면이 출력된다.
여기서 내가 GitHub에 업로드했던 프로젝트 리스트를 확인할 수 있었다.
배포할 프로젝트 우측의 “Import” 버튼 클릭.
정적인 HTML 작업만 진행 중이라:
Framework Preset
Application Preset
부분은 Other 상태로 두고 진행했다.
그 다음 Deploy 버튼 클릭.
배포 진행 과정 확인
배포를 누르면:
Build Logs
Output Logs
Settings
등 진행 상황을 확인할 수 있다.
현재는 파일 규모가 작아서 거의 바로 완료됐다.
배포 완료 후:
내가 작성한 웹사이트 출력
Continue to Dashboard 클릭
Overview 페이지 이동
이 상태가 바로:
“실제 인터넷에 배포 완료된 상태”다.
그리고 가장 중요한 부분.
GitHub에서 코드 수정 후 push하면:
자동 빌드
자동 배포
자동 반영
까지 모두 처리된다.
이 구조를 처음 경험했을 때 꽤 신기했다.
배포된 내 사이트 주소 확인
Overview 화면 중앙 상단에 보면:
Domains + 버튼
영역이 있다.
여기 표시되는 주소가:
자동 생성된 내 프로젝트 주소다.
예를 들면:
project-name.vercel.app
형태로 생성된다.
이 주소를 다른 사람에게 공유하면
내가 만든 사이트를 바로 접속 가능하다.
새로운 프로젝트 추가 방법
왼쪽 상단 메뉴 → Projects → Add New Project
로 들어가면 같은 방식으로 새 프로젝트를 추가할 수 있다.
Deployments 메뉴에서는:
기존 배포 기록
이전 버전
재배포 내역
등도 확인 가능하다.
프로젝트를 여러 개 운영할 때 꽤 편리했다.
모바일 청첩장 같은 것도 가능
조금 응용하면:
모바일 청첩장
포트폴리오
소개 페이지
링크 모음 사이트
간단한 회사 페이지
같은 것도 제작 가능하다.
특히 HTML/CSS만으로도 꽤 예쁘게 만들 수 있었다.
나중에는 React 기반으로도 확장 가능하다고 한다.
Vercel 무료 버전 주의점
무료라고 해서 완전 무제한은 아니다.
사용량 제한이 존재한다.
공부용이나 개인 프로젝트 수준에서는 충분했지만
트래픽이 많아지거나 팀 프로젝트로 가면 유료 플랜이 필요할 수도 있다.
또한 모든 기술이 다 지원되는 건 아니었다.
예를 들어:
일부 Python 환경
PHP 환경
등은 제한이 있거나 설정이 달랐다.
AI에게 물어보면 가끔 틀린 답도 있어서
실제로는 Vercel Import 화면에서:
Application Preset
지원 프레임워크 목록
을 직접 확인하는 게 가장 정확했다.
Vercel에서 어려운 건 Render 사용
Vercel에서 안 되는 경우에는 Render.com도 많이 사용한다고 한다.
일정량 무료 제공이 가능해서:
서버 실행
백엔드
일부 Python 프로젝트
같은 쪽에서 자주 언급된다.
나중에 Node.js나 백엔드 공부할 때 다시 정리해볼 예정이다.
GitHub Pages 배포도 공부해보기
GitHub Pages는 GitHub의 정적 웹사이트 호스팅 기능이다.
즉:
HTML 파일을 GitHub 저장소에 올리고
그걸 그대로 웹사이트로 공개할 수 있다.
GitHub 계정 연동 절차
배포 전에는:
VSCode
Git
GitHub
연동이 먼저 되어 있어야 한다.
관련 내용은 이전에 정리했던
Git 설치 및 GitHub 연결 정리 글
도 같이 보면 흐름 이해가 쉬웠다.
배포 브랜치 설정
GitHub Pages에서는:
main 브랜치
또는gh-pages 브랜치
를 배포 대상으로 지정 가능하다.
설정 완료 후 몇 분 지나면:
username.github.io
형태의 주소가 생성된다.
자동 배포 구조 이해하기
실제로 흐름은 다음과 같았다.
코드 수정
→ git add .
→ git commit
→ git push
→ 자동 배포
→ 사이트 반영
한 번 구조를 익히고 나니까
이전처럼 파일을 직접 업로드하는 방식보다 훨씬 편했다.
파일 경로 문제로 가장 많이 헤맸다
배포 후 가장 많이 발생했던 문제는:
이미지 안 뜸
CSS 적용 안 됨
JS 동작 안 함
이었다.
대부분 원인은 “경로 문제”였다.
예를 들면:
<img src="/images/test.png">
처럼 절대경로를 잘못 쓰면 GitHub Pages에서 깨질 수 있었다.
그래서:
상대경로
폴더 구조
파일명 대소문자
를 꼭 확인해야 했다.
윈도우에서는 안 보이는데
웹 서버에서는 대소문자를 구분해서 오류가 발생하기도 했다.
배포 후 에러 확인 루틴도 중요
배포는 끝이 아니라 시작이었다.
오류가 나면:
Console 확인
Network 탭 확인
Build Logs 확인
하면서 수정해야 했다.
처음에는 에러만 봐도 무서웠는데
지금은:
“아 어디 경로가 틀렸구나”
정도는 조금씩 보이기 시작했다.
이 과정 자체가 공부에 꽤 도움이 됐다.
예전에는:
“웹사이트 배포는 엄청 어려운 영역 아닐까?”
라고 생각했는데,
실제로는:
GitHub 연동
버튼 몇 번 클릭
자동 배포 연결
정도만 익혀도 충분히 시작 가능했다.
특히:
수정하면 자동 반영되는 구조
실제 인터넷 주소 생성
내 사이트를 직접 운영하는 경험
이 부분이 꽤 재미있었다.
지금은 단순 HTML 수준이지만
나중에는 React, 앱개발, 백엔드까지 연결하면서
더 큰 프로젝트도 배포해보고 싶다.
댓글 없음:
댓글 쓰기