परिचय
फुल-स्टैक वेब फ्रेमवर्क के रूप में Remix सामान्य वेब सर्वर उपयोग के मामलों से निपटने के लिए API प्रदान करता है। यह पोस्ट सत्र पर ध्यान केंद्रित करेगा और आप Upstash का उपयोग उन्हें स्टोर करने के लिए क्यों और कैसे कर सकते हैं।
सत्र क्या है?
Remix डॉक्स में सत्र का एक बहुत अच्छा परिचय है: https://remix.run/docs/en/v1/api/remix#sessions
कुछ शब्दों में - सत्र एक तंत्र है जो सर्वर और क्लाइंट को उपयोगकर्ता डेटा/स्थिति साझा करने की अनुमति देता है। सत्र उपयोग के उदाहरण उपयोगकर्ता प्रमाणीकरण स्थिति ट्रैक करना, शॉपिंग कार्ट स्थिति, फ्लैश संदेश आदि हैं।
Upstash Redis क्यों उपयोग करें?
सत्र डेटा सर्वर पर संग्रहीत होता है। जब सर्वरलेस इंफ्रास्ट्रक्चर या कुछ PASS इंफ्रास्ट्रक्चर (जैसे Heroku) पर डिप्लॉय किया जाता है, तो आप डेटा को सर्वर के फाइल सिस्टम पर बनाए नहीं रख सकते क्योंकि यह हर अनुरोध पर (सर्वरलेस) या डिप्लॉयमेंट पर (PASS) बदल सकता है। डेटा को बनाए रखने के लिए आपको उपयोगकर्ताओं के डेटा को बाहरी डेटाबेस पर स्टोर करना चाहिए। Upstash Redis DB निम्नलिखित कारणों से सत्र डेटा स्टोर करने के लिए एक बढ़िया समाधान है:
- Redis सत्र, स्वभाव से, एक
key:valueडेटा संरचना होती है जहां कुंजी सत्र की आईडी होती है और मान इसका सीरियलाइज़्ड डेटा होता है। - Redis में एक अंतर्निहित एक्सपायरी तंत्र होता है जो एक्सपायर्ड सत्र को साफ करने की आवश्यकता को कम करता है।
- सत्र संवेदनशील उपयोगकर्ता डेटा रख सकता है और Upstash Redis अपने सभी संग्रहीत डेटा को एन्क्रिप्ट करता है।
- Upstash एक सरल HTTP REST API का उपयोग कर रहा है। HTTP सर्वरलेस इंफ्रास्ट्रक्चर से संवाद करने का सबसे आसान तरीका है।
Redis में Upstash को सत्र प्रदाता के रूप में कैसे उपयोग करें
यह पोस्ट मेरे द्वारा लिखे गए Redis सत्र स्टोरेज Upstash उदाहरण पर आधारित है। Remix रेपो को क्लोन करने और इसे आज़माने के लिए स्वतंत्र महसूस करें।
चरण 1 - अपने Upstash API कुंजी प्राप्त करें
- https://upstash.com/ पर जाएं और एक नया खाता बनाएं
- एक नया Redis DB बनाएं
- अपने Remix प्रोजेक्ट के रूट में
.envनामक फाइल मेंUPSTASH_REDIS_REST_URLऔरUPSTASH_REDIS_REST_TOKENकॉपी करें और स्टोर करें। dotenvइंस्टॉल करें -$ npm install --save-dev dotenv- यह आपको आपके द्वारा अभी बनाई गई.envफाइल से पर्यावरण चर इंजेक्ट करने की अनुमति देगा।- अपनी
package.jsonफाइल पर जाएं औरdevस्क्रिप्ट कोremix devसेdotenv/config node_modules/.bin/remix devमें बदलें।
चरण 2 - कोर createSessionStorage को लागू करके Upstash सत्र कार्यान्वयन बनाएं
Remix createSessionStorage का उपयोग करके अपना स्वयं का सत्र इंटीग्रेशन बनाने के लिए एक शानदार API प्रदान करता है। आइए Upstash को इंटीग्रेट करने के लिए इस फ़ंक्शन को लागू करें।
// sessions/upstash.server.ts
import * as crypto from "crypto";
import { createSessionStorage } from "remix";
const upstashRedisRestUrl = process.env.UPSTASH_REDIS_REST_URL;
const headers = {
Authorization: `Bearer ${process.env.UPSTASH_REDIS_REST_TOKEN}`,
Accept: "application/json",
"Content-Type": "application/json",
};
const expiresToSeconds = (expires) => {
const now = new Date();
const expiresDate = new Date(expires);
const secondsDelta = expiresDate.getSeconds() - now.getSeconds();
return secondsDelta < 0 ? 0 : secondsDelta;
};
// अधिक जानकारी के लिए https://remix.run/docs/en/v1/api/remix#createsessionstorage देखें
export function createUpstashSessionStorage({ cookie }: any) {
return createSessionStorage({
cookie,
async createData(data, expires) {
// एक रैंडम आईडी बनाएं - कोर `createFileSessionStorage` Remix फ़ंक्शन से लिया गया।
const randomBytes = crypto.randomBytes(8);
const id = Buffer.from(randomBytes).toString("hex");
// Upstash Redis HTTP API को कॉल करें। कुकी `expired` प्रॉपर्टी के अनुसार एक्सपायरी सेट करें।
// ध्यान दें `expiresToSeconds` का उपयोग जो डेट को सेकंड में बदलता है।
await fetch(
`${upstashRedisRestUrl}/set/${id}?EX=${expiresToSeconds(expires)}`,
{
method: "post",
body: JSON.stringify({ data }),
headers,
}
);
return id;
},
async readData(id) {
const response = await fetch(`${upstashRedisRestUrl}/get/${id}`, { headers });
try {
const { result } = await response.json();
return JSON.parse(result).data;
} catch (error) {
return null;
}
},
async updateData(id, data, expires) {
await fetch(
`${upstashRedisRestUrl}/set/${id}?EX=${expiresToSeconds(expires)}`,
{
method: "post",
body: JSON.stringify({ data }),
headers,
}
);
},
async deleteData(id) {
await fetch(`${upstashRedisRestUrl}/del/${id}`, {
method: "post",
headers,
});
},
});
}आइए समझाएं कि हमने अभी क्या लिखा: हमने sessions/upstash.server.ts नामक एक फाइल बनाई। यह फाइल createUpstashSessionStorage नामक एक फ़ंक्शन निर्यात करती है। यह फ़ंक्शन एक पैरामीटर के रूप में cookie लेती है (इस पर बाद में और अधिक) और एक नया सत्र प्रदाता लागू करने के लिए कोर Remix createSessionStorage फ़ैक्टरी फ़ंक्शन का उपयोग करती है।
फ़ंक्शन के अंदर हमने एक नया सत्र बनाने (createData), सत्र मान पढ़ने (readData), सत्र मान अपडेट करने (updateData) और सत्र हटाने (deleteData) के लिए createSessionStorage प्रोटोकॉल लागू किया।
प्रत्येक फ़ंक्शन Redis डेटाबेस के साथ इंटरैक्ट करने के लिए REST Upstash API का उपयोग करता है।
ध्यान देने योग्य बातें:
- पास की गई कुकी
js Dateफॉर्मेट मेंकुकी एक्सपायरी डेटरखती है। हम डेटा को सेकंड में बदलने के लिएexpiresToSecondsफ़ंक्शन का उपयोग करते हैं क्योंकि यह वही है जो Redis उम्मीद करता है। - कुकी सेट करते समय, इसकी एक्सपायरी डेट सेट करना न भूलें। Redis उन सत्रों को स्वचालित रूप से हटा देगा जब वे एक्सपायर हो जाएंगे।
- हम एक अद्वितीय सत्र आईडी बनाने के लिए
cryptoका उपयोग करते हैं। आप अद्वितीय आईडी बनाने के लिए अन्य विकल्पों का उपयोग कर सकते हैं। मैंने इस विकल्प को चुना क्योंकि यह कोरcreateFileSessionStorageफ़ंक्शन में उपयोग किए जाने वाले के समान है।
चरण 3 - अपने ऐप पर createSessionStorage का उपयोग करें
अब हमने अपना स्वयं का सत्र स्टोरेज कार्यान्वयन बना लिया है, आइए प्रदर्शित करें कि इसका उपयोग कैसे करना है।
ध्यान दें कि अब से Upstash के लिए कुछ भी विशिष्ट नहीं है। सभी तर्क
sessions/upstash.server.tsफाइल में एनकैप्सुलेटेड हैं।
// sessions.server.ts
import { createCookie } from "remix";
import { createUpstashSessionStorage } from "~/sessions/upstash.server";
// यह सत्र की लंबाई सेट करेगा।
// उदाहरण के लिए हम इसकी कार्यक्षमता को आसानी से प्रदर्शित करने के लिए बहुत कम अवधि का उपयोग करते हैं।
const EXPIRATION_DURATION_IN_SECONDS = 10;
const expires = new Date();
expires.setSeconds(expires.getSeconds() + EXPIRATION_DURATION_IN_SECONDS);
const sessionCookie = createCookie("__session", {
secrets: ["r3m1xr0ck1"],
sameSite: true,
expires,
});
const { getSession, commitSession, destroySession } = createUpstashSessionStorage({ cookie: sessionCookie });
export { getSession, commitSession, destroySession };sessions.server.ts नामक एक फाइल बनाएं और उपरोक्त कोड पेस्ट करें। यह फाइल 3 फ़ंक्शन getSession, commitSession और destroySession निर्यात करती है। वे फ़ंक्शन ऐप को सत्र के साथ इंटरैक्ट करने की अनुमति देते हैं। हमने क्लाइंट में सत्र के संदर्भ को स्टोर करने के लिए एक कुकी भी बनाई।
अपनी व्यावसायिक आवश्यकताओं के अनुसार एक्सपायरी अवधि सेट करें। अधिक जानकारी के लिए पढ़ें https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
Remix रूट्स में सत्र का उपयोग करना
Remix का उपयोग करके आप प्रति रूट सत्र उपयोग को परिभाषित कर सकते हैं। निम्नलिखित उदाहरण में हम routes/index.tsx पर सत्र का उपयोग करते हैं। यह उदाहरण केवल सत्र API का उपयोग करने का तरीका दिखाता है। सत्र को विशिष्ट व्यावसायिक तर्क से जोड़ना इस पोस्ट के दायरे से बाहर है।
यदि आप प्रमाणीकरण के लिए सत्र का उपयोग करने के उदाहरण की तलाश कर रहे हैं तो देखें https://github.com/remix-run/remix/tree/main/examples/remix-auth-form
// routes/index.tsx
import type { LoaderFunction } from "remix";
import { json, useLoaderData } from "remix";
import { commitSession, getSession } from "~/sessions.server";
export const loader: LoaderFunction = async ({ request }) => {
// कुकी से सत्र प्राप्त करें
const session = await getSession(request.headers.get("Cookie"));
const myStoredData = session.get("myStoredData");
// यदि कोई सत्र नहीं मिला (कभी नहीं बनाया गया या एक्सपायर हो गया) तो एक नया सत्र बनाएं।
if (!myStoredData) {
session.set("myStoredData", "Some data");
return json(
{ message: "नया सत्र बनाया गया" },
{
headers: {
"Set-Cookie": await commitSession(session),
},
}
);
}
// यदि सत्र मिला, तो सत्र जानकारी प्रस्तुत करें।
return json({ message: `सत्र जानकारी दिखा रहा है: ${myStoredData}` });
};
export default function () {
const data = useLoaderData();
return <div>{data.message}</div>;
}उदाहरण दर्शाता है कि उपयोगकर्ता सत्र के दो संभावित राज्यों को कैसे संभालना है (उपयोगकर्ता के पास सत्र है या उपयोगकर्ता के पास सत्र नहीं है)। यदि उपयोगकर्ता के पास सत्र नहीं है, तो ऐप की इंडेक्स फाइल पर नेविगेट करने से एक नया सत्र बन जाएगा और कुछ डमी डेटा स्टोर हो जाएगा। यदि उपयोगकर्ता के पास वैध (गैर-एक्सपायर्ड) सत्र है तो रूट सत्र का डेटा दिखाएगा।
चरण 4 - डिप्लॉय
अब जब आपने Upstash का उपयोग करके सत्र लागू कर लिया है, तो आप जो भी डिप्लॉयमेंट रणनीति चुनते हैं, उसके लिए स्वतंत्र हैं।
अपने Upstash पर्यावरण चर सेट करना न भूलें।
परिशिष्ट
स्थानीय विकास के लिए createFileSessionStorage और स्टेजिंग/प्रोडक्शन के लिए createUpstashSessionStorage का उपयोग करना
यह संभावना है कि आप ऑफलाइन रहते हुए विकसित करना चाहेंगे। स्थानीय रूप से विकसित करते समय आप वर्तमान NODE_ENV का पता लगाकर createUpstashSessionStorage को createFileSessionStorage से बदल सकते हैं।
यह टेस्ट करने के बाद कि आपका Upstash कार्यान्वयन काम करता है, आप sessions/upstash.server.ts फाइल को निम्नानुसार बदलें:
इस सेक्शन को बदलें:
// sessions/upstash.server.t से
const { getSession, commitSession, destroySession } = createUpstashSessionStorage({ cookie: sessionCookie });इसके साथ:
// sessions/upstash.server.ts से
const { getSession, commitSession, destroySession } = (process.env.NODE_ENV === "development")
? createFileSessionStorage({ cookie: sessionCookie, dir: './sessions' })
: createUpstashSessionStorage({ cookie: sessionCookie });अब जब आप स्थानीय रूप से विकसित करते हैं तो आप Upstash को कॉल करने के बजाय अपने स्थानीय फाइल सिस्टम का उपयोग करेंगे।
निष्कर्ष
इस पोस्ट में हमने देखा कि Upstash Redis DB का उपयोग हमारे सत्र स्टोरेज डेटा को होस्ट करने के लिए कैसे किया जाए। Remix API विशिष्ट सत्र स्टोरेज कार्यान्वयन को वास्तव में अच्छी तरह से एनकैप्सुलेट करता है, जिससे इंटीग्रेशन सीधा हो जाता है। यदि आप उदाहरण के साथ खेलना चाहते हैं तो आप इसे Remix सोर्स कोड में https://github.com/remix-run/remix/tree/main/examples/redis-upstash-session पर देख सकते हैं।
आनंद लें।
