HAEJUN RECORDS

3부 Cloudflare Pages 빌드 설정과 도메인 통합

5 min read

Summary

  • Cloudflare Pages의 빌드 명령을 비우고 출력 디렉터리만 public으로 지정해, 빌드 없이 완성된 결과물만 서빙하게 만든다.
  • www와 apex 도메인을 Page Rules로 통합해 같은 콘텐츠가 두 주소로 중복 노출되는 것을 막는다.

실습 환경

이 시리즈는 macOS 기준으로 작성했다.

들어가며

앞선 두 편에서 로컬 빌드 아키텍처의 뼈대를 만들었다. 이제 Cloudflare가 그 결과물을 그대로 받아 서빙하도록 설정한다.

이 글에서는 Cloudflare가 빌드를 시도하지 않도록 설정을 바꾸고, www와 apex 도메인을 하나로 통합한다.

Fig 1. 완성된 public 배포와 도메인 통합 흐름
Fig 1. 완성된 public 배포와 도메인 통합 흐름

Cloudflare 설정

Worker 생성과 빌드 설정

Cloudflare 대시보드에서 Pages 프로젝트를 만들고 기존 Git 리포지토리를 선택한다.

  1. Cloudflare 대시보드에서 응용 프로그램 생성을 클릭한다.
  2. Pages를 배포하려고 하십니까를 선택한다.
  3. 기존 Git 리포지토리를 가져온다.
  4. 이전 단계에서 생성한 GitHub repository를 선택한다.
  5. 빌드 설정을 다음과 같이 수정한다.
    • 프로덕션 분기: v5
    • 빌드 명령: 완전히 비운다.
    • 빌드 출력 디렉터리: public
  6. 배포가 완료되면 개발 도메인에 접속해 확인한다.
Fig 2. Workers 및 Pages에서 응용 프로그램 생성
Fig 2. Workers 및 Pages에서 응용 프로그램 생성
Fig 3. 기존 Git 리포지토리 가져오기 선택
Fig 3. 기존 Git 리포지토리 가져오기 선택
Fig 4. GitHub 리포지토리 선택
Fig 4. GitHub 리포지토리 선택
Fig 5. Pages 배포 시작 화면
Fig 5. Pages 배포 시작 화면

도메인 구매

앞서 배포된 개발 도메인은 test-5f9.pages.dev다. 개인 블로그 도메인으로 삼기에는 부적절해서 Cloudflare에서 도메인을 구매했다.

  • 가격은 연간 10.46$ 이며 도메인마다 다르다.
Fig 6. Cloudflare Pages 빌드 설정
Fig 6. Cloudflare Pages 빌드 설정
Fig 7. Pages 프로젝트 배포 완료
Fig 7. Pages 프로젝트 배포 완료

도메인 통합

www와 apex 도메인이 따로 운영되면 같은 콘텐츠가 중복 노출되어 검색 엔진 최적화에 불리하다. 따라서 두 도메인을 하나로 통합한다.

  1. Cloudflare에서 Rules → Page Rules로 이동해 Page Rule 생성을 클릭한다.
  2. www.haejunhyun.com/* 접속 시 https://haejunhyun.com/$1로 Forwarding URL(301 리디렉션) 되도록 설정한다.
  3. 상태 코드는 301 - 영구 리디렉션으로 지정한다.
  4. 대상 URL은 https://haejunhyun.com/$1로 지정한다.
Fig 8. Page Rules 생성 화면
Fig 8. Page Rules 생성 화면
Fig 9. Page Rule 설정 화면
Fig 9. Page Rule 설정 화면
Fig 10. 프로덕션 배포 상태 확인
Fig 10. 프로덕션 배포 상태 확인

DNS 레코드 삭제 금지

리디렉션을 설정했더라도 DNS에서 www 레코드를 삭제하면 안 된다. 레코드가 없으면 리디렉션을 수행할 대상 자체가 사라진다.

마치며

Cloudflare의 빌드 명령을 비우고 public을 출력 디렉터리로 지정하면 로컬에서 완성한 결과물을 그대로 배포할 수 있다. www와 apex 도메인은 Page Rules의 301 리디렉션으로 통합한다.

Reference

Backlinks

Graph View