有了 Docker，用 JavaScript 框架開發的 Web 站點也能很好地支持網絡爬蟲的內容抓取
Prerender 服務能夠為網絡爬蟲提供預先渲染的動態頁面內容，解決了用 JavaScript 框架構建的 Web 站點不支持爬蟲抓取的問題。本文詳細描述了一種解決方案，尤其是提供了集成 Prerender 服務的 Docker 容器鏡像。
如果你正在使用 AngularJS 構建一個面向大眾消費者的應用，你肯定希望用戶能把它分享到社交媒體上。對于特定的應用而言，豐富的社交分享差不多是最重要的營銷渠道。所謂「豐富的社交分享」，是指像下面這樣的分享：
可以看到， 非死book, 推ter 等社交站點能夠獲取非常豐富的內容，不僅限于網頁標題和圖片。為什么可以做到這一點？因為在網頁 HTML 文檔的head部分包含了有特別含義的元數據標記。像 非死book 以及 Pinterest 和 Google+ 等社交站點能讀取遵循 開放圖協議標準的元數據，例如，
<head> <meta property="og:title" content="My Page" /> <meta property="og:description" content="A description of my page." /> <meta property="og:image" content="http://www.mysite.com/images/my_lovely_face.jpg" /> <!-- etc. --> </head>
推ter 也支持類似的機制，不過它用的元數據屬性前綴是推ter:，而不是og:。
當用戶在社交站點上分享一個 URL 時，社交站點會啟動一個網絡爬蟲去抓取該頁面的內容。網絡爬蟲首先在網頁源文檔中找出各種元數據標記，然后才會查看常規 HTML 元素的內容，例如，<head>標記和網頁中的圖像等。
用 AngularJS（以及其它 JavaScript 框架）開發的 Web 站點不支持爬蟲的抓取
我已經在 Earlyclaim 站點的網頁中添加了所有必需的遵循開放圖協議標準的元數據標記。但是，當我把 Earlyclaim 站點的一個鏈接分享到 非死book 時，顯示的結果卻是非常令人失望的：
導致如此糟糕的結果的原因很簡單： 抓取網頁時，網絡爬蟲并不會執行網頁中的 JavaScript 代碼。因此，爬蟲抓取到的內容是這樣的：
<head>
<meta property="og:title" content="{{meta.title}} - earlyclaim.com" />
<meta property="og:description" content="{{meta.description}}" />
<meta property="og:image" content="{{meta.image}}" />
<!-- etc. -->
</head>解決方案
解決方案的基本思想是：應用一種在服務器端執行的用戶代理探測方法，識別出當前請求來自于社交站點的爬蟲；此時，服務器不會像 處理瀏覽器請求那樣返回一個 AngularJS 模板文件，而是重定向到一個服務器端生成的頁面，頁面中包含了希望提供的元數據標記以及正確填寫的信息。經過 Google 搜索，以及與其它創業公司 startypchile 的技術人員的討論，我們發現了 prerender.io 服務，它能夠預先渲染好動態頁面的內容。這為問題的解決奠定了良好的開端。
Prerender 的開發者提供了很多 中間件， 還把 prerender 引擎開源，因為他們認為
我們相信搜索引擎優化（SEO）是一種權利，而非一種特權！當然，如果你愿意，也可以付費使用他們提供的 Prerender 托管服務。
支撐 Earlyclaim 的基礎設施是以 Docker 為基礎構建的。為了集成 Prerender 服務，我們首先在 Docker Hub 中找出相關的幾個容器鏡像，然后進行試用，結果難以令人感到滿意。
我們的需求包括：
- 完全可定制的環境（通過 Kitematic ）；
- 能夠使用 Redis 作為緩存數據庫；
- 立即可用的 Prerender 容器。 </ul>
- 摘自 維基百科 </blockquote>
我們的解決方案是建立在開源的 prerender.io 引擎 的基礎之上：沒有它，就不會有我們的解決方案。 Prerender 團隊太棒了。
其次，同樣重要的是，在與很多創業公司的開發者交流之后，我們了解到：他們很多人都在使用 AngularJS 或者其它框架構建 Web 應用，也需要解決搜索引擎優化/豐富的社交分享問題。然而，由于不知道解決方法，或者感覺解決起來太耗費時間，或許會影響更為重要的產品發布時間，他們暫 時擱置這個問題，留待以后解決。還有些開發者甚至沒有意識到有這個問題，當從我們這里聽說了之后，他們請求我們把解決方案分享出來。
我們相信這個方案能夠加速整個開發進程，因為它解決了一個普遍的問題。很高興能夠分享這個方案。
實現
如果技術人員想把我們構建的容器鏡像添加到自己的基礎設施中，請參考 Docker Hub 上的文檔： https://registry.hub.docker.co ... edis/
AngularJS 服務
如果是 AngularJS 應用，首先實現下面的代碼：
'use strict'; !(function (window, document, undefined) { var getModule = function (angular) { return angular.module('seo', []) .run([ '$rootScope', function ($rootScope) { $rootScope.htmlReady = function () { $rootScope.$evalAsync(function () { // fire after $digest setTimeout(function () { // fire after DOM rendering if (typeof window.callPhantom === 'function') { window.callPhantom(); } }, 0); }); }; } ]); }; if (typeof define === 'function' && define.amd) { define(['angular'], getModule); } else { getModule(angular); } })(window, document);
然后通過angular.module('youApp', ['seo'])調用。
結論
如果你使用我們的容器，覺得還不錯，請一定告知我們（ @Earlyclaim）。
如果你覺得有人會對此感興趣，請轉發給他們（點擊社交分享按鈕）！
任何建議，請發推特并通知 @Earlyclaim ：非常期待您的觀點和文字！
任何代碼改進，請通過 GitHub 推送合并請求！
順便說一句，我們熱愛創業公司，我們熱愛開發者，我們熱愛社區！ 開放生態系統萬歲！
原文：Get your Javascript website perfectly crawled with Docker （翻譯：柳泉波 校對：佚名）
來自：http://dockerone.com/article/279
這些也是我們自行構建容器鏡像的原因！
為什么公開我們的解決方案
首先，我們信仰「協同智能」：協同智能是多主體、分布式系統的特征，其中每個主體（人或者機器）都有唯一的位置，自主地為問題解決網絡作貢獻。在生態 系統中，有機體的協同自治使得演化成為可能。在自然生態系統中，每個有機體的唯一標識來自于自身的基因、環境以及它在生態系統中的行為和位置。自然生態系 統為設計下一代社交網絡提供原則，使之能夠支持協同智能、眾包個人的專長、偏好以及在問題解決過程中的獨特貢獻。
本文由用戶 n6xb 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！