हाल ही में मैंने 2048 गेम के अपने ओपन सोर्स संस्करण को नया रूप दिया और इसे Next.js और React 18 पर स्थानांतरित करने का निर्णय लिया। मौजूदा गेम को बिना किसी कस्टम डोमेन के GitHub पेज पर प्रकाशित किया गया था। मैं वर्सेल में तैनात करने पर विचार कर रहा था लेकिन इससे Google से ऑर्गेनिक ट्रैफ़िक खो जाएगा जो पिछले 3 वर्षों में बना था। इसका मतलब है कि मुझे GitHub पेजों पर तैनाती के साथ प्रयोग करने की आवश्यकता है और आज मैंने जो सीखा है उसे साझा करूंगा। यदि आप पूरा लेख पढ़ने से पहले अंतिम परिणाम देखना चाहते हैं, तो देख सकते हैं . इसे यहां जांचें त्वरित परिचय मैं दो GitHub सुविधाओं का उपयोग करूंगा - GitHub Actions और GitHub Pages। यदि आपने उनके बारे में नहीं सुना है, तो मैं शीघ्रता से समझाता हूँ: छोटे वर्कफ़्लो की तरह हैं जो आपके प्रोजेक्ट पर कार्य कर सकती हैं। यह एक ऐसे सहायक की तरह है जो स्वचालित रूप से वह काम करता है जो आप उसे करने के लिए कहते हैं। आप परीक्षण चलाने, गुणवत्ता जांचने या अपना एप्लिकेशन बनाने के लिए क्रियाओं का उपयोग कर सकते हैं। मेरे मामले में, मैंने परिनियोजन पाइपलाइन को स्वचालित करने के लिए इस वर्कफ़्लो का उपयोग किया। GitHub क्रियाएँ क्या हैं? इन्हें डेवलपर्स और ओपन सोर्स प्रोजेक्ट्स के लिए एक वेब होस्टिंग विकल्प की तरह समझें। आप अपने पोर्टफ़ोलियो को साझा करने, अपने ओपन-सोर्स प्रोजेक्ट्स की वेबसाइटों को होस्ट करने, या मेरी तरह अपने पसंदीदा प्रोजेक्ट्स को प्रकाशित करने के लिए GitHub पेज का उपयोग कर सकते हैं। GitHub पेज अब चलिए शुरू करते हैं. चरण 1 - अपने रिपॉजिटरी के लिए GitHub पेज सक्रिय करें हमारे Next.js एप्लिकेशन को प्रकाशित करने के लिए, मुझे प्रोजेक्ट के रिपॉजिटरी के लिए GitHub पेज को सक्रिय करने की आवश्यकता थी। आप सेटिंग्स टैब (नीचे की छवि में 1) में पा सकते हैं, फिर बाईं ओर (2) मेनू से चयन करें, और ड्रॉपडाउन मेनू ढूंढें जो हमें परिनियोजन (3) निर्दिष्ट करने की अनुमति देता है। पेज का स्रोत अब आपको परिनियोजन में बदलने की आवश्यकता होगी। स्रोत को GitHub Actions अब से, आपके प्रोजेक्ट में एक समर्पित पृष्ठ होगा। आपको वहां केवल सामग्री प्रकाशित करने की आवश्यकता है। चरण 2 - Next.js बिल्ड प्रक्रिया को कॉन्फ़िगर करें Next.js ऐप को तैनात करने से पहले, बिल्ड आउटपुट को बदलना महत्वपूर्ण है। डिफ़ॉल्ट रूप से, Next.js एप्लिकेशन को चलाने के लिए Node.js का उपयोग करता है, और यह GitHub Pages के साथ असंगत है। GitHub Pages को स्टैटिक फ़ाइलों को होस्ट करने के लिए डिज़ाइन किया गया है, जिसका अर्थ है कि हम वहां केवल HTML, CSS, JavaScript (और अन्य स्टैटिक फ़ाइलें) प्रकाशित कर सकते हैं। इसलिए हमें Next.js में स्टेटिक पेज जेनरेशन को सक्षम करने की आवश्यकता होगी। ऐसा करने के लिए, आप आउटपुट मोड को के अंदर के लिए बदल देंगे: next.config.js export /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; अब चलाने के बाद, नेक्स्ट.जेएस आपके ऐप के लिए स्टैटिक एसेट्स वाला एक फोल्डर जेनरेट करेगा। अगले चरणों में, हम इस निर्देशिका को लेंगे और इसे GitHub पेज पर अपलोड करेंगे। next build out चरण 3 - गुम छवियाँ ठीक करें पेज किसी डोमेन के उप-पथ के अंतर्गत प्रकाशित होते हैं और प्रोजेक्ट का नाम उप-पथ के रूप में लेते हैं। भ्रमित करने वाला? आइए उदाहरण के तौर पर मेरे 2048 गेम के यूआरएल पर एक नज़र डालें: https://mateuszsokola.github.io/2048-in-react/ Github ने मेरे उपयोगकर्ता के लिए नामक एक समर्पित उपडोमेन बनाया। लेकिन प्रोजेक्ट को उप-पथ के अंतर्गत प्रकाशित किया गया है, जो मेरे मामले में है। दुर्भाग्य से, इससे गायब छवियों और शैलियों के साथ समस्याएं पैदा होंगी। mateuszsokola (मेरा उपयोगकर्ता नाम) /2048-in-react डिफ़ॉल्ट रूप से, Next.js डोमेन की सभी स्थिर संपत्तियों को मैप करता है। इसका मतलब यह है कि फ़ाइल को के बजाय पर हल किया जाएगा। favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon इसे ठीक करने के लिए, हम फ़ाइल के अंदर जोड़कर एक पथ उपसर्ग सेट कर सकते हैं: next.config.js basePath /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; मेरे मामले में, यह है क्योंकि मेरे प्रोजेक्ट को कहा जाता है। ) शामिल करना याद रखें। /2048-in-react 2048-in-react प्रोजेक्ट निर्देशिका की शुरुआत में ( / चरण 4 - जीथब क्रियाएँ बनाएँ Next.js परिनियोजन कलाकृतियाँ तैयार कर रहा है जिन्हें GitHub पेजों पर प्रकाशित किया जा सकता है। अब उन्हें प्रकाशित करने के लिए जीथब एक्शन स्थापित करने का समय आ गया है। मैंने पुन: प्रयोज्यता को बढ़ावा देने के लिए तैनाती को दो अलग-अलग कार्रवाइयों में विभाजित करने का निर्णय लिया: क्रिया Node.js को स्थापित करेगी और सभी निर्भरताएँ स्थापित करेगी। Node.js सेटअप के लिए एक स्टैंडअलोन कार्रवाई होने से मुझे अन्य पाइपलाइनों के लिए इसका पुन: उपयोग करने की अनुमति मिल जाएगी। उदाहरण के लिए, मेरे पास पाइपलाइनें हैं जो चलती हैं और . संभवतः आप एक से अधिक क्रियाएँ भी करना चाहते हैं। setup-node कोड लिंटर परीक्षण हर बार जब हम कोड को शाखा में मर्ज करते हैं तो कार्रवाई Next.js कलाकृतियों का निर्माण करेगी और उन्हें GitHub पेज पर प्रकाशित करेगी। main publish सबसे पहले मैं क्रिया को समझाकर शुरू करता हूँ। यहाँ कोड है: setup-node # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci : इस फ़ाइल को अपने प्रोजेक्ट में निर्देशिका में बनाएं। सुनिश्चित करें कि इसे कहा जाए। महत्वपूर्ण .github/workflows/setup-node action.yml यह स्निपेट क्या करता है? यह एक क्रिया बनाता है। क्रिया आपको एकाधिक वर्कफ़्लो चरणों को एक ही क्रिया में बंडल करने की अनुमति देती है। यदि यह स्पष्ट नहीं है तो आप इसे तब समझेंगे जब हम दूसरी कार्रवाई में उतरेंगे। composite composite यह Node.js 20 का उपयोग करके एक नया बिल्ड वातावरण बनाता है और प्रोजेक्ट निर्भरताएँ स्थापित करता है। ये क्रिया के सबसे महत्वपूर्ण भाग हैं। अब, आइए कार्रवाई पर आगे बढ़ें: setup-node publish # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4 इस फ़ाइल को अपने प्रोजेक्ट में निर्देशिका में बनाएँ। आप फ़ाइल को अपनी इच्छानुसार नाम दे सकते हैं - मैंने अपना कहा। .github/workflows publish.yml यह क्या करता है? यह क्रिया हर बार तब ट्रिगर होती है जब नया कोड शाखा में धकेला या मर्ज किया जाता है। main यह पर्यावरण को स्थापित करने के लिए क्रिया का उपयोग करता है। पिछली क्रिया में मैंने जो क्रिया बनाई थी। अब आप जानते हैं कि अपनी क्रियाओं को अन्य क्रियाओं में कैसे शामिल किया जाए। setup-node composite composite कार्रवाई के दो चरण हैं: पहले चरण में, Next.js ऐप बनाया जा रहा है। दूसरे चरण में, पहले चरण की कलाकृतियाँ GitHub पेज पर अपलोड की जाती हैं। ये परिनियोजन पाइपलाइन के सबसे महत्वपूर्ण पहलू हैं। मैंने अनुमतियाँ और समवर्ती सेटअप छोड़ दिया क्योंकि वे सभी GitHub पेज परिनियोजन के लिए अपरिवर्तित रहते हैं। अब, कार्रवाई उपयोग के लिए तैयार है. प्रतिबद्ध और धक्का आपके परिवर्तनों को शाखा में भेजने और भेजने के बाद, GitHub स्वचालित रूप से GitHub पेजों पर परिनियोजन को स्पिन कर देगा। main प्रक्रिया का निरीक्षण करने के लिए, टैब (नीचे की छवि में 1) पर नेविगेट करें, और बाईं ओर मेनू से एक्शन का चयन करें (2) आप स्क्रीन पर अपने सभी परिनियोजन देखेंगे (उन्हें कहा जाता है)। एक्शन पब्लिश-टू-जीथब-पेज । वर्कफ़्लो अब उन वर्कफ़्लोज़ में से पहला चुनें, और आप दो-चरणीय परिनियोजन देखेंगे। चरण में, आप GitHub Pages पर अपनी वेबसाइट का लिंक पा सकते हैं। परिनियोजन निष्कर्ष लाखों व्यूज वाली वेबसाइटों को होस्ट करने के लिए Github Pages पर्याप्त नहीं है। लेकिन यह आपके ओपन-सोर्स प्रोजेक्ट के लिए आपके पोर्टफोलियो या वेबसाइट को होस्ट करने के लिए एक आदर्श विकल्प है। हमारी वेबसाइटों को होस्ट करने के लिए वर्सेल जैसी कई निःशुल्क विकल्प हैं, लेकिन मैं आपको एक विकल्प दिखाना चाहता था। GitHub Pages डेवलपर्स के लिए बनाया गया है और मुझे लगता है कि प्रत्येक डेवलपर को इससे परिचित होना चाहिए। यदि इस लेख से आपको मदद मिली तो कृपया इसे अपने सोशल मीडिया पर साझा करें। और आप अपना एप्लिकेशन कहां तैनात करते हैं? क्या यह हमेशा वर्सेल है? रिएक्ट 18 और नेक्स्ट.जेएस सीखें आप React या Next.js के साथ मजबूत महसूस नहीं करते? Udemy पर मेरे ऑनलाइन पाठ्यक्रम में शामिल हों! मैं एक पूरी तरह कार्यात्मक 2048 गेम बनाकर रिएक्ट के साथ शुरुआत करने में आपकी मदद करूंगा। मेरा मानना है कि गेम बनाने से सीखने में अधिक मज़ा आता है, और आपके पास अपने दोस्तों को दिखाने के लिए कुछ अच्छा होगा। 👇👇👇👇 🧑🎓 सम्मिलित हों उडेमी पर रिएक्ट 18 और नेक्स्ट.जेएस कोर्स - केवल इस सप्ताह 80% की छूट।
