Published on

10단계: Vercel 배포와 환경변수, GA 연동 전략

Vercel 배포와 환경변수, GA 연동 전략

Pliny는 Vercel과 최적화된 호환성을 갖고 있으며, 배포 및 분석 연동이 매우 간편합니다.

10-1. Vercel 배포 절차 요약

  1. GitHub에 프로젝트 Push
  2. https://vercel.com 접속
  3. "New Project" → 저장소 선택
  4. Framework: 자동으로 Next.js 감지
  5. 기본 설정 그대로 배포 진행

→ 자동 배포 URL 예시: https://your-site.vercel.app

10-2. .env 환경변수 구성

NEXT_PUBLIC_SITE_URL=https://www.poten.co.kr
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
  • NEXT_PUBLIC_ 접두사가 있어야 클라이언트 접근 가능
  • vercel.com > Settings > Environment Variables에서 등록

10-3. Google Analytics 연동

  1. GA4 속성 생성
  2. 측정 ID (G-XXXXXX) 복사
  3. .env에 NEXT_PUBLIC_GA_ID 추가
  4. Pliny 내부 구성:
// lib/analytics/index.ts
export const GA_ID = process.env.NEXT_PUBLIC_GA_ID

export const pageview = (url) => {
  window.gtag('config', GA_ID, { page_path: url })
}
  • _app.tsx에서 router 이벤트와 함께 호출됨

10-4. Custom Domain 연결

  • Vercel > Project > Settings > Domains
  • poten.co.kr 등 도메인 입력
  • DNS 가이드를 따라 A 레코드 또는 CNAME 설정
  • Vercel이 자동으로 SSL 인증서 발급

10-5. OG 이미지 및 SEO 메타 설정

  • siteMetadata.images 필드에 대표 이미지 URL 입력
  • Open Graph 태그 (og:image, twitter:image) 자동 삽입
  • /public/og-default.png 파일을 기본 OG 이미지로 활용 가능

요약

  • Vercel은 GitHub 연동만으로 Next.js 배포 가능
  • .env 설정은 Vercel 대시보드에서 관리
  • GA4 ID 연동 시 페이지뷰 자동 수집 가능
  • 도메인 설정, OG 이미지 반영, SEO 구조 모두 자동화됨

심화학습

Q1. Vercel에서 환경변수를 잘못 등록했을 때 발생할 수 있는 오류 유형과 디버깅 방법은?

A: undefined 접근 오류, 빌드 시 process.env.X 관련 경고 발생 등입니다. Vercel 환경 변수 Key 오타, NEXT_PUBLIC_ 누락 여부, 빌드 로그 확인이 필요합니다.

Q2. GA 연동 후에도 페이지뷰가 수집되지 않는 경우 어떤 순서로 확인해야 할까?

A: GA 측정 ID 오타 확인 → .env 반영 여부 → GA_ID가 undefined인지 로그 확인 → gtag.js가 로딩되는지 브라우저 Network 확인 순으로 점검합니다.

Q3. 커스텀 도메인 적용 후 OG 이미지가 반영되지 않는다면 어떤 캐시나 설정 문제를 의심할 수 있을까?

A: SNS 플랫폼의 캐시(페이스북/카카오)는 OG 이미지를 한번 가져가면 캐시됨. 변경 후 [Sharing Debugger] 같은 툴로 강제 캐시 갱신하거나, 이미지 URL에 쿼리스트링을 붙여 우회합니다.