从零开始：在 Docker 中设置 Headless Chrome Node.js 服务器

无头浏览器在现代网络世界的关键作用

在当今飞速发展的网络世界，我们经常需要使用自动 UI 测试、网站爬虫或基于 HTML 的内容分析工具来优化网站性能和用户体验。这些工具都依赖于无头浏览器来模拟真实用户的操作，而无需启动浏览器图形用户界面 (GUI)。本文将详细介绍如何在 Docker 中设置 Headless Chrome Node.js 服务器，从而使您能够在 Linux 服务器或微服务集群中轻松部署和维护无头浏览器环境。

为何选择 Headless Chrome？

Headless Chrome 是无头浏览器的首选，因为它：

• 速度快且可靠： Headless Chrome 基于 Chromium 内核，性能优异，可快速处理复杂的网页内容。
• 跨平台支持： Headless Chrome 可在 Windows、macOS 和 Linux 系统上运行，便于在不同环境中部署。
• 强大的自动化功能： Headless Chrome 提供了丰富的 API，可轻松实现自动化测试、网页爬取和数据提取等任务。

设置 Headless Chrome Node.js 服务器的步骤

1. 安装 Docker

   在您的系统上安装 Docker。Docker 提供了详细的安装指南，请访问 Docker 官方网站 获取更多信息。

2. 拉取 Headless Chrome 镜像

   使用以下命令从 Docker Hub 拉取官方 Headless Chrome 镜像：

   docker pull headlesschrome/chrome
   

3. 创建 Dockerfile

   创建一个名为 Dockerfile 的文件，并写入以下内容：

   FROM headlesschrome/chrome
   
   RUN apt-get update && apt-get install -y xvfb
   
   CMD ["/usr/bin/Xvfb", ":99", "-ac", "-screen", "0", "1920x1080x24", "chromium-browser", "--headless", "--no-sandbox", "--disable-gpu", "--remote-debugging-port=9222"]
   

4. 构建 Docker 镜像

   使用以下命令构建 Docker 镜像：

   docker build -t headless-chrome .
   

5. 运行 Headless Chrome 服务器

   使用以下命令运行 Headless Chrome 服务器：

   docker run -d -p 9222:9222 headless-chrome
   

   此命令将启动一个 Headless Chrome 服务器，并将其暴露在端口 9222 上。

6. 连接到 Headless Chrome 服务器

   您可以使用 Chrome DevTools 或 Puppeteer 等工具连接到 Headless Chrome 服务器。

   • 使用 Chrome DevTools 连接：

     1. 在 Chrome 浏览器中，打开 chrome://inspect 页面。
     2. 单击 "Open dedicated DevTools for Node.js" 链接。
     3. 在 "Target URL" 字段中，输入 http://localhost:9222。
     4. 单击 "Open" 按钮。

   • 使用 Puppeteer 连接：

     1. 安装 Puppeteer：

        npm install puppeteer
        

     2. 在您的 Node.js 代码中，使用以下代码连接到 Headless Chrome 服务器：

        const puppeteer = require('puppeteer');
        
        (async () => {
          const browser = await puppeteer.connect({
            browserURL: 'http://localhost:9222',
          });
        
          const page = await browser.newPage();
          await page.goto('https://www.google.com');
        
          console.log(await page.title());
        
          await browser.close();
        })();
        

结语

通过在 Docker 中设置 Headless Chrome Node.js 服务器，您就可以轻松地自动化测试、网页爬虫和数据提取等任务，从而大幅提高工作效率。Headless Chrome 强大的功能和跨平台支持使其成为开发人员的首选。希望本教程能够帮助您轻松设置 Headless Chrome Node.js 服务器，并从中受益。