umnoni

Astro + Netlify + Cloudflare로 기술 블로그 배포하고 구글 애드센스 연동하기

#Astro #Netlify #Cloudflare #AdSense #Devlog

블로그에 구글 애드센스(AdSense)까지 연동해 보기로 했다.

1. 커스텀 도메인 구매: 왜 Cloudflare인가?

애드센스 승인을 위해서는 *.netlify.app 같은 무료 하위 도메인이 아닌, 나만의 2차 도메인(.com 등)이 필요하다. (이번에 umnoni.com을 구매했다!)

여러 도메인 업체를 비교해 보았는데, 결론은 Cloudflare 였다.

  • 가비아, 호스팅케이알 등 국내 업체는 가격이 많이 올라 가성비가 떨어졌다.
  • 네임칩(Namecheap) 등은 첫해 프로모션은 싸지만 2년 차부터 갱신 비용이 비싸다.
  • Cloudflare 는 갱신 시에도 마진 없이 도매가(약 $10.49/년)를 투명하게 유지하므로 장기적으로 유지비를 방어하기에 가장 유리하다.

2. 배포 플랫폼 선정: 왜 Vercel이 아닌 Netlify인가?

처음에는 프론트엔드 생태계에서 가장 친숙한 Vercel에 배포하려고 했다. 하지만 치명적인 문제가 있었다. Vercel의 무료(Hobby) 티어는 상업적 이용을 엄격하게 금지 하기 때문에, 애드센스 같은 광고를 달면 약관 위반으로 계정이 정지될 수 있다.

반면 Netlify의 무료(Starter) 티어는 개인 사이트의 상업적 이용이 가능 하다. 따라서 안전하게 애드센스를 달기 위해 Netlify를 배포 플랫폼으로 최종 결정했다.

3. Netlify 배포 및 404 에러 해결

Github 리포지토리를 Netlify에 연동하여 자동 배포 환경을 구성했다. 이때 첫 배포 후 사이트에 들어갔더니 “Page not found (404)” 에러 화면이 떴다. 이는 Netlify가 빌드된 결과물을 어디서 찾아야 할지 몰라서 발생하는 흔한 문제다.

  • 해결 방법: Netlify 대시보드의 Projects 설정에서 Deploys - Deploy settings - Build settings 로 들어가 Configure을 눌러 Build command를 npm run build로, Publish directory를 dist로 변경 한 뒤 다시 빌드(Trigger deploy)하면 정상적으로 화면이 렌더링된다. (Astro나 Vite 기반 프로젝트는 빌드 결과물이 dist 폴더에 담기기 때문이다.)

4. Cloudflare 도메인과 Netlify 연결 (DNS 설정)

이제 구매한 도메인과 Netlify 서버를 연결할 차례다.

  1. Netlify 대시보드의 Domain management에서 커스텀 도메인(umnoni.com)을 추가한다.
  2. Cloudflare 대시보드의 DNS 레코드 메뉴에 들어가서 다음 두 가지를 추가한다.
    • A 레코드 / 이름: @ / IPv4 주소: 75.2.60.5 (Netlify 고정 IP)
    • CNAME 레코드 / 이름: www / 대상: 발급받은 Netlify 임시 도메인
  3. 가장 중요한 주의사항: 초기 SSL 인증서 발급을 위해 Cloudflare의 프록시 상태(주황색 구름 아이콘)는 눌러서 회색(DNS only) 으로 꺼두어야 한다. Netlify 자체 CDN과 충돌을 막기 위해 이후에도 계속 꺼두는 것이 권장된다.

설정을 마치고 조금 기다리면 Netlify 하단의 HTTPS 섹션에서 Let’s Encrypt SSL 인증서 발급이 완료된다. 브라우저 주소창에 자물쇠 마크가 뜨면 성공이다.

5. 구글 애드센스 연동 및 소유권 확인

안전한 HTTPS 접속까지 확인했다면, 구글 애드센스에 사이트를 추가하고 소유권을 증명해야 한다.

1) 애드센스 스크립트 추가 Astro의 레이아웃 파일 <head> 태그 영역에 구글이 제공한 스크립트를 삽입한다.

<head>
  <script
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-본인아이디"
    crossorigin="anonymous"
  ></script>
</head>

2) ads.txt 파일 추가 프로젝트의 public 폴더 최상단에 ads.txt 파일을 만들고 애드센스에서 제공한 한 줄짜리 코드를 넣는다. Astro는 public 폴더에 에셋을 넣으면 빌드 시 최상단(root) 경로로 알아서 복사해 주므로 관리가 편하다.

참고: 애드센스 화면에 ‘메타 태그’를 추가하라는 옵션도 있지만, 위 두 가지(스크립트 삽입, ads.txt)를 완료했다면 메타 태그는 굳이 추가하지 않아도 정상적으로 소유권 확인이 된다.

3) GDPR 동의 메시지 (유럽 접속자용) 검토 요청 과정에서 유럽(EEA) 접속자를 위한 쿠키 수집 동의 창 설정 안내가 뜬다. 구글 인증 CMP를 사용하여 표준적인 ‘3가지 선택사항(동의, 동의하지 않음, 옵션 관리)‘이 포함된 메시지를 생성하고 제출하면 깔끔하게 처리된다.

모든 설정을 마치고 애드센스 검토 요청 을 눌렀다. 애드센스 합격 메일을 기다리면 된다!