เว็บไซต์รวดเร็วทันใจพร้อมการรีมิกซ์บน Cloudflare และ Upstash Redis

เมื่อพัฒนาเว็บไซต์หรือเว็บแอป ไม่มีใครอยากใช้เวลาหลายชั่วโมงไปกับการปรับความเร็วให้เหมาะสม ปัญหาคือเว็บไซต์ที่รวดเร็วมีความสำคัญอย่างไม่น่าเชื่อและประสิทธิภาพมักเป็นปัจจัยในการตัดสินใจสำหรับความสำเร็จ เฟรมเวิร์กของเว็บเช่น Remix Run สร้างขึ้นโดยมีเป้าหมายในการปรับประสิทธิภาพเว็บให้เหมาะสมโดยที่ยังคงการกำหนดค่าให้น้อยที่สุด ("zero-config") ทุกวันนี้ มีเฟรมเวิร์กมากมายที่ช่วยให้คุณบรรลุความเร็วสูง

ขออภัย เวลาในการโหลดเว็บไซต์ที่ดีที่สุดนั้นมีประโยชน์กับเราเพียงเล็กน้อย เว้นแต่ว่าฐานข้อมูลของแอพของเรานั้นเร็วเกินไป

วันนี้ เราจะมาดูวิธีบรรลุความเร็วในการโหลดเว็บไซต์ที่ยอดเยี่ยมและรวมเข้ากับประสิทธิภาพของฐานข้อมูลสูงสุด ของ Upstash Redis Global Databases

เหตุใดจึงต้องเป็นฐานข้อมูลสากล

บุคคลส่วนใหญ่ใช้เครือข่ายการจัดส่งเนื้อหา (CDN) เมื่อปรับใช้เว็บไซต์ออนไลน์ เครือข่ายการจัดส่งเนื้อหา (CDN) คือเครือข่ายเซิร์ฟเวอร์ทั่วโลก เนื่องจากไฟล์เว็บไซต์สามารถแคชและให้บริการจากตำแหน่งทางภูมิศาสตร์ที่ใกล้กับไคลเอ็นต์มากที่สุด CDN จึงให้เวลาแฝงที่ต่ำกว่าระบบเซิร์ฟเวอร์เดียวอย่างมาก เพื่อให้แน่ใจว่าเว็บไซต์ของคุณโหลดได้อย่างรวดเร็วจากทั่วโลก เมื่อเราพูดถึงฐานข้อมูลทั่วโลกของ Upstash แนวคิดเดียวกันกับ CDN จะนำไปใช้กับฐานข้อมูล Redis ด้วยฐานข้อมูลทั่วโลก แบบจำลองของฐานข้อมูลของคุณจะกระจายไปทั่วหลายภูมิภาคทั่วโลก ตอนนี้ ลูกค้าถูกส่งไปยังภูมิภาคที่ใกล้ที่สุดและพบกับเวลาแฝงสูงสุด <10ms

เริ่มต้นใช้งาน

ตอนนี้ฉันได้สัญญาไว้มากมายแล้ว มาดูกันว่าการทำงานทั้งหมดเป็นอย่างไรในทางปฏิบัติ

สิ่งที่เรากำลังจะสร้าง

เราจะสร้างเว็บแอปด้วย Remix Run ที่ใช้ Upstash Redis Global Database และปรับใช้บน Cloudflare Workers

Cloudflare Workers มีข้อได้เปรียบในการปรับใช้ทั่วโลก คล้ายกับ CDN ซึ่งหมายความว่าการเรนเดอร์ฝั่งเซิร์ฟเวอร์ของแอป Remix จะเกิดขึ้นใกล้กับไคลเอนต์มากที่สุด ส่งผลให้มีเวลาแฝงต่ำสุด เมื่อรวมกับ Global Databases ของ Upstash แล้ว นี่คือการตั้งค่าที่เหมาะสมที่สุดสำหรับประสิทธิภาพ

ตั้งค่ารีมิกซ์

ไปที่โฟลเดอร์ที่คุณเลือกและเรียกใช้

npx create-remix@latest

คุณจะได้รับการต้อนรับด้วยกล่องโต้ตอบที่จะแนะนำคุณตลอดการตั้งค่าแอป Remix Run

อย่าลืมเลือก Cloudflare Workers เป็นเป้าหมายการทำให้ใช้งานได้ ในคำแนะนำนี้ ฉันจะใช้ 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 Global ของคุณ

สำหรับฐานข้อมูล Upstash Redis Global ให้ไปที่ https://upstash.com/ และเข้าสู่ระบบหรือสร้างบัญชี ในคอนโซล ให้คลิกที่ "สร้างฐานข้อมูล" ป้อนชื่อและเลือก "Global" เป็นประเภทฐานข้อมูล สุดท้ายกด "สร้าง" และรอให้ฐานข้อมูลถูกสร้างขึ้น ตอนนี้คัดลอก 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 พร้อม npm install @upstash/redis .

การเขียนแอปพลิเคชัน 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

ในคำสั่งส่งคืนของเราที่ด้านล่างสุด เรามีส่วนต่อประสานผู้ใช้ที่เรียบง่ายที่แสดง

• ตัวแปรตัวนับที่เรียกว่า count และ
• ตัวแปรที่เรียกว่า loadingTime .

หากเรามองขึ้นไปอีกหน่อย เราจะเห็นว่าตัวแปรทั้งสองนั้นมาจาก useLoaderData() ตะขอ. เบ็ดเฉพาะ Remix Run นี้ใช้ร่วมกับ loader อยู่ด้านบนสุด ในนั้น เราอ่านคีย์ counter จากฐานข้อมูล ให้วัดเวลาที่ใช้และส่งคืนทั้ง useLoaderData() . ของเรา ฟังก์ชั่น loader จากนั้นฟังก์ชันจะทำงานทุกครั้งที่เราโหลดแอป Remix Run ดังนั้นทุกครั้งที่มีคนขอเว็บไซต์ โปรแกรมจะอ่าน counter ปัจจุบัน ค่าฝั่งเซิร์ฟเวอร์แสดงผลเว็บไซต์และส่งกลับไปยังลูกค้า

2. การเพิ่มตัวแปรตัวนับเมื่อมีคนคลิกปุ่ม "คลิกฉัน!" ปุ่ม.

Remix Run ช่วยให้เราสร้างฟอร์มได้ง่ายมาก ใน JSX ของเรา คุณจะพบ <form/> แท็กที่ส่ง POST ขอ /?index เมื่อมีคนคลิกที่ปุ่มส่ง สิ่งที่น่าทึ่งของ Remix Run คือเราเพียงแค่เพิ่ม action กับไฟล์และจะมีการโต้ตอบส่วนหน้า-ส่วนหลังที่พร้อมใช้งานโดยไม่ต้องสร้าง API อย่างชัดเจนใน action เราเพียงแค่เพิ่มตัวนับและแจ้งให้ลูกค้าโหลดเว็บไซต์ใหม่เพื่อให้สอดคล้องกับการเปลี่ยนแปลง

🥳 พร้อมแล้ว ลุยเลย

เรียกใช้ในเครื่อง

ตอนนี้ คุณอาจต้องการดูสิ่งที่คุณเพิ่งสร้างขึ้น โดยเรียกใช้ npm run dev และดูแอปในเบราว์เซอร์ของคุณ

1. คลิกที่ "คลิกฉัน!" และดูว่าการนับเพิ่มขึ้นอย่างไร
2. ดูเวลาในการโหลดที่วัดได้ ในเยอรมนี ฉันมักจะเห็นเวลาแฝง <20ms แต่เตรียมที่จะลดเวลานั้นลงครึ่งหนึ่งเมื่อปรับใช้กับ Cloudflare

กำลังปรับใช้กับ Cloudflare

ก้าวไปสู่ความเร็วเต็มที่ด้วย Cloudflare และบรรลุ latencies มิลลิวินาทีหลักเดียวทันที!

ก่อนอื่น หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้ง Cloudflare Workers CLI Wrangler ตามที่อธิบายไว้ในเอกสารประกอบ:https://developers.cloudflare.com/workers/cli-wrangler/install-update/ อย่าลืมตรวจสอบ CLI ด้วย

หากคุณยังไม่มีบัญชี ให้สร้างบัญชี cloudflare ที่นี่ และหลังจากยืนยันที่อยู่อีเมลของคุณด้วย Cloudflare แล้ว ให้ไปที่แดชบอร์ดและตั้งค่าโดเมนย่อย Cloudflare Workers แบบกำหนดเองฟรี

อย่าลืมตั้งค่าความลับของคุณจาก .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