클라우드플레어 페이지(Cloudflare Pages)의 신규 애플리케이션(프로젝트)을 만드는 방법 정리.
클라우드플레어 페이지(Cloudflare Pages)란?
클라우드플레어 페이지(Cloudflare Pages)는 JAM 스택의 웹 애플리케이션을 호스팅 해주는 PaaS(Platform as a Service) 서비스이다. 무료 플랜에서도 상당히 넉넉하게 기능을 제공하고 있어서 현재 Trindex 앱의 웹 서버 용도로 사용 중인 서비스이기도 하다.
클라우드플레어 페이지 신규 애플리케이션 생성 방법
터미널에서 생성하는 방법 1: 기본 템플릿으로 시작할 경우
터미널을 통해 클라우드플레어 페이지 신규 애플리케이션을 생성하려면 NPM이 설치되어 있어야 한다. 만약 설치되지 않은 환경이라면 먼저 다음 링크를 참고하자.
NPM이 설치된 환경이라면 터미널을 열고 다음 커맨드를 입력한다.
npm install -g wrangler@latestWrangler는 Cloudflare Workers와 Pages의 프로젝트를 관리 및 배포해 주는 CLI 도구이다. @latest 옵션으로 최신 버전을, -g 옵션으로 글로벌 타깃으로 설치하도록 했다. 설치가 완료되면 다음 커맨드를 입력,
wrangler -v아래 이미지에서처럼 버전이 출력된다면 이상 없이 설치된 것이다.
이제 설치된 wrangler를 사용해 보자. 다음을 입력한다.
wrangler login웹 브라우저가 팝업 되면서 클라우드플레어로의 로그인을 요구하는데, 자신의 계정 아이디와 비밀번호를 입력하면 다음과 같은 화면을 만날 수 있다.
Wrangler로 클라우드플레어 계정을 컨트롤할 수 있도록 허락할 것인지 인증하는 절차이다. 파란색 [Allow] 버튼을 눌러주면 인증 처리가 된다. 시간제한이 있기 때문에 만약 타임아웃에 걸려 실패했다면 로그인부터 다시 진행해 주어야 한다.
wrangler whoami다시 터미널로 돌아와서 위 커맨드를 입력해 보자.
인증에 성공했다면 로그인 상태와 토큰, 그리고 허용된 권한에 대한 정보 등을 확인할 수 있다.
npm create cloudflare@latest 프로젝트명이제 위 커맨드를 입력해서 클라우드페이지의 신규 애플리케이션 생성을 시작한다. 이때 다음 세 가지를 주의해야 한다.
- 프로젝트 폴더가 생성될 경로에서 커맨드를 입력해야 한다.
- 프로젝트명으로는 영어 소문자, 대시(-), 그리고 숫자만 사용이 가능하다.
- 사용된 프로젝트명으로 URL 주소가 결정되는데 동일명이 존재할 경우 URL 주소에는 임의의 문자들이 추가된다.
입력을 마치면 create-cloudflare 설치를 진행할 것인지를 묻는다. [y]를 입력해 준다. (n 입력 시 진행이 종료됨)
다음으로 애플리케이션의 기본 템플릿을 설정해 줘야 한다. 풀스택 애플리케이션 작업을 위해 위 화면과 같이 [Framework Starter]를 선택해 주었다.
사용할 프레임워크에 대한 설정까지 해 주어야 한다. 선택지는 위 화면 참고.
아직 끝난 게 아니다. 그다음으로 [JavaScript]를 선택해 주었다.
필요한 패키지가 더 있나 보다. [y]를 입력하여 설치를 진행.
프로젝트가 git으로 관리되기를 원하는지를 묻는다. git으로 버전 관리를 할 계획이면 [Yes] 선택.
마지막 질문이다. 생성 완료 시 바로 배포할 것인지를 묻는다. 보통은 아직 작업된 것이 없으므로 No를 선택하겠지만 지금은 어떤 식으로 배포되는지 그 결과물을 바로 확인하기 위해서 [Yes]를 눌렀다.
여기까지 선택을 마치면 신규 애플리케이션 생성 및 배포 작업을 진행하게 되고 마지막에 다음과 같이 웹 브라우저가 팝업 된다. 배포된 결과물을 보여주는 것이다.
기본 템플릿이 적용되어 뭔가 채워져 있다. 그리고 URL 주소를 보면 프로젝트명으로 사용한 test-cf 이후로 문자열 -33z가 추가된 것 또한 볼 수 있는데, 그렇기 때문에 마음에 들지 않는 URL 주소로 생성되는 것을 방지하기 위해서는 사전에 동일한 프로젝트명이 있는지를 확인해야 한다. 이 부분은 아래 '웹 메뉴만을 사용해서 생성하는 방법'에서 프로젝트명 입력 단계를 활용하면 된다.
클라우드플레어 계정 페이지에서도 신규 애플리케이션이 잘 등록된 것을 확인할 수 있다.
기타 참고 사항
- Wrangler 설치 후 추가로 설치된 create-cloudflare와 create-vite는 ~/.npm/_npx/ 하위 경로에 설치된 것으로 확인되었다. 이는 지정된 프로젝트에 cloudflare 패키지와 vite 패키지를 설치하는 과정에서 필요한 임시 파일로 추정된다.
- 애플리케이션으로 배포되는 내용은 로컬의 프로젝트 폴더 내 dist 폴더의 내용이다.
- 해당 프로젝트가 의존하는 패키지들은 로컬 프로젝트 폴더 내 node_modules 폴더에서 별도 관리되는 것으로 보인다.
터미널에서 생성하는 방법 2: 기본 템플릿 외 다른 템플릿으로 시작할 경우
방법 1 과정에서 선택할 수 있는 기본 템플릿 외에 다른 템플릿이 필요한 경우도 있을 것이다. 이때에는 다음과 같은 과정으로 신규 애플리케이션을 생성하면 된다. 참고로 예시로 든 케이스는 Vite + Vanilla 템플릿인데, HTML, CSS, JavaScript로 구성되는 가장 기본적인 형태에 Vite를 사용하는 템플릿이다. 우선 방법 1의 wrangler 설치와 인증까지는 동일하게 진행한다. 그런 다음,
npm create vite@latest 프로젝트명 -- --template vanilla프로젝트를 폴더를 만들 경로에서 위 커맨드를 입력해 준다.
cd 프로젝트명이후 생성된 프로젝트의 루트 폴더로 이동해서
npm install위 커맨드를 입력하여 의존성이 있는 추가 패키지들을 설치해 준다. 방법 1에서는 자동으로 진행되는 부분이지만 여기서는 직접 해야 한다.
npx wrangler pages project create 프로젝트명이제 wrangler를 이용해 클라우드플레어 페이지에 동일한 이름의 신규 프로젝트를 생성해 주고,
package.json 파일을 열어 위 화면에서 빨간 네모로 표시한 부분처럼 수정 및 추가를 해 준다.
npm run deploy이후 다시 터미널로 돌아와 위 커맨드를 입력하면,
빌드와 배포가 진행되는 것을 볼 수 있다.
완료 후 클라우드플레어 페이지의 대시보드에서 프로젝트 배포 상태를 확인해 보는 것으로 문제없이 연동되고 있음을 체크하면 된다.
웹 메뉴에서 생성하는 방법
다음은 CLI 없이 클라우드플레어 페이지의 웹 메뉴만을 사용해서 애플리케이션을 생성하는 방법이다. CLI에 익숙하지 않은 사람에게는 간편한 방법일 수 있으나 생성 후 CLI가 익숙해졌을 때 기존 프로젝트와 연동하고 싶어도 불가능하다는 단점이 있다.
우선 클라우드플레어에 로그인을 하고 왼쪽 사이드 메뉴에서 [Workers & Pages] 메뉴를 선택한다.
그러면 Overview 페이지가 뜨는데, 해당 페이지에서 [Create application] 버튼을 클릭해 준다.
Create an application 페이지는 Workers와 Pages 탭으로 구성되어 있는데, [Pages] 탭을 선택해 준다. Pages는 HTML 등의 웹 애플리케이션 요소들을 배포할 수 있는 공간이라 할 수 있고, Workers는 웹 애플리케이션의 빌드 및 배포를 자동화할 수 동적 수행 코드 덩어리라고 보면 된다.
이후 하단에 있는 [Upload assets] 버튼을 클릭해 주고,
[Project name] 항목에 프로젝트명을 입력해 준다. 프로젝트명은 배포되는 사이트 주소에 영향을 미치는데, https://프로젝트명.pages.dev 형태로 주소가 자동 할당되니 이를 고려해서 입력하면 된다. 입력이 완료되었으면 [Create project] 버튼을 클릭.
마지막으로 [Upload your project assets:] 항목에 미리 준비해 둔 소스 폴더를 드래그 & 드롭하여 업로드를 해준다. 업로드가 완료되었을 때 [Deploy site] 버튼까지 클릭해 주면 신규 애플리케이션을 만들고 초기 배포하는 작업이 완료.
[Continue to project] 버튼을 클릭하면 Overview 화면으로 되돌아갈 수 있다.
추가 사항
무료 플랜의 빌드 제한
2024년 10월 현재 클라우드플레어 페이지 무료 플랜의 빌드 횟수는 한 달에 500번으로 제한하고 있다. 여기서 말하는 빌드는 웹 메뉴를 통해 수동으로 배포하는 것도 포함되는 것으로 확인된다. 또, 20분 내로 빌드에 성공하지 못하면 작업이 중단되고 실패 처리된다고 한다.
무료 플랜의 용량 제한
2024년 10월 현재 클라우드플레어 페이지의 무료 플랜에서 저장 공간을 얼마까지 제공하는지에 대한 정보는 확인되지 않는다. 다만 위 스샷에 나온 것과 같이 파일 하나당 최대 사이즈는 25MB, 파일 개수는 2만 개까지 허용한다는 것을 볼 수 있다. 이 정도면 개인 프로젝트를 돌리기에는 넉넉한 편이 아닐까.