ক্লাউডফ্লেয়ার এবং আপস্ট্যাশ রেডিস-এ রিমিক্স সহ উজ্জ্বল ওয়েবসাইটগুলি

একটি ওয়েবসাইট বা ওয়েব অ্যাপ ডেভেলপ করার সময়, কেউ তাদের সময়ের কয়েক ঘন্টা শুধু গতি অপ্টিমাইজেশানে ব্যয় করতে চায় না। সমস্যা হল যে একটি দ্রুত ওয়েবসাইট অবিশ্বাস্যভাবে গুরুত্বপূর্ণ এবং কর্মক্ষমতা প্রায়শই এটির সাফল্যের জন্য একটি নির্ধারক ফ্যাক্টর৷ রিমিক্স রানের মতো ওয়েব ফ্রেমওয়ার্কগুলি তাদের কনফিগারেশনকে ন্যূনতম ("শূন্য-কনফিগারেশন") রেখে ওয়েব পারফরম্যান্সকে অপ্টিমাইজ করার লক্ষ্য নিয়ে তৈরি করা হয়েছিল৷ আজকাল, কয়েক ডজন ফ্রেমওয়ার্ক উপলব্ধ রয়েছে, যা আপনাকে উচ্চ গতি অর্জন করতে সহায়তা করে।

দুর্ভাগ্যবশত, সেরা ওয়েবসাইট লোডের সময়গুলি আমাদের খুব কমই কাজে লাগে যদি না আমাদের অ্যাপগুলির ডেটাবেসগুলিও দ্রুত গতিতে হয়৷

আজ, আমরা দেখব কীভাবে চমৎকার ওয়েবসাইট লোডিং গতি অর্জন করা যায় এবং সেগুলিকে পিক ডেটাবেস পারফরম্যান্স এর সাথে একত্রিত করা যায়। আপস্ট্যাশ রেডিস গ্লোবাল ডেটাবেস।

কেন বিশ্বব্যাপী ডেটাবেস?

বেশিরভাগ ব্যক্তি একটি বিষয়বস্তু বিতরণ নেটওয়ার্ক (CDN) ব্যবহার করে যখন তারা অনলাইনে একটি ওয়েবসাইট স্থাপন করে। একটি বিষয়বস্তু বিতরণ নেটওয়ার্ক (CDN) সার্ভারের একটি বিশ্বব্যাপী নেটওয়ার্ক। যেহেতু ওয়েবসাইট ফাইল ক্যাশে করা যায় এবং নিকটতম ভৌগলিক অবস্থান থেকে ক্লায়েন্টের কাছে পরিবেশন করা যায়, একটি CDN একটি একক সার্ভার সিস্টেমের তুলনায় উল্লেখযোগ্যভাবে কম লেটেন্সি প্রদান করে। এটি নিশ্চিত করবে যে আপনার ওয়েবসাইটটি সারা বিশ্ব জুড়ে দ্রুত লোড হচ্ছে৷ আমরা যখন Upstash এর গ্লোবাল ডেটাবেস সম্পর্কে কথা বলি তখন CDN-এর একই ধারণা Redis ডেটাবেসে প্রযোজ্য হয়৷ গ্লোবাল ডাটাবেসের সাথে, আপনার ডাটাবেসের প্রতিলিপি সারা বিশ্বের একাধিক অঞ্চলে বিতরণ করা হয়। এখন, ক্লায়েন্টদের নিকটতম অঞ্চলে নিয়ে যাওয়া হয় এবং <10ms লেটেন্সি পর্যন্ত অভিজ্ঞতা হয়।

শুরু করা

এখন যেহেতু আমি ইতিমধ্যে অনেক প্রতিশ্রুতি দিয়েছি, চলুন দেখে নেওয়া যাক কীভাবে পুরো জিনিসটি বাস্তবে কাজ করে৷

আমরা কি তৈরি করতে যাচ্ছি

আমরা রিমিক্স রান দিয়ে একটি ওয়েব অ্যাপ তৈরি করব যা Upstash Redis গ্লোবাল ডেটাবেস ব্যবহার করে এবং ক্লাউডফ্লেয়ার ওয়ার্কারদের উপর এটি স্থাপন করবে।

ক্লাউডফ্লেয়ার কর্মীদের একটি CDN এর মতো বিশ্বব্যাপী মোতায়েন করার সুবিধা রয়েছে। এর মানে হল যে আমাদের রিমিক্স অ্যাপের সার্ভার-সাইড রেন্ডারিং যতটা সম্ভব ক্লায়েন্টের কাছাকাছি হয়, যার ফলে ন্যূনতম বিলম্ব হয়। Upstash এর গ্লোবাল ডাটাবেসের সাথে মিলিত এটি আদর্শ সেটআপ কর্মক্ষমতা অনুযায়ী।

সেটআপ রিমিক্স

আপনার পছন্দের ফোল্ডারে যান এবং চালান

npx create-remix@latest

আপনাকে একটি ডায়ালগ দিয়ে স্বাগত জানানো হবে যা আপনাকে আপনার রিমিক্স রান অ্যাপের সেটআপের মাধ্যমে নিয়ে যাবে৷

ক্লাউডফ্লেয়ার কর্মী নির্বাচন করা নিশ্চিত করুন৷ স্থাপনার লক্ষ্য হিসাবে। এই ওয়াকথ্রুতে আমি একটি জাভাস্ক্রিপ্ট নিয়ে এগিয়ে যেতে যাচ্ছি অ্যাপ কিন্তু নির্দ্বিধায় টাইপস্ক্রিপ্ট বেছে নিন। সেটআপটি এর মতো দেখতে হবে৷

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 Global Database-এর জন্য, 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 প্যাকেজ .

রিমিক্স রান অ্যাপ্লিকেশন লেখা

এখন আপনার ডাটাবেস সেট আপ করা হয়েছে, ফাইলটি খুলুন 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() থেকে। হুক এই রিমিক্স রান নির্দিষ্ট হুকটি loader এর সাথে একসাথে ব্যবহার করা হয় উপরে ফাংশন। সেখানে, আমরা একটি কী পড়ি counter ডাটাবেস থেকে, আমাদের useLoaderData() এ যে সময় নেয় এবং ফেরত দেয় তা পরিমাপ করুন ফাংশন। loader আমরা যখনই রিমিক্স রান অ্যাপ লোড করব তখন ফাংশনটি চলবে, তাই প্রত্যেকবার যখন কেউ ওয়েবসাইটটির অনুরোধ করবে, এটি বর্তমান counter পড়বে মান, সার্ভার-সাইড ওয়েবসাইট রেন্ডার করে এবং ক্লায়েন্টের কাছে ফেরত পাঠায়।

2. কাউন্টার ভেরিয়েবল বৃদ্ধি করা যখন কেউ ক্লিক করে "আমাকে ক্লিক করুন!" বোতাম।

রিমিক্স রান আমাদের খুব সহজে বিল্ড ফর্মের অনুমতি দেয়। আমাদের JSX-এ, আপনি একটি <form/> খুঁজে পেতে পারেন ট্যাগ যা একটি POST জমা দেয় /?index-এর অনুরোধ যখন কেউ সাবমিট বাটনে ক্লিক করে। রিমিক্স রানের সাথে আশ্চর্যজনক জিনিস হল যে আমাদের শুধুমাত্র একটি action যোগ করতে হবে ফাইলের ফাংশন এবং স্পষ্টভাবে একটি API তৈরি না করে একটি ফ্রন্টএন্ড-ব্যাকএন্ড ইন্টারঅ্যাকশন প্রস্তুত থাকবে। action-এ ফাংশন, আমরা কেবল কাউন্টার বৃদ্ধি করি এবং পরিবর্তনগুলি প্রতিফলিত করতে ক্লায়েন্টকে ওয়েবসাইট পুনরায় লোড করতে বলি৷

🥳 আপনি যেতে প্রস্তুত

স্থানীয়ভাবে চলছে

এখন, আপনি সম্ভবত আপনি কি তৈরি করেছেন তা একবার দেখতে চাইবেন। এটি করতে, npm run dev চালান এবং আপনার ব্রাউজারে অ্যাপটি দেখুন।

1. "আমাকে ক্লিক করুন!"-এ ক্লিক করুন। বোতাম এবং দেখুন কিভাবে গণনা বৃদ্ধি পায়
2. মাপা লোডিং সময় দেখুন। জার্মানিতে, আমি সাধারণত <20ms এর বিলম্ব দেখতে পাই তবে ক্লাউডফ্লেয়ারে স্থাপন করা হলে তা অর্ধেক কাটানোর জন্য প্রস্তুত থাকুন৷

ক্লাউডফ্লেয়ারে স্থাপন করা হচ্ছে

আসুন ক্লাউডফ্লেয়ারের সাথে পূর্ণ গতিতে অগ্রসর হই এবং এখন একক সংখ্যা মিলিসেকেন্ড লেটেন্সি অর্জন করি!

প্রথমত, যদি আপনার না থাকে, ডকুমেন্টেশনে বর্ণিত ক্লাউডফ্লেয়ার ওয়ার্কার্স সিএলআই র্যাংলার ইনস্টল করুন:https://developers.cloudflare.com/workers/cli-wrangler/install-update/। পাশাপাশি CLI প্রমাণীকরণ নিশ্চিত করুন।

আপনার যদি আগে থেকে কোনো অ্যাকাউন্ট না থাকে, তাহলে এখানে একটি ক্লাউডফ্লেয়ার অ্যাকাউন্ট তৈরি করুন এবং ক্লাউডফ্লেয়ারের সাথে আপনার ইমেল ঠিকানা যাচাই করার পরে, আপনার ড্যাশবোর্ডে যান এবং আপনার বিনামূল্যের কাস্টম ক্লাউডফ্লেয়ার ওয়ার্কার্স সাবডোমেন সেট আপ করুন৷

.env থেকে আপনার গোপনীয়তা সেট করতে ভুলবেন না ক্লাউডফ্লেয়ারের জন্যও

wrangler secret put UPSTASH_REDIS_REST_TOKEN
...

wrangler secret put UPSTASH_REDIS_REST_URL
...

এটি হয়ে গেলে, আপনি আপনার অ্যাপ স্থাপন করতে সক্ষম হবেন:

npm run deploy

র্যাংলার আপনার অ্যাপটি স্থাপন করার পরে আপনাকে একটি লিঙ্ক দেবে। এটি খুলুন এবং দেখুন আপনার অ্যাপ কত দ্রুত হবে৷

লিঙ্ক

https://remix-cloudflare-workers.soenkep.workers.dev/ এ একটি উদাহরণ স্থাপন দেখুন।

https://github.com/zunkelty/upstash-remix-run এ সম্পূর্ণ কোড (পরিবেশ ভেরিয়েবল ছাড়া) দেখুন।