Computer >> 컴퓨터 >  >> 프로그램 작성 >> Redis

Cloudflare 및 Upstash Redis에서 Remix로 초고속 웹사이트 제공

웹 사이트나 웹 앱을 개발할 때 속도 최적화에만 시간을 할애하는 사람은 없습니다. 문제는 빠른 웹사이트가 엄청나게 중요하고 성능이 종종 성공의 결정적인 요인이라는 것입니다. Remix Run과 같은 웹 프레임워크는 구성을 최소("제로 구성")로 유지하면서 웹 성능을 최적화한다는 목표로 만들어졌습니다. 요즘에는 빠른 속도를 달성하는 데 도움이 되는 수십 가지 프레임워크를 사용할 수 있습니다.

유감스럽게도 최고의 웹사이트 로드 시간은 앱의 데이터베이스도 번개처럼 빠르지 않는 한 거의 쓸모가 없습니다.

오늘은 우수한 웹사이트 로딩 속도를 달성하고 이를 최고의 데이터베이스 성능과 결합하는 방법을 살펴보겠습니다. Upstash Redis 글로벌 데이터베이스.

글로벌 데이터베이스를 사용해야 하는 이유

대부분의 개인은 웹 사이트를 온라인으로 배포할 때 CDN(콘텐츠 전송 네트워크)을 사용합니다. CDN(콘텐츠 전송 네트워크)은 서버의 글로벌 네트워크입니다. 웹 사이트 파일은 가장 가까운 지리적 위치에서 클라이언트에 캐시되고 제공될 수 있기 때문에 CDN은 단일 서버 시스템보다 훨씬 짧은 대기 시간을 제공합니다. 이렇게 하면 웹사이트가 전 세계에서 빠르게 로드됩니다. Upstash의 글로벌 데이터베이스에 대해 이야기할 때 동일한 CDN 개념이 Redis 데이터베이스에 적용됩니다. 글로벌 데이터베이스를 사용하면 데이터베이스 복제본이 전 세계 여러 지역에 분산됩니다. 이제 클라이언트는 가장 가까운 지역으로 라우팅되며 최대 <10ms의 지연 시간을 경험합니다.

시작하기

이미 많은 것을 약속했으므로 이제 전체가 실제로 어떻게 작동하는지 살펴보겠습니다.

구축할 항목

Upstash Redis 글로벌 데이터베이스를 사용하는 Remix Run으로 웹 앱을 빌드하고 Cloudflare 작업자에 배포합니다.

Cloudflare 작업자는 CDN과 유사하게 전 세계적으로 배포된다는 이점이 있습니다. 즉, Remix 앱의 서버 측 렌더링이 가능한 한 클라이언트에 가깝게 발생하여 대기 시간이 최소화됩니다. Upstash의 글로벌 데이터베이스와 결합하면 성능 면에서 이상적인 설정입니다.

리믹스 설정

원하는 폴더로 이동하여 실행

npx create-remix@latest

Remix Run 앱 설정을 안내하는 대화상자가 표시됩니다.

Cloudflare 작업자를 선택해야 합니다. 배포 대상으로. 이 연습에서는 JavaScript 하지만 TypeScript를 자유롭게 선택하십시오. 설정은 다음과 유사해야 합니다.


R E M I X - v1.2.3

💿 Welcome to Remix! Let's get you set up with a new project.

? Where would you like to create your app? upstash-remix
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to chang
e deployment targets. Cloudflare Workers
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

할부가 완료되면 코드 편집기에서 새로 생성된 폴더를 엽니다.

Upstash Redis 글로벌 데이터베이스 생성

Upstash Redis 글로벌 데이터베이스의 경우 https://upstash.com/으로 이동하여 로그인하거나 계정을 만드십시오. 콘솔에서 "데이터베이스 생성"을 클릭하고 이름을 입력한 다음 데이터베이스 유형으로 "글로벌"을 선택합니다. 마지막으로 "만들기"를 누르고 데이터베이스가 생성될 때까지 기다립니다. 이제 UPSTASH_REDIS_REST_URL을 복사합니다. 및 UPSTASH_REDIS_REST_TOKEN .

프로젝트에서 .env라는 파일을 만듭니다. 프로젝트 루트에 다음과 같이 두 변수를 모두 추가합니다.

UPSTASH_REDIS_REST_TOKEN=<INSERT YOUR UPSTASH_REDIS_REST_TOKEN HERE>
UPSTASH_REDIS_REST_URL=<INSERT YOUR UPSTASH_REDIS_REST_URL HERE>

데이터베이스와 상호 작용하기 위해 @upstash/redis를 설치해 보겠습니다. npm install @upstash/redis가 있는 npm 패키지 .

Remix Run 애플리케이션 작성

이제 데이터베이스가 설정되었으므로 app/routes/index.jsx 파일을 엽니다. , 상용구 코드를 제거하고 다음을 입력하십시오.

import { json, redirect, useLoaderData } from "remix";
import redis from "../utils/redis.server";

export const loader = async () => {
  const start = new Date();
  const count = await redis.get("counter");
  return json({ count, loadingTime: new Date() - start });
};

export const action = async () => {
  await redis.incr("counter");
  return redirect("/");
};

export default function Index() {
  const { count, loadingTime } = useLoaderData();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Record speeds with Remix on Cloudflare and Upstash Redis</h1>
      <p>The button below was clicked {count} times already.</p>
      <form method="post" action="/?index">
        <button type="submit">Click me!</button>
      </form>
      <p>
        It took <b>{loadingTime} ms</b> to read the number of button clicks from{" "}
        <a href="https://upstash.com/redis">Upstash Redis</a>{" "}
        <a href="https://docs.upstash.com/redis/features/globaldatabase">
          Global Database
        </a>
        .
      </p>
    </div>
  );
}

또한 app/utils/redis.server.js 파일을 생성합니다. 와

// app/utils/redis.server.js

import { Redis } from "@upstash/redis/cloudflare";

export default Redis.fromEnv();

이것은 두 가지 일을 합니다. 둘 다 살펴보겠습니다.

1. useLoaderData를 사용한 서버 측 렌더링 데이터

맨 아래에 있는 return 문에는 다음을 표시하는 간단한 사용자 인터페이스가 있습니다.

  • count라는 카운터 변수 그리고
  • loadingTime이라는 변수 .

조금 더 자세히 살펴보면 이 두 변수가 useLoaderData() 훅. 이 Remix Run 전용 후크는 loader와 함께 사용됩니다. 기능이 상단에 있습니다. 거기에서 키 counter를 읽습니다. 데이터베이스에서 소요 시간을 측정하고 useLoaderData() function.The loader 그러면 함수가 Remix Run 앱을 로드할 때마다 실행되므로 누군가가 웹사이트를 요청할 때마다 현재 counter를 읽습니다. 값, 서버 측에서 웹사이트를 렌더링하고 클라이언트로 다시 보냅니다.

2. 누군가 "Click me!"를 클릭할 때 카운터 변수 증가 버튼.

Remix Run을 사용하면 빌드 양식을 매우 쉽게 만들 수 있습니다. JSX에서 <form/>을(를) 찾을 수 있습니다. POST를 제출하는 태그 /?index 요청 누군가가 제출 버튼을 클릭할 때. Remix Run의 놀라운 점은 action만 추가하면 된다는 것입니다. 파일에 함수를 추가하고 API를 명시적으로 생성하지 않고도 프런트엔드-백엔드 상호작용을 준비합니다. action에서 기능을 사용하면 카운터를 증가시키고 클라이언트에게 변경 사항을 반영하기 위해 웹사이트를 다시 로드하도록 지시합니다.

🥳 준비 완료

로컬에서 실행

이제 방금 만든 것을 살펴보고 싶을 것입니다. 그렇게 하려면 npm run dev를 실행하세요. 브라우저에서 앱을 봅니다.

  1. "클릭!"을 클릭하십시오. 버튼을 누르고 카운트가 어떻게 증가하는지 확인하십시오.
  2. 측정된 로딩 시간을 살펴보세요. 독일에서는 보통 <20ms 지연 시간을 봅니다. 그러나 Cloudflare에 배포된 후에는 이를 반으로 줄일 준비를 하십시오.

Cloudflare에 배포

Cloudflare를 사용하여 최고 속도로 발전하고 지금 한 자릿수 밀리초의 지연 시간을 달성해 봅시다!

먼저 https://developers.cloudflare.com/workers/cli-wrangler/install-update/ 설명서에 설명된 대로 Cloudflare 작업자 CLI Wrangler를 설치하지 않은 경우 설치합니다. CLI도 인증해야 합니다.

아직 계정이 없다면 여기에서 Cloudflare 계정을 만들고 Cloudflare로 이메일 주소를 확인한 후 대시보드로 이동하여 무료 사용자 지정 Cloudflare 작업자 하위 도메인을 설정하세요.

.env에서 비밀을 설정하는 것을 잊지 마십시오. Cloudflare용

wrangler secret put UPSTASH_REDIS_REST_TOKEN
...

wrangler secret put UPSTASH_REDIS_REST_URL
...

완료되면 앱을 배포할 수 있습니다.

npm run deploy

Wrangler는 앱이 배포되면 앱에 대한 링크를 제공합니다. 앱을 열고 앱이 얼마나 빠른지 확인하십시오.

https://remix-cloudflare-workers.soenkep.workers.dev/에서 배포 예시를 확인하세요.

https://github.com/zunkelty/upstash-remix-run에서 전체 코드(환경 변수 제외)를 살펴보세요.