home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Redis

สร้างเว็บไซต์ Lightning-Fast ด้วย Remix, Cloudflare และ Upstash Redis

พัฒนา Website/Web App ไม่ควรใช้เวลาชั่วโมงแค่ Speed Optimization ปัญหาคือ Fast Website สำคัญมาก Performance บ่อยครั้งเป็น Deciding Factor สำหรับ Success Web Frameworks เช่น Remix Run สร้างขึ้นเพื่อ Optimize Web Performance พร้อม Configuration น้อยที่สุด ("Zero-config") ตอนนี้มี Frameworks โหลดช่วยให้ High Speeds

น่าเสียดาย Best Website Load Times ไม่ประโยชน์หาก Databases ของ Apps ไม่ Lightning Fast ด้วย

วันนี้เราดูวิธีทำ Excellent Website Loading Speeds รวมกับ Peak Database Performance ของ Upstash Redis Global Databases

ทำไมต้อง Global Databases?

คนส่วนใหญ่ใช้ Content Delivery Network (CDN) Deploy Website Online CDN คือ Global Network ของ Servers เนื่องจาก Website Files สามารถ Cache และ Serve จาก Geographic Location ใกล้ Client มากที่สุด CDN ให้ Latency ต่ำกว่า Single Server System มาก ทำให้ Website โหลดเร็วทั่วโลก สำหรับ Upstash Global Databases Concept เดียวกับ CDN ใช้กับ Redis Databases ด้วย Global Databases Replicas ของ Database กระจายหลาย Regions ทั่วโลก Clients จะ Route ไป Region ใกล้ที่สุด Experience Latency < 10ms

Getting Started

เราจะสร้างอะไร?

สร้าง Web App ด้วย Remix Run ใช้ Upstash Redis Global Databases Deploy บน Cloudflare Workers

Cloudflare Workers Deploy แบบ Global คล้าย CDN หมายความว่า Server-side Rendering ของ Remix App เกิดขึ้นใกล้ Client มากที่สุด ให้ Minimum Latency รวมกับ Upstash Global Databases = Ideal Setup ด้าน Performance

Setup Remix

ไปโฟลเดอร์ที่ต้องการ รัน:

npx create-remix@latest

จะมี Dialog Walkthrough Setup Remix Run App

เลือก Cloudflare Workers เป็น Deployment Target ใน Walkthrough นี้ใช้ JavaScript App (เลือก TypeScript ก็ได้) Setup ควรประมาณนี้:

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 change deployment targets.
Cloudflare Workers
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

Install เสร็จ เปิดโฟลเดอร์ใหม่ใน Code Editor

สร้าง Upstash Redis Global Database

ไป https://upstash.com/ Login หรือ Sign Up ใน Console กด "Create Database" ใส่ชื่อ เลือก "Global" เป็น Database Type กด "Create" รอสร้างเสร็จ คัดลอก UPSTASH_REDIS_REST_TOKEN และ UPSTASH_REDIS_REST_URL

ในโปรเจกต์ สร้าง .env ที่ Root ใส่ Variables:

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 Package: npm install @upstash/redis

เขียน Remix Run Application

Database Setup เสร็จ เปิด app/routes/index.jsx ลบ Boilerplate ใส่โค้ดนี้:

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

ทำ 2 อย่าง มาดูทั้งคู่

1. Server-side Rendering Data ด้วย useLoaderData

ใน Return Statement ท้ายสุด มี Simple UI แสดง:

  • Counter Variable ชื่อ count
  • Variable ชื่อ loadingTime

ดูข้างบน Variables มาจาก useLoaderData() Hook Remix Run Hook นี้ใช้กับ loader Function ด้านบน ที่นั่นเราอ่าน Key counter จาก Database วัดเวลาที่ใช้ Return ทั้งคู่ไป useLoaderData() Function loader จะ Run ทุกครั้งที่ Load Remix Run App ทุกครั้งที่ Request Website จะอ่าน counter ปัจจุบัน Server-side Render Website ส่งกลับ Client

2. Increment Counter Variable เมื่อกดปุ่ม "Click me!"

Remix Run สร้าง Forms ได้ง่าย ใน JSX มี <form/> Submit POST Request ไป /?index เมื่อคลิก Submit Button สิ่งมหัศจรรย์คือเราเพิ่ม action Function ใน File ได้ Frontend-Backend Interaction พร้อมโดยไม่ต้องสร้าง API เอง ใน action Function Increment Counter แล้วบอก Client Reload Website เพื่อ Reflect Changes

🥳 พร้อมใช้งานแล้ว

Running Locally

รัน npm run dev ดูใน Browser

  1. กด "Click me!" ดู Count Increment
  2. ดู Measured Loading Time ใน Germany ปกติ < 20ms แต่พร้อมลดครึ่งเวลา Deploy Cloudflare

Deploy ไป Cloudflare

ไป Full Speed กับ Cloudflare Single-digit Millisecond Latencies!

ติดตั้ง Cloudflare Workers CLI Wrangler ตาม Docs: https://developers.cloudflare.com/workers/cli-wrangler/install-update/ Authenticate CLI ด้วย

หากยังไม่มี Account สร้าง Cloudflare Account Verify Email ไป Dashboard Setup Free Custom Cloudflare Workers Subdomain

อย่าลืม Set Secrets จาก .env สำหรับ Cloudflare:

wrangler secret put UPSTASH_REDIS_REST_TOKEN ...
wrangler secret put UPSTASH_REDIS_REST_URL ...

เสร็จแล้ว Deploy App:

npm run deploy

Wrangler ให้ Link App หลัง Deploy เปิดดู App เร็วแค่ไหน

Example Deployment: https://remix-cloudflare-workers.soenkep.workers.dev/

Full Code (ไม่รวม Env Variables): https://github.com/zunkelty/upstash-remix-run