日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取...

發(fā)布時(shí)間：2025/7/25 57 豆豆
生活随笔 收集整理的這篇文章主要介紹了 有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取... 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?

點(diǎn)這里

?

閱讀目錄

  • 用 AngularJS（以及其它 JavaScript 框架）開發(fā)的 Web 站點(diǎn)不支持爬蟲的抓取
  • 解決方案
  • 為什么公開我們的解決方案
  • 實(shí)現(xiàn)
  • AngularJS 服務(wù)
  • 結(jié)論
?

Prerender 服務(wù)能夠?yàn)榫W(wǎng)絡(luò)爬蟲提供預(yù)先渲染的動(dòng)態(tài)頁面內(nèi)容，解決了用 JavaScript 框架構(gòu)建的 Web 站點(diǎn)不支持爬蟲抓取的問題。本文詳細(xì)描述了一種解決方案，尤其是提供了集成 Prerender 服務(wù)的 Docker 容器鏡像。?


如果你正在使用 AngularJS 構(gòu)建一個(gè)面向大眾消費(fèi)者的應(yīng)用，你肯定希望用戶能把它分享到社交媒體上。對(duì)于特定的應(yīng)用而言，豐富的社交分享差不多是最重要的營銷渠道。所謂「豐富的社交分享」，是指像下面這樣的分享：?


可以看到， Facebook, Twitter 等社交站點(diǎn)能夠獲取非常豐富的內(nèi)容，不僅限于網(wǎng)頁標(biāo)題和圖片。為什么可以做到這一點(diǎn)？因?yàn)樵诰W(wǎng)頁 HTML 文檔的head部分包含了有特別含義的元數(shù)據(jù)標(biāo)記。像 Facebook 以及 Pinterest 和 Google+ 等社交站點(diǎn)能讀取遵循?開放圖協(xié)議標(biāo)準(zhǔn)的元數(shù)據(jù)，例如，?

<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>


Twitter 也支持類似的機(jī)制，不過它用的元數(shù)據(jù)屬性前綴是twitter:，而不是og:。?

當(dāng)用戶在社交站點(diǎn)上分享一個(gè) URL 時(shí)，社交站點(diǎn)會(huì)啟動(dòng)一個(gè)網(wǎng)絡(luò)爬蟲去抓取該頁面的內(nèi)容。網(wǎng)絡(luò)爬蟲首先在網(wǎng)頁源文檔中找出各種元數(shù)據(jù)標(biāo)記，然后才會(huì)查看常規(guī) HTML 元素的內(nèi)容，例如，&lt;head>標(biāo)記和網(wǎng)頁中的圖像等。?

用 AngularJS（以及其它 JavaScript 框架）開發(fā)的 Web 站點(diǎn)不支持爬蟲的抓取

我已經(jīng)在?Earlyclaim?站點(diǎn)的網(wǎng)頁中添加了所有必需的遵循開放圖協(xié)議標(biāo)準(zhǔn)的元數(shù)據(jù)標(biāo)記。但是，當(dāng)我把 Earlyclaim 站點(diǎn)的一個(gè)鏈接分享到 Facebook 時(shí)，顯示的結(jié)果卻是非常令人失望的：?



導(dǎo)致如此糟糕的結(jié)果的原因很簡單：?抓取網(wǎng)頁時(shí)，網(wǎng)絡(luò)爬蟲并不會(huì)執(zhí)行網(wǎng)頁中的 JavaScript 代碼。因此，爬蟲抓取到的內(nèi)容是這樣的：?

<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>

?

回到頂部

解決方案

解決方案的基本思想是：應(yīng)用一種在服務(wù)器端執(zhí)行的用戶代理探測方法，識(shí)別出當(dāng)前請(qǐng)求來自于社交站點(diǎn)的爬蟲；此時(shí)，服務(wù)器不會(huì)像 處理瀏覽器請(qǐng)求那樣返回一個(gè) AngularJS 模板文件，而是重定向到一個(gè)服務(wù)器端生成的頁面，頁面中包含了希望提供的元數(shù)據(jù)標(biāo)記以及正確填寫的信息。?

經(jīng)過 Google 搜索，以及與其它創(chuàng)業(yè)公司?startypchile?的技術(shù)人員的討論，我們發(fā)現(xiàn)了?prerender.io?服務(wù)，它能夠預(yù)先渲染好動(dòng)態(tài)頁面的內(nèi)容。這為問題的解決奠定了良好的開端。?

Prerender 的開發(fā)者提供了很多?中間件， 還把?prerender 引擎開源，因?yàn)樗麄冋J(rèn)為?

我們相信搜索引擎優(yōu)化（SEO）是一種權(quán)利，而非一種特權(quán)！

當(dāng)然，如果你愿意，也可以付費(fèi)使用他們提供的 Prerender 托管服務(wù)。?

支撐?Earlyclaim?的基礎(chǔ)設(shè)施是以?Docker?為基礎(chǔ)構(gòu)建的。為了集成 Prerender 服務(wù)，我們首先在 Docker Hub 中找出相關(guān)的幾個(gè)容器鏡像，然后進(jìn)行試用，結(jié)果難以令人感到滿意。?

我們的需求包括：?

  • 完全可定制的環(huán)境（通過?Kitematic?）；
  • 能夠使用?Redis?作為緩存數(shù)據(jù)庫；
  • 立即可用的 Prerender 容器。


這些也是我們自行構(gòu)建容器鏡像的原因！?

?

回到頂部

為什么公開我們的解決方案

首先，我們信仰「協(xié)同智能」：?

協(xié)同智能是多主體、分布式系統(tǒng)的特征，其中每個(gè)主體（人或者機(jī)器）都有唯一的位置，自主地為問題解決網(wǎng)絡(luò)作貢獻(xiàn)。在生態(tài) 系統(tǒng)中，有機(jī)體的協(xié)同自治使得演化成為可能。在自然生態(tài)系統(tǒng)中，每個(gè)有機(jī)體的唯一標(biāo)識(shí)來自于自身的基因、環(huán)境以及它在生態(tài)系統(tǒng)中的行為和位置。自然生態(tài)系 統(tǒng)為設(shè)計(jì)下一代社交網(wǎng)絡(luò)提供原則，使之能夠支持協(xié)同智能、眾包個(gè)人的專長、偏好以及在問題解決過程中的獨(dú)特貢獻(xiàn)。?
- 摘自?維基百科

我們的解決方案是建立在開源的?prerender.io 引擎?的基礎(chǔ)之上：沒有它，就不會(huì)有我們的解決方案。 Prerender 團(tuán)隊(duì)太棒了。?

其次，同樣重要的是，在與很多創(chuàng)業(yè)公司的開發(fā)者交流之后，我們了解到：他們很多人都在使用 AngularJS 或者其它框架構(gòu)建 Web 應(yīng)用，也需要解決搜索引擎優(yōu)化/豐富的社交分享問題。然而，由于不知道解決方法，或者感覺解決起來太耗費(fèi)時(shí)間，或許會(huì)影響更為重要的產(chǎn)品發(fā)布時(shí)間，他們暫 時(shí)擱置這個(gè)問題，留待以后解決。還有些開發(fā)者甚至沒有意識(shí)到有這個(gè)問題，當(dāng)從我們這里聽說了之后，他們請(qǐng)求我們把解決方案分享出來。?

我們相信這個(gè)方案能夠加速整個(gè)開發(fā)進(jìn)程，因?yàn)樗鉀Q了一個(gè)普遍的問題。很高興能夠分享這個(gè)方案。?

回到頂部

實(shí)現(xiàn)

如果技術(shù)人員想把我們構(gòu)建的容器鏡像添加到自己的基礎(chǔ)設(shè)施中，請(qǐng)參考 Docker Hub 上的文檔：https://registry.hub.docker.co ... edis/?

回到頂部

AngularJS 服務(wù)

如果是 AngularJS 應(yīng)用，首先實(shí)現(xiàn)下面的代碼：?

'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?$digestsetTimeout(function?()?{?//?fire?after?DOM?renderingif?(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'])調(diào)用。?

回到頂部

結(jié)論

如果你使用我們的容器，覺得還不錯(cuò)，請(qǐng)一定告知我們（?@Earlyclaim）。?

如果你覺得有人會(huì)對(duì)此感興趣，請(qǐng)轉(zhuǎn)發(fā)給他們（點(diǎn)擊社交分享按鈕）！?

任何建議，請(qǐng)發(fā)推特并通知?@Earlyclaim?：非常期待您的觀點(diǎn)和文字！?

任何代碼改進(jìn)，請(qǐng)通過?GitHub?推送合并請(qǐng)求！?

順便說一句，我們熱愛創(chuàng)業(yè)公司，我們熱愛開發(fā)者，我們熱愛社區(qū)！?開放生態(tài)系統(tǒng)萬歲！?

原文：Get your Javascript website perfectly crawled with Docker?（翻譯：柳泉波 校對(duì)：佚名）?

來自：http://dockerone.com/article/279

轉(zhuǎn)載于:https://www.cnblogs.com/RTdo/p/4401575.html

總結(jié)

以上是生活随笔為你收集整理的有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。