GitHub Actions를 이용한 CI/CD 파이프라인 구축 가이드

Cloudflare Pages 첫화면

1. 작업개요

  1. (작업목표) 로컬에서 작성된 Hugo 소스를 Github 리포지토리로 push하고, Github Action을 통해 빌드하여, 그 결과물을 Cloudflare Pages에 업로드
  2. (활용자원) Windows 11 pro, Hugo extended, Git, Github.com, Cloudflare.com

2. Cloudflare Pages 설정

2.1. 관리자 MFA 설정

  1. Profile → Access Management → Authentication
  2. Security Key Authentication, Mobile App Authentication, Email Authentication 중 선택 진행
  3. Mobile App Authentication 선택후 복구코드 반드시 백업 유지

2.2. (타기관에 등록된 Domain의) NameServer 등록

  1. Domains → Resistrations → 등록할 Domain Name 넣고 추가
  2. 추가된 Domain을 클릭하고 Overview를 클릭하면 NameServer 변경할 수 있는 방법이 안내
  3. 이 안내에 따라 Domain 구입기관에 등록되어 있는 Name Server 변경
  4. Cloudflare Domains에 등록한 Domain 클릭한 후, Overview를 클릭하여 NameServer 변경으로 통제권을 얻게 되었는지 확인
  5. DNS → Records 에 필요한 DNS Record를 등록

2.3. 프로젝트 생성

  1. Build → Compute → Workers & Pages
  2. Create Application 버튼 클릭 → Looking to deploy Pages? Get started 클릭하여 본격 설치 프로세스 시작
  3. Import an existing Git repository와 Drag and drop your files 선택 옵션
  4. Create a name for your project → Upload your project assets(보여 줄 웹사이트 소스)
  5. Success! Your project is deployed to Region: Earth 메시지 확인 후 임시 할당 주소를 브라우저에서 열어 테스트

2.4. Pages의 Custom Domain 설정

  1. 생성된 Pages 프로젝트 클릭
  2. Custom Domains → Set up Custom Domain → 사용할 Domain Name 입력 한 후에는 설정 방법이 안내
  3. 이 안내에 따라 도메인 등록 메뉴 중 DNS → Records 에 CNAME 등록
  4. Build → Compute → Workers & Pages → Custom Domains 에서 활성화 확인
  5. SSL/TLS → Edge Certificates → Status 값이 “Pending Validation(TXT) 등이 나오면 인증서 발급 중이므로 대기 필요
  6. 활성화되었음에도 Browser 접속에 문제가 있다면 Pages에 연결된 도메인만 Proxy status 값을 DNS only로 변경

3. Github Action 연동

  1. Github Actions 워크플로우 작성

     ####### 프로젝트루트/github/workflows/deploy.yml
 name: Deploy Hugo site from Github to Cloudflare Pages

 on:
   push:
     branches:
       - main

 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: 'latest'

       - name: Build Hugo site
         run: hugo --minify

       ####### 테스트 중
       # - name: Run HTMLProofer tests
       #   uses: chabad360/htmlproofer@v1
       #   with:
       #     directory: ./public
       #     arguments: --check-html --empty-alt-ignore

       - name: Upload to Cloudflare Pages
         uses: cloudflare/pages-action@v1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: my-hugo-blog
           directory: ./public

  2. push하여 Github에 업로드

  3. GitHub 리포지토리 이동 → Settings → Secrets and variables → Actions → Secrets탭

  4. New repository secret 클릭

  5. GitHub 리포지토리 → Actions → deploy.yml의 name에 등록한 이름 클릭 → Adding Github Action 클릭 → Rerun Jobs 클릭

  6. 다시 push하여 모니터링

  7. 추가적으로 Cloudflare → Build → Compute → Workers & Pages → View deployments 확인

4. Cloudflare 권한 발급

4.1. Cloudflare API Token 발급

  1. 프로필 아이콘 클릭 → Profile → API Tokens
  2. Create Token - Create Custom Token
    • (Token name) 기능을 명확히 설명하는 명칭
    • (Permissions) Account → Cloudflare Pages → Edit
    • (Account Resources) Inside → Cloudflare Pages 관리계정
    • Continue to summary 클릭 → Create Token 클릭
    • …API token was successfully created.

4.2. Cloudflare Account ID 검색

  1. 로그인 후 계정 대시보드 접근
  2. 도메인 중간 32자리 영문숫자 조합

【참고자료】