해피 테크로그

Vercel에 사이트를 배포하면 처음에는 프로젝트이름.vercel.app 주소가 생긴다. 테스트할 때는 충분하지만, 실제 서비스를 운영하려면 기억하기 쉬운 나만의 도메인을 연결하고 싶어진다. 이 글에서는 도메인의 DNS를 Cloudflare에서 관리하면서 Vercel 프로젝트에 연결하는 방법 을 처음부터 끝까지 따라 해본다. 이 글에서 완성할 구성 도메인 등록업체 → Cloudflare 네임서버 및 DNS 관리 → Vercel에 배포된 사이트 예시는 example-site.com 을 사용한다. 실제 작업에서는 자신의 도메인으로 바꾸면 된다. 가장 먼저 알아둘 점 Cloudflare의 주황색 구름, 즉 프록시 기능을 꼭 켜야 하는 것은 아니다. Vercel은 이미 자체 CDN과 보안 기능을 제공한다. Vercel 공식 안내는 Cloudflare를 유지해야 한다면 회색 구름인 DNS only 로 사용하는 것을 권장한다. 이 글도 이 구성을 기본으로 설명한다. 목차 준비물과 연결 구조 이해하기 Cloudflare에 도메인 추가하기 도메인의 네임서버 변경하기 Vercel 프로젝트에 도메인 추가하기 Cloudflare DNS 레코드 입력하기 www 리디렉션과 SSL 확인하기 자주 발생하는 오류 해결하기 자주 묻는 질문 FAQ 1. 시작하기 전에 준비할 것 Vercel에 정상 배포된 프로젝트 소유하고 있는 커스텀 도메인 해당 도메인을 추가할 Cloudflare 계정 도메인을 구입한 업체의 네임서버 변경 권한 도메인을 GoDaddy, Namecheap, Squarespace Domains 같은 업체에서 샀더라도 괜찮다. 도메인을 다른 곳으로 이전할 필요 없이 네임서버만 Cloud...

Codex나 Claude Code가 웹사이트를 만들어 주었는데, 그다음 무엇을 해야 할지 모르겠다면 이 글만 천천히 따라오면 됩니다. Git을 처음 듣는 사람도 이해할 수 있도록, 내 컴퓨터에 있는 프로젝트가 실제 인터넷 주소가 되는 과정을 처음부터 설명합니다. 요즘은 코딩을 몰라도 자연어로 프로그램을 만들 수 있습니다. “이미지를 변환하는 웹사이트를 만들어줘”, “회원가입이 있는 예약 페이지를 만들어줘”라고 요청하면 AI가 파일을 만들고 화면까지 완성해 줍니다. 그런데 마지막에 예상하지 못한 벽을 만납니다. “그래서 이걸 다른 사람은 어떻게 접속하지?” 내 컴퓨터에서만 열리는 웹사이트는 아직 세상에 공개된 서비스가 아닙니다. 다른 사람이 주소를 입력해 접속할 수 있도록 인터넷에 올리는 과정이 필요한데, 이것을 배포(Deployment) 라고 합니다. 배포를 검색하면 Git, GitHub, Repository, Commit, Push, Build, Vercel, 환경변수 같은 단어가 한꺼번에 등장합니다. 비개발자에게는 코딩보다 이 용어들이 더 어렵게 느껴질 수 있습니다. 하지만 처음부터 모든 기술을 공부할 필요는 없습니다. 각 도구가 무슨 역할을 하는지만 생활 속 물건에 비유해 이해하면 됩니다. 이 글에서 다루는 내용 1. 배포란 무엇인가 2. Git은 무엇인가 3. GitHub는 무엇인가 4. Repository·Commit·Push 뜻 5. 내 프로젝트에 맞는 배포 방법 6. HTML 사이트를 Netlify로 배포하기 7. Next.js를 GitHub와 Vercel로 배포하기 8. 환경변수와 API 키 9. 배포 오류 해결하기 10. AI에게 배포 준비를 맡기는 프롬프트 1. 배포는 무엇인가? 배포는 어렵게 말하면 프로그램을 운영 환경에 공개하는 일입니다. 쉽게 말하면 내 컴퓨터 안에만 있던 웹사이트를 인터넷에 올려 누구나 주소로 접속할 수 있게 만...

Next.js를 EC2에 무중단 배포하는 방법은 여러 가지가 있는데, 규모와 복잡도 따라 추천이 달라져요. 크게 3가지 접근을 설명하고, 실무에서 가장 많이 쓰는 Blue-Green + Nginx 방식을 정리했습니다. PORT 3000 · ACTIVE ⇄ PORT 3001 · STANDBY → 헬스체크 통과 후 Nginx가 이 둘을 서로 바꿔치기합니다. 무중단 배포의 핵심은 간단합니다. 새 버전을 완전히 띄운 뒤, 준비가 끝난 것을 확인하고 나서 트래픽을 넘긴다. EC2 위에서 이걸 구현하는 방법은 크게 세 가지가 있는데, 규모에 따라 선택지가 달라집니다. 방식 난이도 무중단 보장 적합한 규모 PM2 cluster reload 낮음 준수함 (완벽 X) 단일 인스턴스, 소규모 Blue-Green + Nginx 중간 확실함 단일~소수 인스턴스 CodeDeploy + ALB Blue-Green 높음 확실함 Auto Scaling Group, 다중 인스턴스 PM2 reload : 같은 서버 안에서 워커를 하나씩 순차 재시작. 설정이 제일 간단하지만, 빌드 산출물 자체가 깨지거나 새 코드가 실행 중 프로세스와 충돌하면 순간 에러가 날 수 있어요. Blue-Green + Nginx : 포트 두 개(3000/3001)를 번갈아 쓰면서 Nginx가 트래픽을 스위칭. 롤백도 config 한 줄만 되돌리면 되니 실...