Computer >> Máy Tính >  >> Lập trình >> Redis

Các trang web nhanh chóng rực rỡ với Remix trên Cloudflare và Upstash Redis

Khi phát triển một trang web hoặc ứng dụng web, không ai muốn dành hàng giờ chỉ để tối ưu hóa tốc độ. Vấn đề là một trang web nhanh cực kỳ quan trọng và hiệu suất thường là yếu tố quyết định cho sự thành công của nó. Ngày nay, có hàng chục khuôn khổ có sẵn, giúp bạn đạt được tốc độ cao.

Thật không may, thời gian tải trang web tốt nhất lại ít được sử dụng đối với chúng tôi trừ khi cơ sở dữ liệu của các ứng dụng của chúng tôi cũng nhanh như chớp.

Hôm nay, chúng ta sẽ xem xét cách đạt được tốc độ tải trang web tuyệt vời và kết hợp chúng với hiệu suất cơ sở dữ liệu cao nhất của Upstash Redis Global Databases.

Tại sao lại là Cơ sở dữ liệu Toàn cầu?

Hầu hết các cá nhân sử dụng Mạng phân phối nội dung (CDN) khi họ triển khai một trang web trực tuyến. Mạng phân phối nội dung (CDN) là một mạng toàn cầu gồm các máy chủ. Bởi vì các tệp trang web có thể được lưu vào bộ nhớ cache và phân phát từ vị trí địa lý gần nhất với máy khách, CDN mang lại độ trễ thấp hơn đáng kể so với một hệ thống máy chủ duy nhất. Điều này sẽ đảm bảo rằng trang web của bạn tải nhanh chóng trên toàn thế giới. Khi chúng ta nói về Cơ sở dữ liệu toàn cầu của Upstash, khái niệm CDN cũng áp dụng cho Cơ sở dữ liệu Redis. Với cơ sở dữ liệu toàn cầu, các bản sao của cơ sở dữ liệu của bạn được phân phối trên nhiều khu vực trên thế giới. Giờ đây, các khách hàng được chuyển đến khu vực gần nhất và trải qua độ trễ lên đến <10ms.

Bắt đầu

Bây giờ tôi đã hứa rất nhiều, hãy cùng xem xét toàn bộ cách hoạt động trong thực tế.

Những gì chúng tôi sẽ xây dựng

Chúng tôi sẽ xây dựng một ứng dụng web với Remix Run sử dụng Cơ sở dữ liệu toàn cầu của Upstash Redis và triển khai nó trên Cloudflare worker.

Cloudflare worker có lợi thế là được triển khai trên toàn cầu, tương tự như CDN. Điều này có nghĩa là kết xuất phía máy chủ của ứng dụng Remix của chúng tôi diễn ra càng gần máy khách càng tốt, dẫn đến độ trễ tối thiểu. Được kết hợp với Cơ sở dữ liệu toàn cầu của Upstash, đây là hiệu suất thiết lập lý tưởng.

Setup Remix

Chuyển đến thư mục bạn chọn và chạy 

npx create-remix@latest

Bạn sẽ được chào đón bằng một hộp thoại hướng dẫn bạn cách thiết lập ứng dụng Remix Run.

Đảm bảo chọn Nhân viên Cloudflare làm mục tiêu triển khai. Trong hướng dẫn này, tôi sẽ tiếp tục với một JavaScript ứng dụng nhưng hãy chọn TypeScript. Thiết lập sẽ trông giống như sau. 


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

Sau khi quá trình cài đặt kết thúc, hãy mở thư mục mới được tạo trong trình chỉnh sửa mã của bạn.

Tạo Cơ sở dữ liệu toàn cầu Upstash Redis của bạn

Đối với Cơ sở dữ liệu toàn cầu của Upstash Redis, hãy truy cập https://upstash.com/ và đăng nhập hoặc tạo tài khoản. Trong bảng điều khiển, nhấp vào "Tạo cơ sở dữ liệu", nhập tên và chọn "Toàn cầu" làm loại cơ sở dữ liệu. Cuối cùng nhấn "Tạo" và đợi cơ sở dữ liệu được tạo. Bây giờ sao chép UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN .

Trong dự án của bạn, hãy tạo một tệp có tên .env trong thư mục gốc của dự án và thêm cả hai biến vào đó như sau:

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

Để tương tác với cơ sở dữ liệu của chúng tôi, hãy cài đặt @upstash/redis gói npm với npm install @upstash/redis .

Viết ứng dụng Remix Run

Bây giờ cơ sở dữ liệu của bạn đã được thiết lập, hãy mở tệp app/routes/index.jsx , hãy xóa mã bảng soạn sẵn và nhập như sau:

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>
  );
}

Ngoài ra, hãy tạo một tệp app/utils/redis.server.js với 

// app/utils/redis.server.js

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

export default Redis.fromEnv();

Điều này làm được hai điều. Hãy xem xét cả hai.

1. Dữ liệu kết xuất phía máy chủ với useLoaderData

Trong câu lệnh trả lại của chúng tôi ở cuối cùng, chúng tôi có một giao diện người dùng đơn giản hiển thị

  • một biến bộ đếm được gọi là count và
  • một biến được gọi là loadingTime .

Nếu chúng ta xem xét kỹ hơn một chút, chúng ta thấy rằng hai biến đó đến từ useLoaderData() cái móc. Móc cụ thể của Remix Run này được sử dụng cùng với loader ở trên cùng. Trong đó, chúng tôi đọc một khóa counter từ cơ sở dữ liệu, đo thời gian cần và trả cả hai về useLoaderData() của chúng tôi function.The loader sau đó chức năng sẽ chạy mỗi khi chúng tôi tải ứng dụng Remix Run, vì vậy mỗi khi ai đó yêu cầu trang web, nó sẽ đọc counter hiện tại giá trị, phía máy chủ hiển thị trang web và gửi lại cho máy khách.

2. Tăng biến bộ đếm khi ai đó nhấp vào "Nhấp vào tôi!" nút.

Remix Run cho phép chúng tôi xây dựng các biểu mẫu rất dễ dàng. Trong JSX của chúng tôi, bạn có thể tìm thấy một <form/> thẻ gửi POST yêu cầu /?index khi ai đó nhấp vào nút gửi. Điều tuyệt vời với Remix Run là chúng ta chỉ phải thêm một action hoạt động với tệp và sẽ có sẵn tương tác frontend-backend mà không cần phải tạo API một cách rõ ràng. Trong action , chúng tôi chỉ cần tăng bộ đếm và yêu cầu khách hàng tải lại trang web để phản ánh các thay đổi.

🥳 Bạn đã sẵn sàng

Đang chạy cục bộ

Bây giờ, bạn có thể muốn xem lại những gì bạn vừa tạo. Để làm như vậy, hãy chạy npm run dev và xem ứng dụng trong trình duyệt của bạn.

  1. Nhấp vào nút "Nhấp vào tôi!" và xem số lượng tăng lên như thế nào
  2. Xem qua thời gian tải đo được. Ở Đức, tôi thường thấy độ trễ <20ms nhưng hãy chuẩn bị để giảm một nửa độ trễ đó sau khi triển khai cho Cloudflare.

Triển khai tới Cloudflare

Hãy nâng cao tốc độ tối đa với Cloudflare và đạt được độ trễ mili giây một chữ số ngay bây giờ!

Trước hết, nếu bạn chưa cài đặt Cloudflare worker CLI Wrangler như được mô tả trong tài liệu:https://developers.cloudflare.com/workers/cli-wrangler/install-update/. Đảm bảo xác thực cả CLI.

Nếu bạn chưa có tài khoản, hãy tạo tài khoản cloudflare tại đây và sau khi xác minh địa chỉ email của bạn với Cloudflare, hãy truy cập trang tổng quan và thiết lập miền phụ Cloudflare worker tùy chỉnh miễn phí của bạn.

Đừng quên đặt bí mật của bạn từ .env cho Cloudflare cũng như qua 

wrangler secret put UPSTASH_REDIS_REST_TOKEN
...

wrangler secret put UPSTASH_REDIS_REST_URL
...

Sau khi hoàn tất, bạn sẽ có thể triển khai ứng dụng của mình:

npm run deploy

Wrangler sẽ cung cấp cho bạn một liên kết đến ứng dụng của bạn sau khi nó được triển khai. Mở nó và xem tốc độ của ứng dụng của bạn.

Kiểm tra triển khai mẫu trên https://remix-cloudflare-workers.soenkep.workers.dev/.

Hãy xem toàn bộ mã (không có biến môi trường) trên:https://github.com/zunkelty/upstash-remix-run.