HTML5 / AngularJS / Nginx ऐप को Google अनुक्रमण के साथ दाईं ओर

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





आजकल, HTML5, WebSocket और Full Ajax अनुप्रयोगों के समर्थन वाले आधुनिक ब्राउज़र को अब व्यावसायिक तर्क से अलग कुछ के साथ बैकेंड सर्वर को रोकना नहीं पड़ता है। सभी ui विकास स्टब एपि सेवाओं के साथ nginx सर्वर पर आयोजित किया जा सकता है। और ऑटो-जनरेटिंग डॉक्यूमेंटेशन के लिए फ्रेमवर्क यूआई और बैकएंड डेवलपर्स दोनों को संचार लागत कम करने में मदद करेगा। केवल जोंस डेटा स्थानांतरित करने से सर्वर पर लोड भी काफी कम हो जाएगा। आखिरकार, ui क्लाइंट के संकुचित जावास्क्रिप्ट कोड को एप्लिकेशन कैश में रखा जा सकता है।

लेकिन अगर आधुनिक ब्राउज़र आसानी से बढ़ी हुई जिम्मेदारी का सामना कर सकते हैं, तो खोज इंजनों को मदद की आवश्यकता है।

अपने आवेदन को एंगुलरज पर ठीक से अनुक्रमित करने के लिए, हमें निम्नलिखित चीजों की आवश्यकता है:

• sitemap.xml
• html5Mode
• nginx
• पुराने फैशन बैकएंड सर्वर

HTML5 मोड

Html5 मोड, example.com/#!/home से example.com/#!/home लिए कोणीयjs मार्गों को मोड़ता है (सभी href लिंक को बिना हैशटैग के url को इंगित करना चाहिए)। HTML5mode को सक्षम करने के लिए आपको करने की आवश्यकता है:

 $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!'); 

मैं छोड़ता हूँ ! उन ब्राउज़रों के साथ संगतता के लिए जो जावास्क्रिप्ट का समर्थन नहीं करते हैं

अब हमें हमारे nginx सर्वर से अनुरोध करने के लिए example.com/home से मुख्य index.html एप्लिकेशन फ़ाइल पर भेजना होगा। ऐसा करने के लिए, कॉन्फ़िगरेशन में निम्नलिखित निर्देश निर्दिष्ट करें:

 location / { expires -1; add_header Pragma "no-cache"; add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"; root /var/web; try_files $uri $uri/ /index.html =404; } 

स्ट्रिंग try_files $uri $uri/ /index.html =404; इसका अर्थ है कि अब सभी गैर-मौजूद url को ब्राउजर के एड्रेस बार में url को बनाए रखते हुए index.html फ़ाइल पर रीडायरेक्ट किया जाएगा।
यह समाधान पहले से ही काम कर रहा है (साथ ही पुराने हैशबैंग लिंक प्रारूप के साथ संगत) और यदि आपके आवेदन को खोज इंजन द्वारा अनुक्रमित नहीं किया जाना चाहिए तो आप इसे समाप्त कर सकते हैं।

एसईओ

अब हम सर्च इंजन को हमारे एप्लिकेशन को सही ढंग से प्रोसेस करने में मदद करेंगे। ऐसा करने के लिए, हम बॉट के लिए संकेत तैयार करेंगे और स्नैपशॉट पेज तैयार करेंगे। सबसे पहले, आइए जानते हैं कि sitemap.xml फ़ाइल का उपयोग करके किन पृष्ठों को अनुक्रमित किया जाता है। फ़ाइल के सबसे सरल संस्करण में पृष्ठों के लिंक और उनके अंतिम अद्यतन की तारीखें हैं ( www.sitemaps.org पर अधिक विस्तृत प्रारूप उपलब्ध है):

 <urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'> <url> <loc>http://senior-java-developer.com/java/basics</loc> <lastmod>2013-07-12</lastmod> </url> <url> <loc>http://senior-java-developer.com/</loc> <lastmod>2013-07-12</lastmod> </url> </urlset> 

महान, खोज इंजन हमारी साइट के लिंक का अनुरोध करेगा और index.html सामग्री प्राप्त करेगा कोई जावास्क्रिप्ट प्रसंस्करण खोज बॉट में एम्बेडेड है। बॉट को बताएं कि असली पेज तकनीकी पेज `index.html` के पीछे छिपा है। ऐसा करने के लिए, पृष्ठ शीर्ष लेख में जोड़ें:

 <meta name="fragment" content="!" /> 

यह बॉट को अगला कदम उठाने का अवसर देगा। fragmet=! देखना fragmet=! बॉट पृष्ठ को फिर से अनुरोध करेगा, लेकिन पैरामीटर जोड़ देगा ?_escaped_fragment_= url के अंत में। हम nginx को बताएँगे कि इस पैरामीटर के साथ अनुरोध दूसरी जगह भेजा जाना चाहिए:

 if ($args ~ "_escaped_fragment_=(.*)") { rewrite ^ /snapshot${uri}; } location /snapshot { proxy_pass http://api; proxy_connect_timeout 60s; } 

बस इतना ही, अब बॉट से सभी अनुरोध एपीआई बैकएंड सर्वर पर भेजे जाएंगे।

असली url	बॉट यूरल	बैकेंड url
example.com	example.com/?_escaped_fragment_=	localhost:8080/snapshot/
example.com/home	example.com/home?_escaped_fragment_=	localhost:8080/snapshot/home

मैं एक स्नैपशॉट बनाने के लिए थाइमेल्फ का उपयोग करता हूं। क्योंकि Thymeleaf और angularjs दोनों html5 विशेषताओं का उपयोग करते हैं, आप एक ही टेम्पलेट फ़ाइल का उपयोग कर सकते हैं, हालांकि मैं उन्हें मिश्रण नहीं करना पसंद करता हूं।

HTML दृश्य की एक पंक्ति कुछ इस तरह दिखाई देगी:

 <div ng-bind="text" th:text="${text}"></div>