Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> Bash प्रोग्रामिंग

बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका <पी> जब आप अपने बैकएंड एपीआई और फ्रंटएंड परिनियोजन के लिए कई वातावरणों - जैसे स्टेजिंग और प्रोडक्शन - के साथ एक प्रोजेक्ट पर काम कर रहे हैं, तो आप यह सुनिश्चित करना चाहेंगे कि आपके पास अपने रिपॉजिटरी में प्रत्येक शाखा के लिए सही कॉन्फ़िगरेशन और कमांड हैं।

<पी> यह उन स्थितियों में चुनौतीपूर्ण हो सकता है जहां कई डेवलपर सक्रिय रूप से कोडबेस पर काम कर रहे हैं, विभिन्न शाखाओं में बदलाव कर रहे हैं, या कई शाखा-विशिष्ट कॉन्फ़िगरेशन प्रबंधित कर रहे हैं।

<पी> किसी शाखा में भेजे गए प्रत्येक पुल अनुरोध या परिवर्तन की तरह, आपको यह निर्णय लेने से पहले कोड की प्रत्येक पंक्ति की समीक्षा करनी होगी कि क्या विलय किया जाएगा या नहीं। कोडबेस में कॉन्फ़िगरेशन फ़ाइलें इससे मुक्त नहीं हैं, जिससे उनमें त्रुटियां होने की संभावना रहती है, क्योंकि एक साधारण परिवर्तन आपके संपूर्ण सतत एकीकरण सेटअप को प्रभावित कर सकता है।

<पी> जब स्टेजिंग या उत्पादन शाखा में परिवर्तन किए जाते हैं और एक निर्माण शुरू हो जाता है, तो आप यह सुनिश्चित करना चाहेंगे कि शाखा से जुड़े सही संसाधन बनाए रखे जाएं। कुछ मामलों में, आपको प्रत्येक संबंधित क्लाइंट के लिए अलग-अलग रीडायरेक्ट नियमों, कस्टम बिल्ड कमांड या प्रत्येक शाखा के लिए अन्य सेटिंग्स को परिभाषित करने की आवश्यकता हो सकती है।

<पी> इस लेख में, मैं एक साधारण बैश स्क्रिप्ट का उपयोग करके स्वचालित रूप से कई शाखाओं के लिए रीडायरेक्ट सहित शाखा-विशिष्ट कॉन्फ़िगरेशन को प्रबंधित करने के तरीके के बारे में बताऊंगा। मैं आपको यह भी दिखाऊंगा कि Netlify पर अपनी स्टेजिंग और उत्पादन शाखाओं के लिए संदर्भ-विशिष्ट नियमों को सुरक्षित रूप से कैसे मर्ज किया जाए।

हम क्या कवर करेंगे:

  • <पी> परियोजना संरचना और परिदृश्य

  • <पी> रीडायरेक्ट/रीराइट क्या हैं?

  • <पी> Netlify प्रक्रियाएं कैसे रीडायरेक्ट करती हैं

    • <पी> _redirects फ़ाइल सिंटैक्स

      का उपयोग करना
    • <पी> Netlify.toml कॉन्फ़िगरेशन फ़ाइल सिंटैक्स

      का उपयोग करना
  • <पी> समस्या:विभिन्न शाखाओं के लिए एकाधिक Netlify.toml फ़ाइलें प्रबंधित करना

  • <पी> हमारी कॉन्फ़िगरेशन फ़ाइल को स्वचालित रूप से बनाने के लिए स्क्रिप्ट कैसे लिखें

    • <पी> नमूना Netlify.toml फ़ाइल

    • <पी> चरण 1:स्क्रिप्ट फ़ोल्डर बनाएं और स्क्रिप्ट फ़ाइल जोड़ें

    • <पी> चरण 2:स्क्रिप्ट कमांड को शामिल करने के लिए package.json को संशोधित करें

  • <पी> Netlify पर अपने क्लाइंट को कैसे तैनात करें

    • <पी> Netlify

      पर आपके प्रोजेक्ट की पहली तैनाती
    • <पी> अनुवर्ती तैनाती / शाखा तैनाती कैसे स्थापित करें

      • <पी> चरण 1:प्रत्येक शाखा संदर्भ के लिए नेटलिफ़ाइ में पर्यावरण चर सेट करें - उत्पादन, स्टेजिंग, इत्यादि

      • <पी> चरण 2:एक नया परिनियोजन ट्रिगर करें

  • <पी> अपनी तैनाती का निरीक्षण करें

  • <पी> निष्कर्ष

प्रोजेक्ट संरचना और परिदृश्य

<पी> ऐसी स्थिति पर विचार करें जहां आपके पास एक प्रोजेक्ट के लिए दो अलग-अलग सर्वर तैनात हैं:एक स्टेजिंग वातावरण में अनुरोधों को पूरा करने के लिए (रेंडर के लिए तैनात), और दूसरा उत्पादन वातावरण के लिए (Google क्लाउड रन पर तैनात)।

<पी> आपके पास Netlify पर दो अलग-अलग क्लाइंट परिनियोजन भी हैं, प्रत्येक अपने संबंधित API_BASE_URL के साथ, जो उनके संबंधित सर्वर द्वारा परोसा जाता है जैसा कि नीचे दिखाया गया है:

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> नीचे दी गई छवि sample-project है रिपॉजिटरी, api के साथ और client इसके अंदर फ़ोल्डर/निर्देशिकाएँ। यह ऊपर उल्लिखित प्रत्येक शाखा की संरचना का एक सिंहावलोकन है। प्रत्येक निर्देशिका का अपना package.json होता है फ़ाइल को एक स्वतंत्र घटक के रूप में माना जाता है, और इसे दो अलग-अलग सेवाओं में तैनात किया जा सकता है।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> प्रत्येक क्लाइंट के लिए आपके फ्रंटएंड परिनियोजन में, आपके सभी अनुरोध /api/v1/ से शुरू होने वाले एंडपॉइंट पर किए गए हैं। सर्वर पर रूट किया जाता है. अन्य मार्ग आपको क्लाइंट के भीतर पृष्ठों तक निर्देशित करने के लिए फ्रंटएंड के भीतर रहते हैं। इसलिए आपको इन अनुरोधों को संसाधित करने के तरीके पर अपने ग्राहक का मार्गदर्शन करने के लिए सही नियम लिखने होंगे। इन्हें पुनर्निर्देशन नियम या पुनर्लेखन कहा जाता है।

रीडायरेक्ट/रीराइट क्या हैं?

<पी> रीडायरेक्ट, या पुनर्लेखन, ऐसे नियम हैं जिन्हें आप कुछ यूआरएल को स्वचालित रूप से इंटरनेट पर कहीं भी एक नए स्थान पर ले जाने के लिए बना सकते हैं (स्रोत:WPengine)। इन्हें आम तौर पर URL अग्रेषण के रूप में भी जाना जाता है और आप उनका उपयोग कहीं भी कर सकते हैं - संपूर्ण वेबसाइटों में, वेबसाइट के अनुभागों में, या संपूर्ण वेब एप्लिकेशन में।

<पी> वेब अनुप्रयोगों में, अनुरोधों को कैसे संसाधित किया जाए यह निर्धारित करने के लिए अक्सर रीडायरेक्ट का उपयोग किया जाता है। Netlify और Vercel जैसे वेब होस्टिंग प्लेटफ़ॉर्म भी उनका उपयोग करते हैं, जिससे डेवलपर्स को यह निर्धारित करने का विकल्प मिलता है कि उनके वेब एप्लिकेशन अनुरोधों को कैसे संसाधित करते हैं।

नेटलिफाई प्रक्रियाएं कैसे रीडायरेक्ट करती हैं

<पी> रीडायरेक्ट नियमों को निर्दिष्ट करने के लिए Netlify के पास दो संभावित तरीके हैं। आप इसे _redirects का उपयोग करके कर सकते हैं फ़ाइल सिंटैक्स या netlify.toml का उपयोग करना कॉन्फ़िगरेशन फ़ाइल सिंटैक्स। वे एक ही लक्ष्य प्राप्त करते हैं, लेकिन netlify.toml सिंटैक्स आपको अधिक विकल्प और क्षमताएं देता है।

_redirects का उपयोग करना फ़ाइल सिंटैक्स

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

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> उपरोक्त नियम की व्याख्या इस प्रकार की जा सकती है:

  1. <पी> मेरे सभी अनुरोध भेजें जो /api/v1 से मेल खाते हों निर्दिष्ट एपीआई यूआरएल पर, और 200 सफलता स्थिति कोड लौटाएं। /api/v1/ के बाद तारांकन चिह्न (*)। जैसा कि /api/v1/* में देखा गया है इसे बताए गए एपीआई यूआरएल में मूल यूआरएल के किसी अन्य एक्सटेंशन को जोड़ने का निर्देश दें। उदाहरण के लिए, यदि आपके पास /api/v1/users है आपके फ़्रंटएंड में रूट, वह अनुरोध https://your-api-base-url.com/api/v1/users पर पुनर्निर्देशित किया जाएगा . :splat एपीआई में देखा गया यूआरएल बस एक प्लेसहोल्डर है।
  2. <पी> अन्य सभी डिफ़ॉल्ट मार्गों को फ़ोल्डर के माध्यम से परोसें। यह सुनिश्चित करने के लिए आवश्यक है कि जब आप अन्य पृष्ठों पर नेविगेट करते हैं और "बैक" बटन का उपयोग करके पिछले पृष्ठ पर जाने का प्रयास करते हैं तो आपको टूटे हुए पृष्ठ नहीं मिलते हैं।

netlify.toml का उपयोग करना कॉन्फ़िगरेशन फ़ाइल सिंटैक्स

<पी> netlify.toml रीडायरेक्ट नियमों को निर्दिष्ट करते समय कॉन्फ़िगरेशन फ़ाइल आपको बहुत अधिक लचीलापन देती है, जिसमें मूल अनुरोध मार्ग, आवश्यक गंतव्य, पसंदीदा स्थिति कोड प्रतिक्रिया, हेडर नियम, हस्ताक्षर, देश प्रतिबंध, भूमिकाएं और बहुत कुछ शामिल है, लेकिन यह इन्हीं तक सीमित नहीं है।

<पी> यह एक नमूना netlify.toml है फ़ाइल Netlify के दस्तावेज़ से ली गई है:

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> त्वरित नोट: हमारे एपीआई पर कुछ अनुरोधों को पुनर्निर्देशित करने के लिए रीडायरेक्ट फ़ाइल का उपयोग करना बिल्कुल ठीक है। लेकिन रीडायरेक्ट में सादे टेक्स्ट में हमारे एपीआई यूआरएल को जोड़ना एक सुरक्षा जोखिम माना जा सकता है यदि API_BASE_URL को निजी माना जाता है तो फ़ाइल करें। ऐसा इसलिए है क्योंकि सार्वजनिक फ़ोल्डर में कोई भी फ़ाइल वैसी ही होती है जैसी लगती है - सार्वजनिक - और कोई भी उस तक पहुंच सकता है।

<पी> यदि आप अपने ऐप में जो प्रत्यक्ष स्थान चाहते हैं, वे सार्वजनिक यूआरएल हैं, तो बेझिझक _redirects का उपयोग करें फ़ाइल सिंटैक्स. लेकिन यदि आप एक निजी यूआरएल रखना पसंद करते हैं, तो netlify.toml का उपयोग करें पर्यावरण चर के साथ संयोजन में कॉन्फ़िगरेशन फ़ाइल आम तौर पर एक बेहतर विचार है।

समस्या:एकाधिक netlify.toml को प्रबंधित करना विभिन्न शाखाओं के लिए फ़ाइलें

<पी> जब आप netlify.toml का उपयोग करते हैं आपके बिल्ड कमांड और पर्यावरण-विशिष्ट सेटिंग्स को परिभाषित करने के लिए फ़ाइल, और आप परिवर्तन करते हैं जो आपके रिपॉजिटरी में धकेल दिए जाते हैं और पुल अनुरोध खोलते हैं, आपको प्रत्येक netlify.toml को मैन्युअल रूप से अनदेखा या संपादित करना होगा। प्रत्येक शाखा में. यह अंततः बहुत तनावपूर्ण और त्रुटियों के प्रति संवेदनशील हो जाता है।

<पी> इसके अतिरिक्त, हम अपने एपीआई यूआरएल को हमारे _redirects में हार्डकोड किए जाने से बचना चाहते हैं। या netlify.toml सुरक्षा कारणों से हमारे प्रोजेक्ट कोडबेस के भीतर फ़ाइल करें। हम उत्पादन और स्टेजिंग संदर्भों के लिए हमारे नेटलिफाई यूआई में दिए गए पर्यावरण चर का उपयोग करेंगे। <पी> उपरोक्त समस्याओं से बचने के लिए, हम गतिशील रूप से सही netlify.toml उत्पन्न करने के लिए अपने कोडबेस में एक छोटी स्क्रिप्ट का उपयोग करेंगे। प्रत्येक शाखा के लिए फ़ाइलें। यह दृष्टिकोण टकराव को समाप्त करता है और शाखाओं के बीच स्विच करने या पुल अनुरोधों को संभालने के दौरान मैन्युअल हस्तक्षेप की आवश्यकता को हटा देता है।

हमारी कॉन्फ़िगरेशन फ़ाइल(फ़ाइलों) को स्वचालित रूप से बनाने के लिए स्क्रिप्ट कैसे लिखें

नमूना Netlify.toml फ़ाइल

<पी> नीचे एक नमूने का स्क्रीनशॉट है netlify.toml वह फ़ाइल जिसे हम प्रत्येक निर्माण के लिए प्राप्त करने का प्रयास कर रहे हैं। आप देख सकते हैं कि हमारे सभी अनुरोध api/v1/ से मेल खाते हैं हमारे कोडबेस में हमारे एपीआई पर रूट किया जाएगा।

<पी> आप अपने एपीआई एंडपॉइंट अनुरोधों को अलग तरह से संरचित कर सकते हैं, उदाहरण के लिए /api/your-endpoint - बस स्क्रिप्ट को तदनुसार समायोजित करना सुनिश्चित करें। इस नमूना प्रोजेक्ट में, हम api/v1/your-endpoint का उपयोग करते हैं हमारी संरचना के रूप में।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

चरण 1:स्क्रिप्ट फ़ोल्डर बनाएं और स्क्रिप्ट फ़ाइल जोड़ें

<पी> client में निर्देशिका, एक scripts/ बनाएं निर्देशिका और एक configure-netlify.sh स्क्रिप्ट फ़ाइल. आपको अपने रेपो की प्रत्येक शाखा के लिए ऐसा करना आवश्यक है। सामग्री वही रहती है.

<पी> configure-netlify.sh खोलें स्क्रिप्ट फ़ाइल बनाएं और उसमें निम्नलिखित सामग्री चिपकाएँ:

#!/bin/bash
# Ensure API_BASE_URL is set
if [ -z "$API_BASE_URL" ]; then
 echo "Error: API_BASE_URL environment variable is not set."
 exit 1 # Exit the script to stop the deployment
fi
echo "Using API endpoint: $API_BASE_URL"
# Define the desired Netlify configuration
NETLIFY_CONFIG="
[build]
 command = \"npm install && npm run build\"
 base = \"client\"
 publish = \"dist\"
[[redirects]]
 from = \"/api/v1/*\"
 to = \"$API_BASE_URL/:splat\"
 status = 200
 force = true
[[redirects]]
 from = \"/*\"
 to = \"/index.html\"
 status = 200
"
# Create or update the netlify.toml file
if [ ! -f "netlify.toml" ]; then
 echo "Creating netlify.toml file..."
else
 echo "Updating existing netlify.toml file..."
fi
echo "$NETLIFY_CONFIG" > netlify.toml
# Confirm successful configuration
echo "netlify.toml file has been configured successfully!"
<पी> स्क्रिप्ट निम्न कार्य करती है:

  1. <पी> यह सुनिश्चित करने के लिए पर्यावरण चर की जाँच करता है कि API_BASE_URL सेट है. यदि यह सेट नहीं है, तो यह बिल्ड से बाहर निकल जाता है और इसके विफल होने का कारण बनता है। हमने यह सुनिश्चित करने के लिए ऐसा किया है कि आप गलती से एक सफल परिनियोजन न बनाएं बल्कि उत्पादन में अमान्य URL न बनाएं।

  2. <पी> इसके बाद यह netlify.toml की सामग्री बनाता है फ़ाइल जैसा कि ऊपर नमूने में दिखाया गया है। यदि आपका एपीआई एंडपॉइंट api/v1/your-endpoint से भिन्न संरचना का उपयोग करता है , आप अपनी इच्छित संरचना में फिट होने के लिए स्क्रिप्ट को समायोजित कर सकते हैं।

  3. <पी> यह जाँचता है कि क्या कोई netlify.toml पहले से मौजूद है फ़ाइल. यदि यह अस्तित्व में नहीं है, तो यह एक बनाता है और उसमें सामग्री लिखता है। यदि यह मौजूद है, तो यह API_BASE_URL का उपयोग करके निर्माण के दौरान इसे सही सामग्री के साथ अपडेट करता है पर्यावरण चर में सेट करें।

चरण 2:package.json को संशोधित करें स्क्रिप्ट कमांड शामिल करने के लिए

<पी> इस स्क्रिप्ट को आपकी निर्माण प्रक्रिया के साथ एकीकृत करने के लिए, हम package.json में एक स्क्रिप्ट कमांड जोड़ेंगे वास्तविक बिल्ड चलाने से पहले इस स्क्रिप्ट को कॉल करने के लिए फ़ाइल करें।

<पी> configure-netlify जोड़ें कमांड इस प्रकार है:"configure-netlify": "bash scripts/ configure-netlify.sh" आपके package.json में स्क्रिप्ट के भीतर फ़ाइल.

<पी> वास्तविक बिल्ड चलाने से पहले स्क्रिप्ट चलाने के लिए अपने बिल्ड कमांड को अपडेट करें:"build": "npm run configure-netlify && vite build" .

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> इन परिवर्तनों को सहेजना और उन्हें अपने दूरस्थ रिपॉजिटरी में भेजना न भूलें।

नेटलिफाई के लिए अपने क्लाइंट को कैसे तैनात करें

<पी> अपने क्लाइंट को Netlify पर तैनात करते समय, हमें तीन विकल्प दिए जाते हैं:

  1. <पी> किसी मौजूदा प्रोजेक्ट को आयात करना (अर्थात, एक प्रोजेक्ट जो GitHub और GitLab जैसी git रिपॉजिटरी सेवा पर मौजूद है),

  2. <पी> किसी टेम्पलेट से आयात करना, या

  3. <पी> Netlify ड्रॉप (ड्रैग एंड ड्रॉप) इंटरफ़ेस का उपयोग करके एक स्थिर साइट को मैन्युअल रूप से तैनात करना।

<पी> हमारी बिल्ड प्रक्रिया के दौरान हमारी रिपॉजिटरी में कॉन्फ़िगरेशन अपेक्षित रूप से काम करे, इसके लिए आपको उस विकल्प का उपयोग करना होगा जिसके लिए GitHub जैसे मौजूदा प्रोजेक्ट से आयात करने की आवश्यकता होगी। ड्रैग-एंड-ड्रॉप इंटरफ़ेस का उपयोग काम नहीं करेगा। यदि आपको इसका उपयोग करना ही है, तो _redirects का विकल्प चुनें आपके रीडायरेक्ट को परिभाषित करने के लिए फ़ाइल सिंटैक्स विकल्प।

Netlify पर आपके प्रोजेक्ट की पहली तैनाती

<पी> अपने प्रोजेक्ट को पहली बार तैनात करते समय, आपको शुरुआत में केवल एक शाखा तैनात करने का विकल्प दिया जाता है। आप बाद की तैनाती में केवल अन्य विकल्प, जैसे अन्य शाखाएँ, जोड़ और निर्दिष्ट कर सकते हैं।

<पी> अपने प्रोजेक्ट को तैनात करने के लिए, निम्नलिखित कदम उठाएं:

  1. <पी> Netlify>netlify.com

    में साइन इन करें
  2. <पी> "नई साइट जोड़ें"> "मौजूदा प्रोजेक्ट आयात करें"> "GitHub के साथ परिनियोजन" पर क्लिक करें

  3. <पी> "GitHub पर Netlify कॉन्फ़िगर करें" पर क्लिक करें> अपनी रिपॉजिटरी खोजें> इसे चुनें

  4. <पी> अपने प्रोजेक्ट के लिए एक अद्वितीय साइट नाम दर्ज करें

  5. <पी> परिनियोजन सेटिंग्स कॉन्फ़िगर करें. यहां आपको तैनाती के लिए पसंदीदा शाखा का चयन करना होगा। प्रारंभिक तैनाती के लिए, हम main तैनात करेंगे वह शाखा जिसका उपयोग हम उत्पादन शाखा के रूप में करते हैं।

    • <पी> शाखा:मुख्य/मास्टर

    • <पी> बिल्ड कमांड:npm run build
    • <पी> निर्देशिका प्रकाशित करें:dist (उस निर्देशिका का चयन करें जहां आपकी स्थिर फ़ाइल रहती है। इस नमूना प्रोजेक्ट में, इसे dist में निर्यात किया गया है निर्देशिका. कुछ उपकरण build में निर्यात होते हैं )

  6. <पी> अपने प्रोजेक्ट के लिए पर्यावरण चर दर्ज करें। अपना API_BASE_URL दर्ज करना न भूलें आपके सर्वर से. बैश स्क्रिप्ट के अनुसार यह एक आवश्यक आवश्यकता है।

  7. <पी> "साइट तैनात करें"

    पर क्लिक करें
<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> आपका प्रोजेक्ट सही ढंग से तैनात होना चाहिए, और आप netlify.toml देख पाएंगे सफल परिनियोजन पृष्ठ के नीचे परिनियोजन विवरण का निरीक्षण करके स्क्रिप्ट द्वारा उत्पन्न कॉन्फ़िगरेशन।

<पी> उत्पन्न कॉन्फ़िगरेशन को देखने के लिए आप इस फ़ाइल को अपनी स्थानीय मशीन पर डाउनलोड कर सकते हैं। इसे नमूने netlify.toml से मेल खाना चाहिए उपरोक्त फ़ाइल. आप यह भी परीक्षण कर सकते हैं कि यह आपके जेनरेट किए गए साइट लिंक का उपयोग करके काम करता है।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

बाद की तैनाती / शाखा तैनाती कैसे स्थापित करें

चरण 1:प्रत्येक शाखा संदर्भ के लिए Netlify में पर्यावरण चर सेट करें  — उत्पादन, स्टेजिंग, इत्यादि

<पी> जब आपका प्रोजेक्ट सफलतापूर्वक तैनात हो जाता है, तो आप अपनी स्टेजिंग शाखा के लिए तैनाती स्थापित कर सकते हैं। कॉन्फ़िगरेशन को संपादित करने के लिए, आपको यह करना होगा:

  1. <पी> अपनी साइटों की सूची पर नेविगेट करें

  2. <पी> अपनी सफलतापूर्वक परिनियोजित साइट

    चुनें
  3. <पी> बाएं मेनू पर "साइट कॉन्फ़िगरेशन" पर क्लिक करें

  4. <पी> "पर्यावरण चर" चुनें> "एक चर जोड़ें" बटन पर क्लिक करें।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> आपको व्यक्तिगत रूप से वेरिएबल जोड़ने या संपूर्ण .env आयात करने का विकल्प दिया जाएगा फ़ाइल. आप कोई भी विकल्प चुन सकते हैं. नीचे दी गई छवि में, मैंने ".env से आयात करें" चुना है फ़ाइल"।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> यह देखते हुए कि हमारी उत्पादन साइट, main से तैनात की गई है शाखा (उत्पादन पर्यावरण चर के साथ), पहले ही तैनात की जा चुकी है, आपको इसकी आवश्यकता होगी:

  1. <पी> उत्पादन शाखा को अनचेक करें (प्रारंभिक रूप से तैनात मुख्य शाखा को बदलने से रोकने के लिए। सावधान रहें कि विभिन्न शाखाओं के लिए अपने पर्यावरण चर को न मिलाएं)

  2. <पी> “शाखा परिनियोजन”

    चुनें
  3. <पी> अपनी .env फ़ाइल की सामग्री को इनपुट अनुभाग

    में कॉपी और पेस्ट करें
  4. <पी> API_BASE_URL जोड़ना न भूलें आपके स्टेजिंग परिवेश के लिए पर्यावरण चर

<पी> ध्यान दें कि शाखा परिनियोजन का चयन करते समय, यहां आयातित पर्यावरण चर उत्पादन शाखा के अलावा, सभी शाखा परिनियोजन को प्रभावित करेगा। आप एक कस्टम शाखा का चयन करके अपने संदर्भों को और अधिक अनुकूलित कर सकते हैं, लेकिन यह एक पूरी तरह से अलग दृष्टिकोण है जिसके लिए आपको अपने netlify.toml को और अधिक अनुकूलित करने की आवश्यकता हो सकती है। कॉन्फ़िगरेशन फ़ाइल या बैश स्क्रिप्ट.

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> यदि आप प्रत्येक पर्यावरण चर को व्यक्तिगत रूप से आयात करने का निर्णय लेते हैं, तो आपको एक समान विकल्प दिया जाएगा जैसा कि नीचे देखा गया है। सुनिश्चित करें कि आपने प्रत्येक शाखा के लिए सही संदर्भ का चयन किया है।

<पी> सभी संदर्भों के लिए समान मानों का उपयोग न करें. जैसा कि नीचे दी गई छवि में देखा गया है, "प्रत्येक परिनियोजन संदर्भ के लिए भिन्न मान" का चयन करें "आपको प्रत्येक के लिए मूल्यों को परिभाषित करने की अनुमति देगा। इस मामले में, हम शाखा परिनियोजन के लिए मान परिभाषित करते हैं। आपका प्रारंभ में उपयोग किया गया उत्पादन वैरिएबल पहले से मौजूद होना चाहिए।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

<पी> जब सभी वेरिएबल आयात कर लिए जाते हैं, तो आप प्रत्येक वेरिएबल के बगल में दाईं ओर ड्रॉपडाउन का चयन करके और उनके मूल्यों का निरीक्षण करके यह पुष्टि करने के लिए उनका निरीक्षण कर सकते हैं कि उन्हें सही ढंग से आयात किया गया है।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

चरण 2:एक नई तैनाती ट्रिगर करें

<पी> जब आपके सभी पर्यावरण चर विभिन्न संदर्भों के लिए आयात किए गए हैं - इस मामले में उत्पादन और स्टेजिंग - अपनी स्क्रीन के बाएं पैनल पर "तैनाती" पर नेविगेट करें। फिर "ट्रिगर परिनियोजन" बटन दबाएं, कैश साफ़ करें, और एक नई परिनियोजन आरंभ करें।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

अपनी तैनाती का निरीक्षण करें

<पी> आप किसी भी परिनियोजन का चयन करके और "परिनियोजन लॉग" में बिल्डिंग ड्रॉपडाउन का चयन करके पुष्टि कर सकते हैं कि आपकी स्क्रिप्ट अपेक्षा के अनुरूप काम करती है। आप कमांड रन, साथ ही उस परिनियोजन के लिए अपना आउटपुट और एपीआई यूआरएल देखेंगे, जैसा कि आपके संदर्भ द्वारा परिभाषित किया गया है।

<पी> बैश के साथ शाखा-विशिष्ट नेटलाइज़ कॉन्फ़िगरेशन को स्वचालित करें - एक चरण-दर-चरण मार्गदर्शिका

निष्कर्ष

<पी> इस गाइड में दिए गए चरणों का पालन करके, और अपने रेपो में प्रत्येक शाखा में अपनी स्क्रिप्ट और अपडेट किए गए कमांड का उपयोग करके, जब आप परिवर्तन दबाते हैं तो नेटलिफाई स्वचालित रूप से netlify.toml उत्पन्न या अपडेट कर देगा। प्रत्येक शाखा में फ़ाइल. यह सुनिश्चित करता है कि निर्माण के समय प्रत्येक वातावरण के लिए सही कॉन्फ़िगरेशन और पर्यावरण चर का उपयोग किया जाता है।

<पी> आपकी स्क्रिप्ट सभी शाखाओं में समान रहती है। यह आपको अन्य कोड परिवर्तनों पर ध्यान केंद्रित करने देता है जबकि आपकी स्क्रिप्ट आपके लिए सही कॉन्फ़िगरेशन को सुरक्षित और आसानी से संभालती है।

<पी> इसे कार्यान्वित होते देखने के लिए किसी भी शाखा में परिवर्तन पुश करें।

<पी> बेझिझक मुझसे ट्विटर (@francisihej) या लिंक्डइन पर जुड़ें!

<पी> मुफ़्त में कोड करना सीखें. फ्रीकोडकैंप के ओपन सोर्स पाठ्यक्रम ने 40,000 से अधिक लोगों को डेवलपर्स के रूप में नौकरी पाने में मदद की है। आरंभ करें


  1. एचटीएमएल डोम पैडिंगबाएं संपत्ति एचटीएमएल डोम पैडिंगबाएं संपत्ति

    एचटीएमएल डोम पैडिंग लेफ्ट प्रॉपर्टी वापस आती है और एचटीएमएल तत्व में बाएं पैडिंग जोड़ती है। सिंटैक्स निम्नलिखित वाक्य रचना है - 1. वामपंथी पैडिंग लौटाना object.style.paddingLeft 2. बायां पैडिंग जोड़ना object.style.paddingLeft=”value” मान यहाँ, मान निम्नलिखित हो सकता है - Value विवर

  1. Matplotlib में ऊपरी/दाएं अक्ष टिक अंक कैसे बंद करें? Matplotlib में ऊपरी/दाएं अक्ष टिक अंक कैसे बंद करें?

    matplotlib में ऊपरी या दाएँ अक्ष के निशान को बंद करने के लिए, हम एक कस्टम शब्दकोश visible_ticks बना सकते हैं और झंडा बंद कर दें। कदम आकृति का आकार सेट करें और सबप्लॉट के बीच और आसपास पैडिंग समायोजित करें। numpy का उपयोग करके x और y डेटा बिंदु बनाएं। प्लॉट x और y डेटा पॉइंट प्लॉट () . का उपयोग करके

  1. HTML में फॉन्ट कलर कैसे सेट करें? HTML में फॉन्ट कलर कैसे सेट करें?

    HTML में फ़ॉन्ट रंग सेट करने के लिए, शैली विशेषता का उपयोग करें। शैली विशेषता किसी तत्व के लिए एक इनलाइन शैली निर्दिष्ट करती है। विशेषता का उपयोग HTML टैग के साथ, CSS गुण रंग के साथ किया जाता है। HTML5 टैग का समर्थन नहीं करता है, इसलिए CSS शैली का उपयोग फ़ॉन्ट रंग जोड़ने के लिए किया जाता है। HTML5