본문 바로가기
프론트엔드

CloudFlare 배포 및 해제 (CloudFlare Pages 정적 사이트)

by 느바 2025. 4. 26.
반응형

CloudFlare 배포 및 해제 (CloudFlare Pages 정적 사이트)

 

배포 방법

1. CloudFlare 사이트( https://www.cloudflare.com/ )에 들어가서 회원가입 후 로그인을 하면 아래와 같은 화면이 열린다.

 

2.왼쪽 메뉴에서 'Compute (Workers)' 메뉴의 'Workers & Pages' 메뉴를 선택 한 후, 가운데 화면에서 'Pages' 탭을 선택한다.
'Connect to Git' 버튼을 클릭하여 Git 을 연결해서 배포하는 방식을 선택한다.
(이후부터는 GitHub 저장소를 연결해서 배포하는 방법이다.)

 

3. 'GitHub ' 탭을 선택하고 가운데 'Connect Github' 버튼을 클릭한다.

 

4. 'only select repositories'를 선택 후 'install 인증' 버튼을 클릭한다.

 

5. 배포할 저장소를 선택 후 'Begin setup' 버튼을 클릭한다.

 

6. 빌드와 배포 설정을 한다.
① 프로젝트 이름을 적는다.
CloudFlare로 배포하게 되면 '프로젝트 이름.pages.dev' 로 배포가 된다. 이점을 유념해서 'Project name'을 적는다.

② 저장소 브랜치 이름을 적는다.

③ Framework preset을 적는다.

나의 경우 React+vite로 만들었기 때문에 'React (vite)'를 선택했고, 선택하면 'Build Command'와 'Build output directory'가 자동채워진다.

 

7. 빌드와 배포 설정 화면에서 맨 아래 'Environment variable(advanced)' 를 클릭 후 'value name'에 대문자로 'NODE_VERSION'을 입력하고 'value'에 노드버전을 입력한다. 'node -v'로 노드 버전을 알 수 있다.
마지막으로 'Save and Deploy' 버튼을 클릭한다.

 

8. 배포가 성공하면 다음과 같은 화면이 뜬다. 

 

배포 해제(삭제) 방법

  1. Cloudflare 대시보드 접속
  2. 좌측 메뉴에서 Pages 클릭
  3. 프로젝트 리스트에서 해당 프로젝트 클릭
  4. 우측 상단 Settings → 아래로 스크롤해서 "Delete this project" 클릭
  5. 확인 후 삭제

'프론트엔드' 카테고리의 다른 글

보안 개인정보 보호 noreferrer, noopener  (1) 2025.05.02
AWS 배포  (1) 2025.04.26
배포 플랫폼 비교 Cloudflare, Vercel, AWS, Netlify  (0) 2025.04.20
두 라인 사이에 색 채우기 Chart.js  (1) 2025.04.13
Pretendard 폰트  (0) 2025.04.13