फुल-स्टैक रिएक्ट एप्लिकेशन कैसे बनाएं और तैनात करें

नमस्कार, हेब्र! मैं आपके लिए फ्रैंक ज़िकर्ट द्वारा "हाउ टू बिल्ड एंड डिप्लॉय ए फुल-स्टैक रिएक्ट-ऐप" लेख का अनुवाद प्रस्तुत करता हूं।

इन्फ्रास्ट्रक्चर घटकों को पूर्ण-विकसित प्रतिक्रिया एप्लिकेशन बनाना, चलाना और तैनात करना आसान बनाता है। इन रिएक्ट घटकों के साथ, आप अपने एप्लिकेशन के व्यावसायिक तर्क को लिखने पर ध्यान केंद्रित कर सकते हैं। आपको इसके कॉन्फ़िगरेशन के बारे में चिंता करने की आवश्यकता नहीं है।

फुल-स्टैक डेवलपर बनना चाहते हैं? फुल-स्टैक एप्लिकेशन एक सर्वर और डेटाबेस के साथ रिएक्ट इंटरैक्टिव वेब इंटरफेस का पूरक है। लेकिन इस तरह के एक आवेदन के लिए एक सरल एक-पृष्ठ अनुप्रयोग की तुलना में बहुत अधिक सेटिंग्स की आवश्यकता होती है।

हम बुनियादी ढांचे के घटकों का उपयोग करते हैं । ये रिएक्ट कंपोनेंट हमें अपने रिएक्ट एप्लिकेशन के हिस्से के रूप में हमारे इंफ्रास्ट्रक्चर आर्किटेक्चर को परिभाषित करने की अनुमति देते हैं। हमें अब वेबपैक, बैबेल या सर्वरलेस जैसी किसी अन्य सेटिंग्स की आवश्यकता नहीं है।

प्रारंभ

आप अपनी परियोजना को तीन तरीकों से सेट कर सकते हैं:

• Www.infrastructure-compenders.com से अपना कस्टम बॉयलरप्लेट कोड डाउनलोड करें,
• या इस GitHub-भंडार को क्लोन करें,
• या पुस्तकालयों को मैन्युअल रूप से स्थापित करें, अधिक जानकारी के लिए इस पोस्ट को देखें।

एक बार जब आप निर्भरता स्थापित कर लेते हैं ( npm install चलाते हैं), तो आप प्रोजेक्ट को एक कमांड से बना सकते हैं: npm run build ।

बिल्ड स्क्रिप्ट में तीन और स्क्रिप्ट शामिल हैं। पैकेज:

• npm run{your-project-name} स्थानीय रूप से (सर्वर और डेटाबेस के बिना हॉट-देव मोड), आपके रिएक्ट एप्लिकेशन को लॉन्च करता है
• npm run start-{your-env-name} स्थानीय रूप से संपूर्ण सॉफ़्टवेयर स्टैक प्रारंभ करता है। नोट: जावा 8 JDK को डेटाबेस ऑफ़लाइन चलाने के लिए आवश्यक है। यहाँ आप JDK कैसे स्थापित कर सकते हैं ।
• npm run deploy-{your-env-name} आपके आवेदन को AWS में तैनात करता है।

नोट। अपने आवेदन को AWS में तैनात करने के लिए, आपको इन अधिकारों के साथ IAM तकनीकी उपयोगकर्ता की आवश्यकता है। अपनी .env फ़ाइल में उपयोगकर्ता क्रेडेंशियल्स इस प्रकार रखें:

 AWS_ACCESS_KEY_ID = *** AWS_SECRET_ACCESS_KEY = *** 

अपने एप्लिकेशन आर्किटेक्चर को परिभाषित करें

बुनियादी ढांचे के घटकों पर आधारित परियोजनाओं में एक स्पष्ट संरचना होती है। आपके पास एक शीर्ष-स्तरीय घटक है। यह आपके आवेदन के समग्र वास्तुकला परिभाषित करता है।

उपसंपादक (बाल घटक) आवेदन के व्यवहार को परिष्कृत (विस्तारित) करते हैं और फ़ंक्शन जोड़ते हैं।

निम्न उदाहरण में, घटक <ServiceOrientedApp /> - यह हमारे शीर्ष स्तर के घटक है। हम इसे अपनी प्रविष्टि बिंदु फ़ाइल ( src / index.tsx) लिए डिफ़ॉल्ट फ़ाइल के रूप में निर्यात करते हैं।

 export default ( <ServiceOrientedApp stackName = "soa-dl" buildPath = 'build' region='eu-west-1'> <Environment name="dev" /> <Route path='/' name='My Service-Oriented React App' render={()=><DataForm />} /> <DataLayer id="datalayer"> <UserEntry /> <GetUserService /> <AddUserService /> </DataLayer> </ServiceOrientedApp> ); 

<ServiceOrientedApp /> एक इंटरैक्टिव वेब एप्लिकेशन है। आप अपने द्वारा प्रदान किए गए बाल घटकों का उपयोग करके इस एप्लिकेशन की कार्यक्षमता को स्पष्ट (विस्तार) कर सकते हैं। यह <Environment /> , <Route /> , <Service /> और <DataLayer /> ।

<Envrionment /> आपके एप्लिकेशन के रनटाइम को निर्धारित करता है। उदाहरण के लिए, आपके पास देव और ठेस संस्करण हो सकते हैं। आप प्रत्येक को अलग से चला और तैनात कर सकते हैं।

<Route /> आपके आवेदन का पृष्ठ है। यह प्रतिक्रिया-राउटर में <Route /> तरह काम करता है। यहाँ कैसे मार्गों संचालित करने के लिए पर एक ट्यूटोरियल है ।

<Service /> एक फ़ंक्शन को परिभाषित करता है जो सर्वर साइड पर चलता है। इसमें एक या कई <Middleware /> - घटक बच्चे के रूप में हो सकते हैं।

<Middleware /> Express.js-Middleware की तरह काम करता है।
<DataLayer /> आपके आवेदन में एक NoSQL डेटाबेस जोड़ता है। स्वीकारें <प्रवेश /> - बच्चों के रूप में घटक। <प्रविष्टि /> आपके डेटाबेस में वस्तुओं के प्रकार का वर्णन करता है।

ये सभी घटक हैं जिन्हें हमें अपना पूर्ण-स्टैक एप्लिकेशन बनाने की आवश्यकता है। जैसा कि आप देख सकते हैं, हमारे आवेदन में एक रिकॉर्ड के साथ एक रनटाइम, एक पेज, दो सेवाएं और एक डेटाबेस है।

घटक संरचना आपके आवेदन का एक स्पष्ट दृष्टिकोण प्रदान करती है। आपका आवेदन जितना बड़ा होगा, उतना ही महत्वपूर्ण है।

आपने देखा होगा कि <Service /> <DataLayer /> । इसकी एक सरल व्याख्या है। हम चाहते हैं कि हमारी सेवाओं का डेटाबेस तक पहुंच हो। यह वास्तव में इतना आसान है!

डेटाबेस डिजाइन

<DataLayer /> अमेज़न DynamoDB पैदा करता है। यह एक कुंजी-मूल्य डेटाबेस (NoSQL) है। यह किसी भी पैमाने पर उच्च प्रदर्शन प्रदान करता है। लेकिन रिलेशनल डेटाबेस के विपरीत, यह जटिल प्रश्नों का समर्थन नहीं करता है।

डेटाबेस स्कीमा में तीन क्षेत्र होते हैं: primaryKey , rangeKey और data । यह महत्वपूर्ण है क्योंकि आपको यह जानना होगा कि आप केवल इसकी कुंजी द्वारा प्रविष्टियाँ पा सकते हैं। या तो primaryKey , या तो rangeKey , या दोनों।

इस ज्ञान के साथ, आइए हमारे <Entry /> पर एक नज़र डालें:

 export const USER_ENTRY_ID = "user_entry"; export default function UserEntry (props) { return <Entry id={ USER_ENTRY_ID } primaryKey="username" rangeKey="userid" data={{ age: GraphQLString, address: GraphQLString }} /> }; 

<Entry /> हमारे डेटा की संरचना का वर्णन करता है। हम अपने प्राइमरीके और रेंजके लिए नामों को परिभाषित करते हैं। आप कुछ डायनमोबी कीवर्ड के अलावा किसी भी नाम का उपयोग कर सकते हैं जो आप यहां पा सकते हैं। लेकिन हमारे द्वारा उपयोग किए जाने वाले नामों के कार्यात्मक निहितार्थ हैं:

• जब हम अपने डेटाबेस में आइटम जोड़ते हैं, तो हमें इन प्रमुख नामों के लिए मान प्रदान करना चाहिए।
• दोनों कुंजी का संयोजन डेटाबेस में एक अद्वितीय तत्व का वर्णन करता है।
• एक ही कुंजी नामों के साथ एक और <एंट्री /> नहीं होना चाहिए (एक नाम समान हो सकता है, लेकिन दोनों नहीं)।
• हम डेटाबेस में तत्व तभी पा सकते हैं जब हमारे पास कम से कम एक प्रमुख नाम का मूल्य हो।

हमारे उदाहरण में, इसका मतलब है कि:

• प्रत्येक उपयोगकर्ता का उपयोगकर्ता नाम और उपयोगकर्ता होना चाहिए।
• एक ही उपयोगकर्ता नाम और एक ही उपयोगकर्ता नाम के साथ दूसरा उपयोगकर्ता नहीं हो सकता है। डेटाबेस के नजरिए से, यह अच्छा होगा यदि दो उपयोगकर्ता एक ही उपयोगकर्ता नाम रखते हैं जब उनके पास अलग-अलग उपयोगकर्ता नाम (या इसके विपरीत) होते हैं।
• हमारे पास डेटाबेस में एक और <Entry /> प्राइमरीके = "यूज़रनेम" और रेंजकेई = "यूज़रिड" नहीं हो सकता है।
• जब हम उपयोगकर्ता नाम या उपयोगकर्ता id तो हम उपयोगकर्ताओं के लिए डेटाबेस को क्वेरी कर सकते हैं। लेकिन हम उम्र या पते का अनुरोध नहीं कर सकते।

डेटाबेस में आइटम जोड़ें

हमने अपने <ServiceOrientedApp /> में दो <Service /> घटकों को परिभाषित किया है। POST सेवा जो उपयोगकर्ता को डेटाबेस में जोड़ती है और उपयोगकर्ता को इससे प्राप्त करने वाली GET सेवा प्रदान करती है।

आइए <AddUserService /> शुरू करते हैं। यहाँ इस सेवा के लिए कोड है:

 import * as React from 'react'; import { callService, Middleware, mutate, Service, serviceWithDataLayer } from "infrastructure-components"; import { USER_ENTRY_ID, IUserEntry } from './user-entry'; const ADDUSER_SERVICE_ID = "adduser"; export default function AddUserService () { return <Service id={ ADDUSER_SERVICE_ID } path="/adduser" method="POST"> <Middleware callback={serviceWithDataLayer(async function (dataLayer, req, res, next) { const parsedBody: IUserEntry = JSON.parse(req.body); await mutate( dataLayer.client, dataLayer.setEntryMutation(USER_ENTRY_ID, parsedBody) ); res.status(200).set({ "Access-Control-Allow-Origin" : "*", // Required for CORS support to work }).send("ok"); })}/> </Service> }; । import * as React from 'react'; import { callService, Middleware, mutate, Service, serviceWithDataLayer } from "infrastructure-components"; import { USER_ENTRY_ID, IUserEntry } from './user-entry'; const ADDUSER_SERVICE_ID = "adduser"; export default function AddUserService () { return <Service id={ ADDUSER_SERVICE_ID } path="/adduser" method="POST"> <Middleware callback={serviceWithDataLayer(async function (dataLayer, req, res, next) { const parsedBody: IUserEntry = JSON.parse(req.body); await mutate( dataLayer.client, dataLayer.setEntryMutation(USER_ENTRY_ID, parsedBody) ); res.status(200).set({ "Access-Control-Allow-Origin" : "*", // Required for CORS support to work }).send("ok"); })}/> </Service> }; 

<Service /> घटक - तीन मापदंडों को स्वीकार करता है:

• पहचानकर्ता ( id ) एक अद्वितीय स्ट्रिंग होना चाहिए। जब हम अन्य घटकों में service को कॉल करना चाहते हैं तो हम एक पहचानकर्ता ( id ) का उपयोग करते हैं।
• path (प्रारंभिक / के साथ) आपकी सेवा के सापेक्ष URL पथ को दर्शाता है
• method GET , POST , UPDATE , DELETE एक होनी चाहिए। उन्होंने HTTP अनुरोध इंगित करता है कि, जिसका उपयोग हम सेवा को फोन।

हम जोड़ने <Middleware /> एक बच्चे तत्व के रूप में। यह <Middleware /> एक पैरामीटर के रूप में कॉलबैक फ़ंक्शन लेता है। हम सीधे Express.js मिडलवेयर प्रदान कर सकते हैं। क्योंकि हम डेटाबेस के लिए उपयोग करना चाहते हैं, हम समारोह निष्कर्ष निकालना serviceWithDataLayer । यह हमारे कॉलबैक के पहले पैरामीटर के रूप में dataLayer जोड़ता है।

DataLayer डेटाबेस तक पहुँच प्रदान करता है। आइए देखें कैसे!

mutate एसिंक्रोनस फ़ंक्शन हमारे डेटाबेस में डेटा में परिवर्तन लागू करता है। इसके लिए पैरामीटर के रूप में क्लाइंट और म्यूटेशन कमांड की आवश्यकता होती है।

तत्व डेटा एक जावास्क्रिप्ट ऑब्जेक्ट है जिसमें सभी आवश्यक कुंजी-मूल्य जोड़े हैं। हमारी सेवा में, हमें अनुरोध निकाय से यह वस्तु मिलती है। User ऑब्जेक्ट में निम्न संरचना है:

 export interface IUserEntry { username: string, userid: string, age: string, address: string } 

यह ऑब्जेक्ट primaryKey नाम और rangeKey और उन सभी डेटा कुंजियों को लेता है जिन्हें हमने <Entry /> में परिभाषित किया था।

नोट: अभी के लिए, एकमात्र समर्थित प्रकार एक स्ट्रिंग है जो <Entry /> की परिभाषा में एक ग्राफकलाइनस्ट्रिंग से मेल खाता है।
हमने ऊपर उल्लेख किया है कि हम शरीर से IUserEntry डेटा लेते हैं। यह कैसा चल रहा है?

इन्फ्रास्ट्रक्चर घटक अतुल्यकालिक फ़ंक्शन callService (serviceId, dataObject) प्रदान करते हैं। यह फ़ंक्शन एक सेवा पहचानकर्ता, एक जावास्क्रिप्ट ऑब्जेक्ट ( POST का उपयोग करते समय एक अनुरोध निकाय के रूप में भेजने के लिए), एक success समारोह और एक त्रुटि कॉलबैक फ़ंक्शन को स्वीकार करता है।

निम्नलिखित स्निपेट दिखाता है कि हम अपने <AddUserService /> को कॉल करने के लिए इस फ़ंक्शन का उपयोग कैसे करते हैं। हम सेवा को निर्दिष्ट करते हैं। और हम userData पास userData , जिसे हम अपने फ़ंक्शन के पैरामीटर के रूप में लेते हैं।

 export async function callAddUserService (userData: IUserEntry) { await callService( ADDUSER_SERVICE_ID, userData, (data: any) => { console.log("received data: ", data); }, (error) => { console.log("error: " , error) } ); }; डेटा); export async function callAddUserService (userData: IUserEntry) { await callService( ADDUSER_SERVICE_ID, userData, (data: any) => { console.log("received data: ", data); }, (error) => { console.log("error: " , error) } ); }; 

अब callAddUserService फ़ंक्शन वह सब है जिसकी हमें आवश्यकता है जब हम एक नया उपयोगकर्ता जोड़ना चाहते हैं। उदाहरण के लिए, उपयोगकर्ता द्वारा बटन क्लिक करने पर इसे कॉल करें:

 <button onClick={() => callAddUserService({ username: username, userid: userid, age: age, address: address })}>Save</button> 

हम इसे IUserEntry ऑब्जेक्ट का उपयोग करके कहते हैं। यह सही सेवा कहता है (जैसा कि इसके पहचानकर्ता ( id ) द्वारा इंगित किया गया है)। यह रिक्वेस्ट बॉडी में userData डालता है। <AddUserService /> एक डेटाबेस में शरीर और पुट उनमें से बाहर डेटा लेता है।

डेटाबेस से आइटम प्राप्त करें

डेटाबेस से आइटमों को पुनर्प्राप्त करना उन्हें जोड़ना जितना आसान है।

 export default function GetUserService () { return <Service id={ GETUSER_SERVICE_ID } path="/getuser" method="GET"> <Middleware callback={serviceWithDataLayer(async function (dataLayer, req, res, next) { const data = await select( dataLayer.client, dataLayer.getEntryQuery(USER_ENTRY_ID, { username: req.query.username, userid: req.query.userid }) ); res.status(200).set({ "Access-Control-Allow-Origin" : "*", // Required for CORS support to work }).send(JSON.stringify(data)); })}/> </Service> } 

फिर, हम डेटाबेस तक पहुंच के साथ <Service />, <Middleware /> और एक कॉलबैक फ़ंक्शन का उपयोग करते हैं।

mutate फ़ंक्शन के बजाय, जो डेटाबेस में एक आइटम जोड़ता है, हम select फ़ंक्शन select उपयोग करते select । यह फ़ंक्शन उस क्लाइंट के लिए पूछता है जिसे हम dataLayer से ले रहे हैं। दूसरा पैरामीटर select कमांड है। mutation कमांड की तरह, हम dataLayer का उपयोग करके एक select कमांड बना सकते हैं।

इस बार हम getEntryQuery फ़ंक्शन का उपयोग करते हैं। हम पहचानकर्ता ( id ) <Entry /> प्रदान करते हैं जिसका तत्व हम प्राप्त करना चाहते हैं। और हम जावास्क्रिप्ट ऑब्जेक्ट में एक विशेष तत्व की कुंजी ( primaryKey और rangeKey ) प्रदान करते हैं। चूंकि हम दोनों चाबियाँ प्रदान करते हैं, इसलिए हमें एक तत्व वापस मिलता है। अगर यह मौजूद है।

जैसा कि आप देख सकते हैं, हम अनुरोध से प्रमुख मान लेते हैं। लेकिन इस बार हम उन्हें request.query से लेते हैं, न कि request.body । कारण यह है कि यह सेवा GET विधि का उपयोग करती है। यह विधि अनुरोध में शरीर का समर्थन नहीं करती है। लेकिन यह सभी डेटा को क्वेरी पैरामीटर के रूप में प्रदान करता है।

callService फ़ंक्शन हमारे लिए इसे संभालता है। जैसे callAddUserService-function , हम पहचानकर्ता ( id ) <Service /> प्रदान करते हैं जिसे हम कॉल करना चाहते हैं। हम आवश्यक डेटा प्रदान करते हैं। यहाँ सिर्फ चाबियाँ हैं। और हम कॉलबैक फ़ंक्शन प्रदान करते हैं।

एक सफल कॉलबैक एक प्रतिक्रिया प्रदान करता है। Json स्वरूप में प्रतिक्रिया निकाय में हमारा पाया तत्व होता है। हम इस तत्व को get_user_entry कुंजी के माध्यम से एक्सेस कर सकते हैं। " Get_ " उस अनुरोध को परिभाषित करता है जिसे हमने अपने चयनित फ़ंक्शन में रखा था। " User_entry " हमारे <Entry /> की कुंजी है।

 export async function callGetUserService (username: string, userid: string, onData: (userData: IUserEntry) => void) { await callService( GETUSER_SERVICE_ID, { username: username, userid: userid }, async function (response: any) { await response.json().then(function(data) { console.log(data[`get_${USER_ENTRY_ID}`]); onData(data[`get_${USER_ENTRY_ID}`]); }); }, (error) => { console.log("error: " , error) } ); } {USER_ENTRY_ID}`]); export async function callGetUserService (username: string, userid: string, onData: (userData: IUserEntry) => void) { await callService( GETUSER_SERVICE_ID, { username: username, userid: userid }, async function (response: any) { await response.json().then(function(data) { console.log(data[`get_${USER_ENTRY_ID}`]); onData(data[`get_${USER_ENTRY_ID}`]); }); }, (error) => { console.log("error: " , error) } ); } 

कार्रवाई में अपने फुल-स्टैक ऐप पर एक नज़र डालें।

यदि आपने अभी तक अपना आवेदन शुरू नहीं किया है, तो अब यह करने का समय है: npm run start-{your-env-name} ।

आप एक भी आदेश के साथ एडब्ल्यूएस के लिए आपके आवेदन को तैनात कर सकते हैं: npm run deploy-{your-env-name} । (.Env फ़ाइल में AWS क्रेडेंशियल्स रखना याद रखें)।

इस पोस्ट में यह नहीं बताया गया है कि आप डेटाबेस में डाले गए डेटा को कैसे दर्ज करते हैं और आप परिणाम कैसे प्रदर्शित करते हैं। callAddUserService और callGetUserService कि सभी सेवाओं और डेटाबेस के लिए विशिष्ट है संपुटित। आप बस जावास्क्रिप्ट ऑब्जेक्ट को वहां रखें और वापस प्राप्त करें।

आपको इस GitHub रिपॉजिटरी में इस उदाहरण के लिए स्रोत कोड मिलेगा। इसमें एक बहुत ही सरल उपयोगकर्ता इंटरफ़ेस शामिल है।