Cloudflare Pages은 최근에 공개 베타로 출시되었으며 첫 번째 시도를 하게 되어 매우 기쁩니다. 이 자습서에서는 Cloudflare Pages를 사용하여 Nuxt.js 애플리케이션을 배포하는 단계별 프로세스를 안내합니다.

Cloudflare 페이지가 무엇인가요?

Pages은 프런트엔드 애플리케이션을 배포하기 위한 플랫폼입니다. 매우 빠르고 항상 최신 상태이며 GitHub 계정에서 직접 배포됩니다.

시작하기

Nuxt.js 웹사이트를 만드는 것부터 시작하겠습니다. 튜토리얼의 핵심이 Cloudflare Pages가 되기를 원했기 때문에 최소한의 데모로 진행했습니다. 새 Nuxt.js 앱을 설정하려면 다음 명령을 사용해야 합니다.

npx create-nuxt-app cloudflare-demo 
or 
yarn create nuxt-app cloudflare-demo 

어떤 UI 프레임워크, Linter, 사용하려는 테스트 프레임워크와 같은 몇 가지 질문에 답하라는 메시지가 표시됩니다. 모든 것을 건너뛰고 처음부터 CSS를 작성하는 대신 선택한 UI 라이브러리로 Tailwind CSS을 선택합니다.
이 작업을 수행하면 모든 종속 항목이 설치되고 이제 프로젝트를 사용할 수 있습니다.
로컬 환경을 시작하고 코딩을 시작하려면 다음을 실행하십시오.

cd cloudflare-demo 
yarn dev 

이제 응용 프로그램을 localhost:3000에서 사용할 수 있습니다!

데모 디자인

이제 애플리케이션을 실행하면 그냥 배포하는 대신 Nuxt에서 기본적으로 랜딩 페이지 템플릿을 가져옵니다. 배포하기 전에 약간 조정해 봅시다.
Nuxt.js에 대해 자세히 알아보려면 I wrote a getting started guide on it.
이 데모에서는 기존pages/index.vue을 약간 수정합니다.

<template>
  <div>
    <div>
      <img src="https://giftegwuenu.com/deployment-with-cloudflare-pages/~assets/cloudflare.svg" alt="Cloudflare Pages" width="350">
      <h1>
        Deploy your Jamstack Website with <a href="https://pages.cloudflare.com/"> Cloudflare Pages.</a>
      </h1>
    </div>
    <div>
      <a href="https://pages.cloudflare.com/">
        Learn More
      </a>
    </div>
  </div>
</template>

그리고 스타일에 대한 몇 가지 변경 사항:

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family:
   -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: hsl(0, 30%, 10%);
  letter-spacing: 1px;
}
</style>

All code snippets can be found on the GitHub Repo.

Cloudflare 페이지에 배포

이제 재미있는 부분을 살펴보겠습니다. 방금 생성한 앱을 배포하려면 간략하게 설명할 몇 가지 단계를 따라야 합니다. 먼저 아직 페이지 계정이 없는 경우 페이지 계정이 필요합니다you can create yours now..

다음으로 새 프로젝트를 만들 수 있습니다.



프로젝트 만들기 버튼을 클릭하면 GitHub 계정을 연결할 수 있는 페이지로 연결됩니다. GitHub에 연결한 후 표시된 리포지토리 목록에서 배포할 프로젝트를 선택할 수 있습니다.

GitHub에서 프로젝트를 선택한 후 커밋이 트리거될 때 Cloudflare가 웹사이트를 빌드하기 위해 설정된 명령을 사용하는 것을 알 수 있도록 빌드 명령을 설정해야 합니다.

pages.dev에서 호스트 이름으로 사용하려는 사용자 지정 이름을 설정할 수 있으며 프로덕션 분기를 선택할 수도 있습니다. 이 경우 마스터 분기입니다.

또한 빌드 설정을 설정해야 합니다. 사용 중인 프레임워크를 찾지 못하거나 이 중 어느 것도 사용할 필요가 없다고 느끼는 경우 더 쉽게 선택할 수 있는 다양한 프레임워크 사전 설정이 있습니다. 그런 다음 직접 할 수 있습니다. 제공된 필드에 명령을 입력하십시오. 이를 위해 Nuxt.js 사전 설정을 사용하고 기본 루트 디렉터리를 설정하거나 환경 변수를 추가해야 하는 경우 여기에서 수행할 수도 있습니다.



아무것도 필요하지 않으므로 저장 및 배포 버튼을 클릭하여 첫 번째 빌드 프로세스를 시작하겠습니다. 진행 중인 배포의 현재 진행 상황을 볼 수 있는 배포 로그 및 세부 정보가 있는 페이지로 리디렉션됩니다.



빌드가 완료되고 성공하면 배포된 앱의 버전을 볼 수 있는 배포 URL을 얻습니다. 이것은 빨랐고 이 스크린샷은 내가 만든 첫 번째 빌드가 아니지만 첫 번째 빌드는 배포하는 데 약 7초가 걸렸고 저는 그것에 매우 감명받았습니다.

너는 어떤 다른 일을 할 수 있니?

웹 사이트에 대한 사용자 정의 도메인을 설정할 수 있으며 무엇이든 변경해야 하는 경우 배포 설정에 액세스할 수도 있습니다.

자원

Cloudflare Pages Docs
A first look at Cloudflare Pages

이 튜토리얼의 비디오 버전을 선호하는 경우. 제 채널에서 하나 만들어 봤어요 보시고 구독 부탁드려요 😁