웹개발을 하다보면 개발의 꽃은 결국 실제 서비스를 인터넷에 배포할때임을 느낀다.
배포도구에는 여러가지 애들이 있는데 (ex. jenkins, github actions circleci, Netlify 등등.. ) 이중 오늘은 정적프론트엔드 배포를위한 Vercel를 활용해보자.
하지만 프론트엔드 코드를 배포하는 과정에서 많은 프론트엔드 개발자들이 생기는 그런 ‘아, 또 이거였어?’하는 순간들과, 왜 우리가 Vercel이랑 CI/CD 파이프라인을 짝지어주는지에 대해 이야기해보자
배포할 때마다 터지는 문제들
수동 배포의 치명적 유혹
“아, 이거 그냥 빠르게 FTP로 올리고 작업할까?”라고 시작하는 순간,
축하합니다! 여러분은 이미 수동 배포의 늪에 발을 들이셨습니다. 🤣
그러다 보면, 배포 과정에서 생긴 작은 실수 하나가 큰 혼란을 불러일으키고 복잡해지게된다.
그리고 매번 똑같은 과정을 반복하다 보면, ‘이거 왜 이렇게 번거로워?’하는 생각과 함께 매우 귀찮아지게된다.
설정 실수로 인한 배포 실패
"아니, 왜 배포가 안 되지?" 하고 한참을 고민하다가 알고 보니, 환경 변수를 설정하는 걸 깜빡했다든가, 빌드 스크립트에 오타가 있었다든가... 이런 실수들은 개발자라면 누구나 한 번쯤 겪어봤을 법한 일이다. 그런데 이런 실수들이 CI/CD 파이프라인을 통하면 자동으로 잡힐 수 있는데 말이다.
"어, 나 이거 로컬에서는 잘 됐는데...?"
로컬에서는 아주 잘 돌아가던 코드가 서버에 올라가자마자 에러를 뿜는 경우, 솔직히 말해서 개발자라면 한 번쯤은 "이게 무슨 일이야?" 하고 뺑이를 친 경험이 있을것이다.
"내 로컬은 특별해"라는 말이 있듯이, 이 문제는 종종 개발 환경과 배포 환경의 미묘한 차이에서 비롯된다.
그래서 어떻게 쓰면되는데?
깃허브에 로컬에서 테스팅을 정상적으로 마친 코드를 푸시하자
깃허브에 코드 푸시. 우리의 코드가 어디에 있는지 Vercel에게 알려주는 절차이다.
나는 SvelteKit으로 만든 나의 홈페이지를 푸시하였다.
Vercel에 로그인하고, 프로젝트 연결하기
Vercel에 로그인하고, 새로운 프로젝트를 만들어. 여기서 깃허브 리포지토리를 연결하자
지원하는 프레임워크는, Next.js , SvelteKit, Nuxt.js 등이다..!
이후 Deploy 버튼을 누르면 자동으로 배포가시작되 뜨게된다.
이게끝?
끝이다. 이제 코드를 수정하고 커밋 후 푸시를하게되면 자동으로 반영되어서 배포까지 진행된다(!!)
환경변수 설정
Vercel에서 환경변수 설정하기
프로젝트 설정에서 환경변수(Environment Variables) 섹션에 접속한다.
물론 이 환경변수는 코드상에 환경변수선언이 모두 완료된 상태야한다!
나는 API키와 이메일 정보들을 환경변수에 등록해주었다.
커스텀 도메인 설정
나만의 도메인을 연결하려면 우선 도메인 판매업체 (gabia, cafe24 등)에서 도메인을 구매한 후
Project Settings의 Domain 섹션에 들어가면 다음과같이 뜬다
현재 faith6-sveltekit-homepage.vercel.app에다 내가 구매한 faith6.me 도메인을 연결해준 상태이다. 구매업체에서 별도의 설정을 조금은 해야한다만 한번 등록만하게되면 SSL 인증까지 자동으로 처리해주니 엄청편리하다.
서버리스 지원
또한 서버리스도 지원을해 다양한 풀스텍 라이브러리 (Next.js , SvelteKit, Nuxt.js 등)로 서버 로직을 구현하고 이를 외부에서 실행시킬 수 있다.
나는 서버로직이 실행될 지역을 한국으로 지정해주었다.
Cron Job
작업 스케줄러를 활용하여 해당 페이지에서 정기적으로 자동으로 실행되어야하는 스크립트를 작성하는법과 이를 적용시키는법까지 친절히 설명되어있다!
마치며..
지금까지 sveltKit기반 홈페이지를 Vercel을 사용해 아주 편리하게 자동배포기능을 활용해보았다.
세부 설정을 어떻게 하느냐에 따라 다양한 영역에서 자동화를 사용할 수 있다. 자신의 프로젝트에 맞춰서 연습해 보면 좋을 것 같다.
