Cloudflare Pages(및 Heroku)로 앱 배포

안녕하세요!

이 블로그 게시물의 영감은 제가 참석한 Bootcamp의 최종 프로젝트에서 나왔습니다. 그러나 그것은 코드에 관한 것이 아니라 앱 배포 경험과 내가 사용하게 된 재미있는 새 도구에 관한 것입니다!

프런트엔드에는 React를 사용하고 백엔드에는 Ruby on Rails를 사용하여 앱을 빌드했으며 두 개의 별도 저장소가 있습니다.

프런트엔드를 배포할 위치를 결정할 때 Netlify를 사용하고 싶었습니다. 나는 그것에 대해 좋은 소식을 들었고 내가 찾을 수 있는 대부분의 블로그 게시물은 이것이 좋은 옵션이라고 말했습니다.

저는 다음과 같은 플랫폼을 원한다는 것을 알았습니다.

이것이 내가 배포한 첫 번째 앱이므로 작업하기 쉬울 것입니다.

낮은 유지 관리.

이전에 사용하지 않은 것입니다(프로젝트 요구 사항의 일부).

저는 이미 Cloudflare를 통해 도메인을 등록했고 제안을 통해 Cloudflare Pages를 소개받았습니다(아직 베타 버전이지만 액세스를 요청할 가치가 있음).

액세스 권한이 있으면 Cloudflare 계정을 만들고 GitHub에 연결하는 것만큼 간단합니다. 배포하려면 프로젝트 생성을 선택하고 리포지토리를 선택해야 합니다. 설정의 두 번째 부분은 빌드 설정입니다. 꽤 자명합니다. 프레임워크를 선택하고 빌드 명령을 추가합니다.

아래 이미지는 수행할 작업을 표시합니다.



이를 설정하는 방법에 대한 자세한 내용은 아래 링크에서 설명서를 확인할 수 있습니다.

Getting started with Workers

전체 설정을 완료하는 데 몇 분 정도 걸립니다. 첫 번째 배포 후 변경 사항을 GitHub에 푸시하기만 하면 Cloudflare Pages가 나머지 작업을 수행합니다.

앱이 배포되면 사용자 지정 하위 도메인이 생기지만 앞서 언급한 것처럼 연결할 도메인이 있었습니다.

내 도메인을 사용하고 프런트엔드와 백엔드 모두에 HTTP 요청을 보낼 수 있도록 Cloudflare Workers를 설정했습니다.
작업자를 사용하면 웹사이트 방문자와 서버(이 경우 Heroku에 배포된 내 백엔드) 사이에 JavaScript를 추가할 수 있습니다.

작업자는 두 부분으로 구성됩니다.

예를 들어 다른 페이지로 이동하라는 요청과 같이 웹 사이트로 전송되는 모든 요청을 수신하는 이벤트 리스너입니다.

요청을 처리하도록 설정된 이벤트 처리기. 제 경우에는 Heroku 또는 Cloudflare Pages로 전송됩니다.

이 addEventListener는 작업자를 등록합니다.

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

이벤트 핸들러는 URI를 확인하여 요청이 백엔드로 가야 하는지 프런트엔드로 가야 하는지 알아냅니다. 내 Worker에서는 경로 이름을 확인하여 결정합니다.
어디로 가야할지 결정하면 호스트 이름을 다시 작성하여 목적지로 보냅니다.

/**
 * Determines if URL goes to the backend or not.
 * @param {URL} uri
 * @returns {boolean}
 */
function isBackendRoute(uri) {
  // ...
}

async function handleRequest(request) {
  try {
    const uri = new URL(request.url);
    if (isBackendRoute(uri)) {
      uri.hostname = TRAVEL_TIPS_BACKEND_HOSTNAME;
    } else {
      uri.hostname = TRAVEL_TIPS_FRONTEND_HOSTNAME;
    }
    let res = await fetch(rewriteURL(request, uri.toString()));
    return new Response(res.body, res);
  } catch (e) {
    return new Response(`ouch! hit a snag: ${e.message}`, {
      status: 500,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }
}

작업자의 작동 방식을 더 잘 이해하려면 다음을 읽어 보시기 바랍니다.

How Workers works

백엔드의 경우 Heroku는 Rails와 잘 작동했습니다. 다음 가이드의 지침을 따랐습니다.

Getting Started on Heroku with Rails 6.x

PostgreSQL 데이터베이스를 자동으로 생성했습니다.

Cloudflare Pages에 대한 최종 생각:

간편한 통합

설명서가 매우 간단함

UI가 사용자 친화적임

전반적으로 좋은 경험입니다. 다른 앱을 만들고 Cloudflare Pages로 배포할 수 있기를 기대합니다.

기회가 되시면 꼭 확인해보세요!