[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-在vercel上使用puppeteer製作爬蟲":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":20,"minRead":21},3356,"在vercel上使用puppeteer製作爬蟲","在Vercel上使用puppeteer製作爬蟲","在Vercel上使用puppeteer製作爬蟲 免費仔萬歲！(誤)puppeteer是一個nodeJS的函式庫 […]","\u003Ch1>在Vercel上使用puppeteer製作爬蟲\u003C\u002Fh1>\n\u003Cp>免費仔萬歲！(誤)puppeteer是一個nodeJS的函式庫，可以用來控制 Chrome 或 Chromium 瀏覽器，當然是一個用作爬蟲的好工具。這邊就先跳過puppeteer的使用方式介紹，僅記錄在Vercel上使用puppeteer進行網頁爬蟲遇到的一些問題。\u003Cbr \u002F>\n使用puppeteer可以參考\u003Ca href=\"https:\u002F\u002Fpptr.dev\u002F\" title=\"這邊\">這邊\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>使用puppeteer-core\u003C\u002Fh2>\n\u003Cp>由於Vercel上不能直接執行Chromium ，需要透過chrome-aws-lambda來使用Chromium，必須注意chrome-aws-lambda不能執行本機的Chromium，如果要本機測試則需將executablePath改為實體的位置喔。範例大致如下\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import puppeteer from 'puppeteer-core'\n\nconst getData = async (url) => {\n    try {\n        let browser = await puppeteer.launch({\n            args: [...chrome.args, '--hide-scrollbars', '--disable-web-security'],\n            defaultViewport: chrome.defaultViewport,\n            executablePath: await chrome.executablePath,\n            headless: chrome.headless,\n            ignoreHTTPSErrors: true,\n        });\n        const browser = await puppeteer.launch(options);\n        const page = await browser.newPage();\n        await page.goto('前往的網頁', { waitUntil: 'networkidle0' });\n        await page.close();\n        await browser.close();\n  } catch (err) {\n      console.error(err);\n      return;\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>輕量化爬蟲\u003C\u002Fh2>\n\u003Cp>如果只是要爬取文字資料，那可以關閉圖片、css等請求，將爬蟲輕量化以壓低執行時間。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002F需要先設定 setRequestInterception 為 true，預設狀況下request 是唯讀的。\nawait page.setRequestInterception(true);\npage.on("request", (req) => {\n  if (\n    req.resourceType() == "stylesheet" ||\n    req.resourceType() == "font" ||\n    req.resourceType() == "image"\n  ) {\n    req.abort();\n  } else {\n    req.continue();\n  }\n});\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>限制\u003C\u002Fh2>\n\u003Cp>由於Vercel上有部署的套件大小限制50mb，puppeteer-core和chrome-aws-lambda需要使用以下版本，用最新版會超過限制導致無法部署。\u003Cbr \u002F>\nVercel上也需要使用\u003Cstrong>Node14\u003C\u002Fstrong>版本，記得調整唷。\u003Cbr \u002F>\npackeage.json\u003C\u002Fp>\n\u003Cpre>\u003Ccode>  "puppeteer-core": "10.1.0",\n  "chrome-aws-lambda": "10.1.0",\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>按照上述應該就能部署成功，並且爬取一個網頁內容，在我的專案中爬複數網頁就會超過執行時間而失敗，這邊還是研究如何改進執行效率XD\u003Cbr \u002F>\n如果搭配排程服務，就可以透過免費服務製作一個自動爬蟲工具，免費仔萬歲！\u003C\u002Fp>\n","2023-02-12T10:01:30","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F01%2F640px-Node.js_logo.svg.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,18],{"name":16,"slug":17},"Devops","devops",{"name":19,"slug":19},"node","\u002Fblog\u002F在vercel上使用puppeteer製作爬蟲",1]