आपको अपना Next.js ऐप GitHub पेजों पर प्रकाशित करना चाहिए

हाल ही में मैंने 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;

अब next build चलाने के बाद, नेक्स्ट.जेएस आपके ऐप के लिए स्टैटिक एसेट्स वाला एक out फोल्डर जेनरेट करेगा। अगले चरणों में, हम इस निर्देशिका को लेंगे और इसे GitHub पेज पर अपलोड करेंगे।

चरण 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 पेजों पर प्रकाशित किया जा सकता है। अब उन्हें प्रकाशित करने के लिए जीथब एक्शन स्थापित करने का समय आ गया है। मैंने पुन: प्रयोज्यता को बढ़ावा देने के लिए तैनाती को दो अलग-अलग कार्रवाइयों में विभाजित करने का निर्णय लिया:

setup-node क्रिया Node.js को स्थापित करेगी और सभी निर्भरताएँ स्थापित करेगी। Node.js सेटअप के लिए एक स्टैंडअलोन कार्रवाई होने से मुझे अन्य पाइपलाइनों के लिए इसका पुन: उपयोग करने की अनुमति मिल जाएगी। उदाहरण के लिए, मेरे पास पाइपलाइनें हैं जो चलती हैं कोड लिंटर और परीक्षण . संभवतः आप एक से अधिक क्रियाएँ भी करना चाहते हैं।

हर बार जब हम कोड को main शाखा में मर्ज करते हैं तो publish कार्रवाई Next.js कलाकृतियों का निर्माण करेगी और उन्हें GitHub पेज पर प्रकाशित करेगी।

सबसे पहले मैं 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 कहा जाए।

यह स्निपेट क्या करता है?

1. यह एक composite क्रिया बनाता है। composite क्रिया आपको एकाधिक वर्कफ़्लो चरणों को एक ही क्रिया में बंडल करने की अनुमति देती है। यदि यह स्पष्ट नहीं है तो आप इसे तब समझेंगे जब हम दूसरी कार्रवाई में उतरेंगे।

2. यह 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 कहा।

यह क्या करता है?

1. यह क्रिया हर बार तब ट्रिगर होती है जब नया कोड main शाखा में धकेला या मर्ज किया जाता है।

2. यह पर्यावरण को स्थापित करने के लिए setup-node क्रिया का उपयोग करता है। पिछली क्रिया में मैंने जो composite क्रिया बनाई थी। अब आप जानते हैं कि अपनी composite क्रियाओं को अन्य क्रियाओं में कैसे शामिल किया जाए।

3. कार्रवाई के दो चरण हैं: पहले चरण में, Next.js ऐप बनाया जा रहा है। दूसरे चरण में, पहले चरण की कलाकृतियाँ GitHub पेज पर अपलोड की जाती हैं।

ये परिनियोजन पाइपलाइन के सबसे महत्वपूर्ण पहलू हैं। मैंने अनुमतियाँ और समवर्ती सेटअप छोड़ दिया क्योंकि वे सभी GitHub पेज परिनियोजन के लिए अपरिवर्तित रहते हैं।

अब, कार्रवाई उपयोग के लिए तैयार है.

प्रतिबद्ध और धक्का

आपके परिवर्तनों को main शाखा में भेजने और भेजने के बाद, GitHub स्वचालित रूप से GitHub पेजों पर परिनियोजन को स्पिन कर देगा।

प्रक्रिया का निरीक्षण करने के लिए, एक्शन टैब (नीचे की छवि में 1) पर नेविगेट करें, और बाईं ओर मेनू से पब्लिश-टू-जीथब-पेज एक्शन का चयन करें (2) । आप स्क्रीन पर अपने सभी परिनियोजन देखेंगे (उन्हें वर्कफ़्लो कहा जाता है)।

अब उन वर्कफ़्लोज़ में से पहला चुनें, और आप दो-चरणीय परिनियोजन देखेंगे। परिनियोजन चरण में, आप GitHub Pages पर अपनी वेबसाइट का लिंक पा सकते हैं।

निष्कर्ष

लाखों व्यूज वाली वेबसाइटों को होस्ट करने के लिए Github Pages पर्याप्त नहीं है। लेकिन यह आपके ओपन-सोर्स प्रोजेक्ट के लिए आपके पोर्टफोलियो या वेबसाइट को होस्ट करने के लिए एक आदर्श विकल्प है।

हमारी वेबसाइटों को होस्ट करने के लिए वर्सेल जैसी कई निःशुल्क विकल्प हैं, लेकिन मैं आपको एक विकल्प दिखाना चाहता था। GitHub Pages डेवलपर्स के लिए बनाया गया है और मुझे लगता है कि प्रत्येक डेवलपर को इससे परिचित होना चाहिए।

यदि इस लेख से आपको मदद मिली तो कृपया इसे अपने सोशल मीडिया पर साझा करें।

और आप अपना एप्लिकेशन कहां तैनात करते हैं? क्या यह हमेशा वर्सेल है?

रिएक्ट 18 और नेक्स्ट.जेएस सीखें

आप React या Next.js के साथ मजबूत महसूस नहीं करते? Udemy पर मेरे ऑनलाइन पाठ्यक्रम में शामिल हों! मैं एक पूरी तरह कार्यात्मक 2048 गेम बनाकर रिएक्ट के साथ शुरुआत करने में आपकी मदद करूंगा। मेरा मानना है कि गेम बनाने से सीखने में अधिक मज़ा आता है, और आपके पास अपने दोस्तों को दिखाने के लिए कुछ अच्छा होगा।

👇👇👇👇

🧑‍🎓 सम्मिलित हों उडेमी पर रिएक्ट 18 और नेक्स्ट.जेएस कोर्स - केवल इस सप्ताह 80% की छूट।