अपने वेब विकास वर्कफ़्लो के भारी उठाने के लिए ट्रैविस सीआई और गिटहब का उपयोग कैसे करें

ट्रैविस सीआई के माध्यम से निरंतर एकीकरण के साथ यह सब आसान हो जाता है

जब आप शुरू कर रहे हों तो कोडपैन पर एक साथ ऐप हैक करना आम बात है। लेकिन एक समय ऐसा भी आएगा जब आप पूरी दुनिया में अपना वेब ऐप प्रकाशित करना चाहेंगे। वे क्लाइंट के लिए साइड प्रोजेक्ट या प्रोजेक्ट हो सकते हैं। एक अच्छा विकास वर्कफ़्लो इस बिंदु पर अंतर की दुनिया बना देगा।

हम निम्नलिखित टूल का उपयोग करके एक विकास कार्यप्रवाह स्थापित करने जा रहे हैं:

  • बनाने प्रतिक्रिया-ऐप
  • एनपीएम स्क्रिप्ट
  • ट्रैविस-सीआई

हम ट्रैविस सीआई और गिटहब को एक साथ तार करेंगे। अंत में, हम नीचे दिए गए की तरह एक अच्छा और चमकदार बिल्ला प्राप्त करेंगे।

लेकिन लुक से ज्यादा बैज एक फंक्शन को दर्शाता है। यह ट्रैविस सीआई के परीक्षण का एक चिन्ह है, जो GitHub में हमारे कमिट का निर्माण और प्रकाशन करता है। ट्रैविस CI केवल तभी प्रकाशित होता है जब परीक्षण पास हो जाते हैं।

इन बैज को अपने भंडार पर रखने के लिए तैयार रहें:

मैंने चरणों में पूरे वर्कफ़्लो का आयोजन किया है। प्रत्येक चरण के लिए एक बैठना चाहिए। यह लगभग 50 मिनट के भीतर है।

स्टेज 1: स्थानीय रूप से क्रिएट-रिएक्शन-ऐप चलाएं

तैयार है आपका गिट रिपॉजिटरी

पहली बात गीथहब पर एक नया भंडार बनाना है। यदि आपके पास पहले से कोई खाता नहीं है, तो अब एक के लिए पंजीकरण करने का समय है। सार्वजनिक रिपॉजिटरी मुफ्त हैं। जब आप एक नया भंडार बनाते हैं, तो GitHub आपको .gitignore, लाइसेंस और README.md के लिए फ़ाइलें बनाने की अनुमति देता है।

यदि आप पहली बार Git से शुरुआत कर रहे हैं, तो आप इस मुफ्त पुस्तक को ऑनलाइन पढ़ सकते हैं। GitHub पर एक सहायता अनुभाग भी है।

यहां बताया गया है कि हमारा नया भंडार कैसा दिखेगा:

ठीक है, चलो हमारे टर्मिनल पर है। क्या आप उस छवि को चमकीले हरे बटन को देखते हैं जो क्लोन या डाउनलोड दिखा रहा है। वह हमें रिपॉजिटरी का URL देगा। अपने टर्मिनल पर, यह कमांड चलाएँ:

git clone git@github.com: pineboat / reaction-Continuous-dep तैनाती.गित

वह आदेश रिपॉजिटरी की सामग्री को एक नई निर्देशिका में डाउनलोड करेगा। यह निर्देशिका को रिपॉजिटरी के समान नाम देता है। हमारे मामले में, निर्देशिका का नाम प्रतिक्रिया-निरंतर-परिनियोजन होगा।

यदि आप यह सुनिश्चित करना चाहते हैं कि मूल भंडार का लिंक तैयार है, तो कमांड का उपयोग करें:

git रिमोट -v

अब जब हम GitHub में अपने बदलावों को आगे बढ़ाने के लिए तैयार हैं, तो हमें प्रतिक्रिया दें और चलें।

क्रिएट-रिएक्शन-ऐप के साथ ऊपर और चल रहा है

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

जैसा कि रिपॉजिटरी README.md फ़ाइल दिखाता है, आपको केवल इसे विश्व स्तर पर एक बार स्थापित करना होगा। तब आप इसका उपयोग कर सकते हैं कि आप जितना चाहें उतने प्रोजेक्ट को पाड़ सकते हैं।

इसे स्थापित करने के लिए टाइप करें:

npm इंस्टॉल -g create-react-app

एक बार स्थापित होने के बाद, आप एक नया एप्लिकेशन बनाने के लिए इसे किसी भी निर्देशिका से चला सकते हैं। आइए इसे हमारी रिपॉजिटरी का नाम दें:

create-response-app प्रतिक्रिया-निरंतर-परिनियोजन

वह नया फ़ोल्डर नहीं बनाएगा क्योंकि हमारे पास पहले से ही Git द्वारा बनाया गया फ़ोल्डर है। इसके बजाय यह मौजूदा फ़ोल्डर के भीतर आवश्यक नोड_मॉड्यूल और मचान स्क्रिप्ट स्थापित करना शुरू कर देगा।

यदि आप एक नया आवेदन चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

बनाएँ-प्रतिक्रिया-एप्लिकेशन फैंसी-ऐप-नाम

फिर आपको एक Git रिपॉजिटरी बनाने और GitHub से कनेक्ट करने की आवश्यकता होगी। यह बहुत मुश्किल नहीं है। आप GitHub से इस सहायता पृष्ठ का उपयोग कर सकते हैं।

क्या वह स्थापना अभी तक समाप्त हो गई है? इसमें 5 मिनट से अधिक नहीं लगना चाहिए। इसमें मुझे लगभग 15 मिनट लगे। ऐसा मत करो जो आपको डराता है। जब तक आप मेरी तरह नहीं हैं, और आप 150 mb / s 4G डेटा कार्ड का उपयोग कर रहे हैं, जो आपको इसके बेहतरीन दिन में लगभग 512kbps की डाउनलोड स्पीड देता है।

अच्छी बात यह है, स्थापना ने हमारी पुरानी README.md फाइल को एक तरफ खिसका दिया। टर्मिनल इस मधुर संदेश को दिखाता है:

आपके पास एक `README.md` फ़ाइल थी, हमने इसका नाम बदलकर` README.old.md` कर दिया

टर्मिनल ने आपको पेड़ की संरचना में पैकेजों की विशाल सूची भी दिखाई होगी। यह डरावना लग सकता है। लेकिन इनमें से ज्यादातर पैकेज के बीच निर्भरता हैं। वे आपके ऐप को विकसित करने में आपकी मदद करने के लिए वहां हैं। अंतिम उत्पाद में केवल आवश्यक जावास्क्रिप्ट फाइल जैसे रिएक्शन.जेएस और रिएक्शन-डोम.जेएस होंगे। हम थोड़ी देर में वहां चले जाएंगे।

अभी के लिए, हमारे एप्लिकेशन को जागो। एक बार स्थापना समाप्त हो जाने पर,
create-react-app हमें उन कमांडों की एक सूची देगा जो आसान होंगे।

यहाँ संदर्भ के लिए एक सूची है:

  • npm शुरू
    विकास सर्वर शुरू करता है
  • npm रन बिल्ड
    उत्पादन के लिए स्थिर फ़ाइलों में एप्लिकेशन को बंडल करता है
  • npm परीक्षण
    परीक्षण धावक शुरू करता है
  • npm रन इजेक्ट
    अपनी परियोजना से एकल निर्भरता निर्माण देखें यहां देखें
  • npm रन तैनात
    बिल्ड को gh- पेज शाखा में तैनात करने के लिए

npm प्रारंभ और npm परीक्षण अंतर्निहित नोड आदेश डिफ़ॉल्ट रूप से पहचाने जाते हैं। आपको अतिरिक्त रन फ़्लैग का उपयोग करके अन्य स्क्रिप्ट्स जैसे निर्माण, बेदखल करना और तैनात करना होगा:
npm रन script_name

हम प्रक्रिया में कुछ और जोड़ते हैं क्योंकि हम जाते हैं अब हमारी साइट को एक ब्राउज़र पर लोड करने का समय है। आवेदन निर्देशिका के अंदर जाओ और भागो:

npm शुरू

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

तो यह वही है जो हमें मिलता है:

यह एक बहुत अच्छा GIF है (ग्राफिक्स इंटरचेंज फॉर्मेट) क्या यह नहीं है? सिवाय मेरे कर्सर में आने के। मैंने इस GIF को Peek नामक टूल के साथ कैप्चर किया। जरूरत पड़ने पर इसकी जांच करें।

बहुत बढ़िया! मुझे आशा है कि 45 मिनट से अधिक समय नहीं लगा होगा। यदि आप समस्याओं में भाग रहे हैं, तो त्रुटि संदेशों पर ध्यान दें और उन्हें ठीक करने का प्रयास करें।

जब आप निराशा के बिंदु के करीब होते हैं, तो मदद के लिए स्टैक ओवरफ्लो पर सिर। या अपने प्रश्न नीचे टिप्पणी में छोड़ दें।

इससे पहले कि हम किसी भी फाइल को हैक करें, कोड को कमिट करें और GitHub रिपॉजिटरी में धकेल दें। ये आदेश करेंगे:

गिट स्थिति
git add --all git प्रतिबद्ध -m "आरंभिक पाड़, यह आपका अपना संदेश है"
  • गिट स्थिति
    हमारे द्वारा किए गए परिवर्तनों की एक सूची दिखाता है
  • जोड़ देना
    उन परिवर्तनों को एक अस्थायी स्थान पर जोड़ता है जिन्हें हम क्लाउड पर धकेलने से पहले स्टेज कहते हैं

यदि आप फिर से git स्टेटस चलाते हैं, तो यह रिपोर्ट करेगा

आपकी शाखा 1 प्रतिबद्ध द्वारा 'मूल / मास्टर' से आगे है।
 (अपने स्थानीय कमेंट्स को प्रकाशित करने के लिए "गिट पुश" का उपयोग करें)
 करने के लिए कुछ भी नहीं, स्वच्छ निर्देशिका काम कर रहे

यह सही है, हमने स्थानीय स्तर पर परिवर्तन किए और किए हैं। कोई भी अनपेक्षित परिवर्तन नहीं हैं। लेकिन हम अपने भंडार के क्लाउड संस्करण से आगे हैं। उन्हें एक सुरक्षित घर में प्रकाशित करने का समय है, जो कि GitHub है।

आपको बस चलाने की जरूरत है:
git पुश ओरिजिनल मास्टर

आपको fb74259..045ec7a जैसे हैश दिखाते हुए एक अच्छी रिपोर्ट मिलेगी, जो कि हमारी ओर से एक संदर्भ है। बेशक, आपका हैश अलग होगा।

अपने GitHub भंडार की जाँच करें। क्या आप एक लंबे README.md -Remember को देखकर आश्चर्यचकित हैं कि क्रिएट-रिएक्शन-ऐप ने हमारे छोटे README.md को अपने साथ बदल दिया है। यह बहुत बड़ा और मददगार है, इसलिए हम अपना लिखने से पहले इसे अभी के लिए रख लेंगे।

स्टेज 2: गिटहब पेज पर पोर्टिंग साइट

स्थैतिक साइट का निर्माण करें

चलो अंतिम निर्माण पर एक नज़र डालें

आपको केवल दौड़ना है:

npm रन बिल्ड

सुनिश्चित करें कि आप सभी कमांड के लिए एप्लिकेशन डायरेक्टरी में हैं। हमें यह दिखाने के लिए अच्छा पाठ मिलेगा कि क्या हुआ है और हम क्या कर सकते हैं:

$ npm रन बिल्ड
> प्रतिक्रिया- कंटिन्यूअस-deployment@0.1.0 बिल्ड / होम / वेबी / प्रोजेक्ट्स / ब्लॉग_प्रोजेक्ट / रिएक्शन-कंटीन्यू-परिनियोजन
> प्रतिक्रिया-स्क्रिप्ट का निर्माण

एक अनुकूलित उत्पादन निर्माण ...
सफलतापूर्वक संकलित।

फ़ाइल आकार gzip के बाद:

  48.12 KB बिल्ड / स्टैटिक / js / main.9fdf0e48.js
  288 B बिल्ड / स्टैटिक / css / main.cacbacc7.css

प्रोजेक्ट यह मानकर बनाया गया था कि इसे सर्वर रूट पर होस्ट किया गया है।
इसे ओवरराइड करने के लिए, अपने पैकेज में होमपेज निर्दिष्ट करें ।json।
उदाहरण के लिए, इसे GitHub पेज के लिए बनाने के लिए इसे जोड़ें:

  "मुखपृष्ठ": "http://myname.github.io/myapp",

बिल्ड फ़ोल्डर परिनियोजित करने के लिए तैयार है।
आप इसे स्टैटिक सर्वर से सेवा दे सकते हैं:

  npm स्थापित -g सेवा
  सेवा-एस का निर्माण

Npm रन बिल्ड कमांड वह करता है जो हमने मांगा था। यह हमारे ऐप का निर्माण करता है, और हमारी परिसंपत्तियों का अनुकूलन और उनका वर्गीकरण करता है। और यह सब कुछ एक फ़ोल्डर में रखता है जिसे बिल्ड कहा जाता है।

नीचे की ओर, सुझाव है कि स्थानीय सर्वर शुरू करने के लिए सर्व एनपीएम पैकेज स्थापित करें। अधिकांश समय, यदि आप लिनक्स पर हैं, तो आपके पास पहले से ही पायथन स्थापित है। यदि आपके पास पायथन है, तो स्थानीय सर्वर शुरू करना बहुत आसान है।

निर्माण निर्देशिका में कदम रखें और एक सर्वर शुरू करें, निम्न आदेश देखें:

सीडी का निर्माण
पायथन-एम सिंपलएचटीपीएसवर

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

यदि यह अच्छा लग रहा है, तो हम इसे GitHub पृष्ठों पर भेजने जा रहे हैं।

GitHub पृष्ठों पर प्राइमर

GitHub पेज रिपॉजिटरी के लिए GitHub द्वारा प्रदान किए गए समाधान की मेजबानी कर रहे हैं। कुछ स्थान हैं जहाँ आप अपनी साइट को होस्ट कर सकते हैं, सभी एक भंडार के भीतर:

  • आप अपनी वेबसाइट को होस्ट करने के लिए मास्टर ब्रांच (डिफ़ॉल्ट एक) का उपयोग कर सकते हैं
    यदि आपके पास एक index.html है, तो यह दिखाई देगा। अन्यथा, आपका README.md दिखाई देगा।
  • आप अपनी साइट को होस्ट करने के लिए मास्टर शाखा में डॉक्स फ़ोल्डर का भी उपयोग कर सकते हैं
    उपयोग का मामला तब होगा जब आपके पास GitHub पर एक सॉफ़्टवेयर या लाइब्रेरी विकसित हो। आप उसी रिपॉजिटरी में प्रलेखन को होस्ट करना चाह सकते हैं।
  • आप अपनी साइट को होस्ट करने के लिए gh- पेज शाखा का उपयोग कर सकते हैं

एक अपवाद है। आपका रिपॉजिटरी नाम .github.io या .gububio नहीं होना चाहिए।

ये विशेष नाम हैं और वे आपको मास्टर शाखा का उपयोग करने के लिए सीमित करते हैं।

एक बार जब आप अपनी वेबसाइट होस्ट कर लेते हैं, तो आप इसे निम्न URL में लोड कर सकते हैं। यह इस बात पर निर्भर करता है कि आपका भंडार आपके खाते में है या किसी संगठन के खाते में:

https: //  .github.io /  /
https: //  .github.io /  /

उस समझ के साथ, हमारे रिपॉजिटरी को लाइव होने के लिए सुसज्जित करें।

GitHub पृष्ठों पर प्रकाशित करें

नए रिएडएमएमडी ने हमें जो रिएक्ट-रिएक्शन ऐप दिया है, उसका GitHub पेजों पर एक अलग सेक्शन है। कुछ चीजें हमें करने की जरूरत है।

Package.json फ़ाइल में परिवर्धन की जाँच करें

"मुखपृष्ठ": "http: //  .github.io / 

नोट: आमतौर पर, JSON में अंतिम खंड या प्रविष्टि को अल्पविराम की आवश्यकता नहीं होती है, अन्य सभी को एक होना चाहिए।

Gh- पेज पैकेज स्थापित करें

यह एक आसान है। जब आप प्रोजेक्ट डायरेक्टरी के अंदर हों तो बस निम्नलिखित कमांड चलाएँ:

npm install --save gh-pages

Thesave फ्लैग संकुल-जसन पर निर्भरता के रूप में g-pages जोड़ देगा। यह किसी और को सुनिश्चित करने के लिए है जो आपके प्रोजेक्ट को क्लोन कर सकता है, जब वे एनपीएम इंस्टॉल करते हैं तो इसे प्राप्त कर सकते हैं।

यहाँ git diff कमांड की एक स्नैपशॉट है जो हमने दिखाया है।

Gh- पृष्ठों की शाखा में तैनात करें

चलिए npm रन तैनात करते हैं। यह स्वचालित रूप से पूर्व-चालन चलाएगा, उत्पादन निर्माण को बनाने के लिए जिसे हमने पहले देखा था। इसके बाद यह एक नए ब्रांच के तहत हमारे रिपॉजिटरी को gh- पेज्स नाम से पोस्ट करेगा।

जांचें कि आपको अंतिम विवरण के रूप में प्रकाशित स्थिति मिली है या नहीं। यदि हां, तो आपने सफलतापूर्वक GitHub के लिए निर्माण का निर्माण किया है। यहाँ उत्पादन है:

प्रकाशित होने के लिए gh-pages शाखा का चयन करें

GitHub रिपॉजिटरी के लिए अपना सिर दें और हमारी साइट प्रकाशित करें। भंडार खोलें और शीर्ष पर सेटिंग टैब पर जाएं। यह नीचे इस छवि की तरह लग रहा है, एक मिनट रुको! GitHub ने स्वचालित रूप से g-Pages शाखा प्रकाशित की है। ज्यादा कुछ नहीं करना है। यह उस URL को भी दिखाता है जिसमें हम साइट तक पहुँच सकते हैं।

उप-शीर्षक को वास्तव में कुछ भी नहीं कहना चाहिए। यह सब किया और हमारे उपभोग के लिए तैयार है।

नोट: मेरी रिपॉजिटरी के लिए दिखाया गया URL आपको गुमराह कर सकता है। ऐसा इसलिए है क्योंकि मैंने यह भंडार PineBoat नाम के एक संगठन के तहत बनाया है, जो कि मेरा ब्लॉग है। GitHub इसे मेरे कस्टम डोमेन के अंतर्गत रखता है, जब मैंने ऐसा करने की कोशिश की तो मुझे कुछ भी नहीं चाहिए। तुम्हारा अलग होगा।

अब तक सब ठीक है। यदि आपके पास Git और Node पैकेज में पूर्व अनुभव है, तो आपको इस तक पहुँचने में कोई परेशानी नहीं होनी चाहिए थी। वास्तव में, डिफ़ॉल्ट README.md मेरी दूर तक मदद करने के लिए पर्याप्त था। यदि आपके पास कोई अनुभव नहीं है, तो मुझे आशा है कि आपने यात्रा का आनंद लिया है।

लेकिन हम एक निरंतर तैनाती वर्कफ़्लो के लिए इच्छुक हैं। हम कुछ अनचाहे पानी को नेविगेट करना शुरू कर रहे हैं। एक तर्क है कि इंटरनेट में कुछ भी अज्ञात नहीं है। मैं सहमत हूं, फिर भी अपना नक्शा खुद बनाऊंगा।

चरण 3: निरंतर तैनाती

यह वह जगह है जहां हम बॉट्स लाते हैं, जो कि हमने तैनाती 2 में किया था।

स्वचालित निर्माण के लिए ट्रैविस सीआई में तार

ट्रेविस सीआई को हमारे लिए तैनाती करने दें। अपनी साइट को अपने दम पर बनाने और तैनात करने में कोई बुराई नहीं है। जैसा कि हमने देखा है, यह सब हमारे मूल्यवान समय के कुछ और मिनट हैं।

हालाँकि, जब आप बड़े पैमाने की परियोजनाओं में भाग लेते हैं तो विश्वसनीय बॉट्स को कुछ काम करने देना बेहतर होता है। ट्रैविस सीआई ऐसी ही एक सेवा है।

जब भी हम रिपॉजिटरी के लिए अपना कोड बनाते हैं, तो हम उसे बनाने और तैनात करने के लिए ट्रैविस सीआई का लाभ उठा सकते हैं।

ट्रैविस सीआई के लिए साइन अप करें

यदि आप "यदि आपके पास एक GitHub खाता है" के साथ शुरू होता है तो यह कष्टप्रद होगा। मुझे यकीन है कि आपके पास अब तक एक है और हम ट्रैविस सीआई को साइन अप करने के लिए इसका उपयोग कर सकते हैं।

GitHub रिपोजिटरी से कनेक्ट करें

अनुमति के लिए बाहर देखो। यदि आपकी रिपॉजिटरी सूचीबद्ध नहीं है, तो सिंक बटन पर क्लिक करें और पृष्ठ को ताज़ा करें। इससे पहले कि मैं रिपॉजिटरी देख पाऊं मुझे "पाइनबोट" संगठन को अनुमति देनी पड़ी।

ट्रैविस सीआई आपको चरण दिखाता है। इसे जोड़ने के लिए अपने रिपॉजिटरी के खिलाफ स्विच करें।

इसे खोलने के लिए रिपॉजिटरी नाम पर क्लिक करें। यह अज्ञात के रूप में एक बिल्ड स्थिति और एक बड़ा नोट दिखाएगा जिसमें कहा गया है कि इस भंडार के लिए कोई निर्माण नहीं होता है।

लंबे समय के लिए नहीं। इसे बदल देते हैं।

.Travis.yml को रिपॉजिटरी में जोड़ें

यहाँ .travis.yml को जोड़ना होगा। एक नज़र रखना, और मेरे साथ रहना जबकि मैं आपके कुछ प्रश्नों को स्पष्ट कर दूंगा।

भाषा: node_js
node_js:
 - "नोड"
after_success:
 - git config --global user.name "vijayabharathi"
 - git config --global user.email "[ईमेल संरक्षित]"
 - गिट दूरस्थ rm मूल
 - git Remote add ओरिजिनल https: // vijayabharathib: $ {GH_TOKEN} @ github.com / pineboat / reaction-dep तैनाती -it.git
 - एनपीएम रन की तैनाती

Git रिमोट ऐड मूल से सावधान रहें, यह एक लंबी लाइन है। YAML सिंटैक्स JSON से थोड़ा अलग है। यह पृष्ठ मदद कर सकता है। अब इसे तोड़ने का समय आ गया है। हो सकता है आपने उन संदेशों में से अधिकांश का पता लगा लिया हो।

यहाँ यह सादे अंग्रेजी में है:

  • यह एक नोड प्रोजेक्ट है। नवीनतम नोड संस्करण प्राप्त करें
  • चूंकि ट्रैविस डिफ़ॉल्ट रूप से एनपीएम परीक्षण चलाता है, इसलिए हम परीक्षण सफल होने के बाद इसे करने के लिए कह रहे हैं
  • अपना उपयोगकर्ता नाम और ईमेल जोड़ें
  • फिर रिपॉजिटरी के लिए git रिमोट मूल जोड़ें
    अपने उपयोगकर्ता नाम और GH_TOKEN को क्रेडेंशियल के रूप में उपयोग करें
  • अंत में, npm रन तैनाती कमांड चलाएँ
    यदि आप याद करते हैं, तो यह npm रन तैनाती से पहले npm रन प्रीपेप्लॉय चलाएगा

ट्रैविस सीआई का निर्माण करें और देखें

अपने ट्रैविस CI रिपॉजिटरी पेज को खुला रखें। अपने टर्मिनल में परिवर्तन जोड़ें, कमिट करें और उन्हें GitHub पर धकेलें।

यदि आपको एक अनुस्मारक की आवश्यकता होती है, तो यहां कमांड की सूची दी गई है:

git add --all
git कमिट-मी "स्वचालित निर्माण के लिए .travis.yml कॉन्फ़िगरेशन जोड़ें" git पुश ओरिजिनल मास्टर

यदि आप ट्रैविस CI पृष्ठ पर जाते हैं, तो आप देख पाएंगे कि पृष्ठ एक बार जिस्ट पुश या कुछ सेकंड के भीतर जीवित हो जाएगा। बिल्ड अपने आप शुरू हो जाता है और आपको पता चल जाता है कि क्या यह सफल है।

यहाँ मेरा ट्रैविस सीआई पृष्ठ है जो अच्छी हरी स्थिति दिखा रहा है।

दिखाया गया लॉग 2500 लाइनों से कम नहीं है। मुझे खुशी है कि ट्रैविस-सीआई केवल वही दिखाता है जो हमें देखने की जरूरत है।

छवि में नीचे दिखाए गए अनुसार चरणों का एक स्पष्ट संकेत:

स्पॉट चेक, क्या हम वास्तव में सफल हुए?

यह वह जगह है जहां उत्पादन पर चलने वाले स्वचालित परीक्षण काम आ सकते हैं।

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

एक और परीक्षण, इस बार कोड में बदलाव के साथ

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

अब, कुछ छोटे बदलाव करें। रिएक्ट व्हील को समय पर वापस लेने का समय है

हम केवल दो परिवर्तन करेंगे

Src / App.css फ़ाइल के भीतर, एनीमेशन के लिए एक अनुभाग है, जिसका नाम @keyframes App-logo-spin है। उस 360deg को -360deg में बदलें। यह व्हील काउंटर को दक्षिणावर्त स्पिन करना है।

Src / logo.svg फ़ाइल लोड करें और # 61DAFB से # DA61FB तक रंग भरें। यदि आपका सर्वर npm स्टार्ट के माध्यम से चल रहा है, तो आप पहले से ही एक क्लॉक वाइज काउंटर क्लॉक वाइज चल रहे हैं। यदि नहीं, तो स्टेश में परिवर्तन जोड़ें, प्रतिबद्ध करें और उन्हें भंडार में धकेलें। देखें कि क्या बिल्ड ट्रैविस-सीआई में सफल है और फिर आपके जीथूब पेज पर पहुंच जाएगा।

अपने_सुमेर_नेमे। Github.io/repository_name लोड करें। आपको नीले रंग के बजाय बैंगनी पहिया देखना चाहिए।

काश, मैं उस बैंगनी पहिया को नहीं देखता। मुझे अभी भी डिफ़ॉल्ट नीला एक दिखाई देता है।

लापता GH_TOKEN को ठीक करें

हालांकि ट्रैविस सीआई ने बताया कि यह सब ठीक है, यह नहीं है। यदि आप g-Pages शाखा खोलते हैं, तो आपको स्थानीय टर्मिनल से बनी मूल प्रतिबद्धता दिखाई देगी। कोई दूसरा काम नहीं करता। इसका मतलब है, after_success आदेश इतने सफल नहीं थे।

यदि आप ट्रैविस बिल्ड लॉग में npm रन तैनाती अनुभाग का विस्तार करते हैं, तो आपको कुछ प्रमाणीकरण त्रुटियाँ दिखाई देंगी। क्योंकि हमने ट्रैविस सीआई को अपने रिपॉजिटरी में लिखने की अनुमति नहीं दी है।

आप GitHub.com से व्यक्तिगत एक्सेस टोकन पेज से एक नया टोकन बना सकते हैं। अकेले सार्वजनिक भंडार तक पहुँच देना याद रखें। Public_repo के खिलाफ सिर्फ एक टिकमार्क करेगा। यह याद नहीं है। एक बार जब आप एक टोकन उत्पन्न करते हैं, तो उसे कॉपी करें। गिटहब ने सही चेतावनी दी है कि आप इसे फिर से नहीं देख पाएंगे।

ट्रैविस सीआई के सिर पर, अपने भंडार के लिए अधिक विकल्पों पर क्लिक करें और सेटिंग्स चुनें। यह कई खंड दिखाएगा, लेकिन पर्यावरण विविधताएं देखने वाला है।

टोकन को GH_TOKEN के रूप में नाम दें और मान फ़ील्ड के अंतर्गत टोकन को अतीत में रखें। ऐड पर क्लिक करें। लॉग में प्रदर्शन मूल्य पर स्विच न करें क्योंकि यह लोगों को दिखाई दे सकता है यदि आप लॉग को बाहर भेजते हैं। टोकन आपके पासवर्ड के बराबर है।

यह अब, ट्रैविस-सीआई हमारी रिपॉजिटरी को लिख सकता है।

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

बधाई! यह हमारी पहली स्वचालित तैनाती है। Github.io वेबसाइट के बारे में कैसे? ताज़ा राशि की कोई भी राशि बहुत अधिक आवश्यक बैंगनी पहिया नहीं लाएगी। अभी तक ढीली आशा मत करो।

सेवा कर्मचारी से अवकाश लेने के लिए कहें

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

यह ऊर्जावान जावास्क्रिप्ट सेवा कार्यकर्ता का परिणाम प्रतीत होता है। इसने ऑफ़लाइन उपयोग के लिए पृष्ठ को कैश कर दिया है। लेकिन इस निष्कर्ष को और अधिक शोध की आवश्यकता है। इस बीच, चलो सेवा कार्यकर्ता को रोक दें और भंडारण को साफ़ करें।

यदि आप Chrome पर हैं, तो डेवलपर टूल को मेनू से या F12 दबाकर पहुँचा जा सकता है। Chrome DevTools पर एप्लिकेशन टैब में क्लियर स्टोरेज सेक्शन है। सभी प्रविष्टियों की जाँच करें और अंत में उस क्लियर साइट डेटा पर क्लिक करें।

ताज़ा करें और उछाल! यहाँ उज्ज्वल बैंगनी में हमारा उल्टा पहिया है। अब जश्न का समय है

नोट: इस भंडारण को स्वचालित रूप से साफ करने का एक बेहतर तरीका होना चाहिए। एक दर्द होगा अगर हमें सेवा कार्यकर्ता को रोकना होगा और परिवर्तनों को ऑनलाइन करने के लिए हर बार भंडारण करना होगा। यह अधिक शोध के लिए एक विषय है।

चरण 4: ट्रैविस सीआई से सम्मान का बिल्ला

हमारे सामने एक अंतिम कार्य है। यह एक चमकदार ट्रैविस CI बनाने के लिए हमारी रिपॉजिटरी की README.md फ़ाइल पर बैज प्राप्त करने के लिए है।

ट्रैविस सीआई को खोलें और बिल्ड पर क्लिक करें: पासिंग बैज। यह छवि को पोर्ट करने के विकल्पों के साथ एक संवाद दिखाएगा। शाखा को गुरु की तरह छोड़ दो। छवि URL के बजाय मार्कडाउन चुनें। आपके द्वारा दिए गए पाठ की प्रतिलिपि बनाएँ।

इसे README.old.md में पेस्ट करें, जो पहले क्रिएट-रिएक्शन-ऐप द्वारा हमारे पास छोड़ा गया था। अपनी खुद की सामग्री लिखें।

आप डिफ़ॉल्ट README.md को भंडार से हटा सकते हैं और README.old.md का नाम बदलकर README.md कर सकते हैं।

परिवर्तन को Git स्टेजिंग में जोड़ें, कमिट करें और क्लाउड पर पुश करें। अब रिपॉजिटरी को उस बैच को दिखाना चाहिए जिसे आप हमेशा चाहते थे। यहाँ हमारे पालतू प्रोजेक्ट के लिए दिखाया गया URL है।

https://travis-ci.org/pineboat/react-continuous-deployment.svg?branch=master

आप उस url को शीर्ष पर README.md में जोड़ सकते हैं। यहाँ छवि है:

हम यहाँ कर रहे हैं! ख़ुशियाँ मनाने का समय।

मैं आपको एक प्रश्न छोड़ना चाहता हूं यदि आप समान वर्कफ़्लो का उपयोग करके बड़ी टीमों में काम कर रहे हैं, तो आपके सामने क्या चुनौतियाँ हैं और आप उन्हें कैसे हल करेंगे? एक टिप्पणी लिखें और मुझे बताएं।

पढ़ने के लिए आपको बहुत बहुत शुक्रिया। मुझे उम्मीद है कि यह आपके लिए उपयोगी साबित होगा।

यह मूल रूप से pineboat.in पर प्रकाशित हुआ था।

ताली बजाना दिखाता है कि आपने इस लेख को कितना सराहा।