前端神器-puppeteer搭建静态服务实战解析
2023-11-27 15:15:20
前言
最近在项目中遇到了海报渲染及生成pdf的需求，发现公司前端大佬搭建了一套静态化服务直接暴露出接口调用即可，简单过了一遍，里面掺杂着业务逻辑和其他功能没看太懂😂，但出于对于puppeteer的好奇，于是用了两个周末的时间自己搭建一套简单服务，本文主要目的是记录一次从0到1搭建基本渲染服务的全过程，方便后续继续完善服务的功能。
puppeteer简介
puppeteer是一个无头浏览器，它允许您在没有图形用户界面（GUI）的情况下控制浏览器。这意味着您可以使用puppeteer来自动化浏览器操作，例如访问网页、点击按钮、填写表单等。puppeteer与其他无头浏览器（如PhantomJS和Selenium）相比，具有以下优点：
- 易于使用：puppeteer使用JavaScript API，因此很容易上手。
- 性能优异：puppeteer是基于Chromium构建的，因此它具有很高的性能。
- 支持多种平台：puppeteer可以在Windows、macOS和Linux上运行。
搭建静态服务
安装puppeteer
首先，我们需要安装puppeteer。您可以使用以下命令安装puppeteer：
npm install puppeteer
创建项目
接下来，我们需要创建一个项目。您可以使用以下命令创建一个项目：
mkdir my-puppeteer-project
cd my-puppeteer-project
创建package.json文件
接下来，我们需要创建一个package.json文件。package.json文件是Node.js项目的配置文件。您可以使用以下命令创建一个package.json文件：
npm init -y
安装必要的依赖
接下来，我们需要安装必要的依赖。我们可以使用以下命令安装必要的依赖：
npm install express body-parser
创建服务器
接下来，我们需要创建一个服务器。我们可以使用以下代码创建一个服务器：
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
使用puppeteer渲染页面
接下来，我们需要使用puppeteer渲染页面。我们可以使用以下代码使用puppeteer渲染页面：
const puppeteer = require('puppeteer')
async function renderPage(url) {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(url)
const html = await page.content()
await browser.close()
return html
}
创建渲染页面路由
接下来，我们需要创建一个渲染页面路由。我们可以使用以下代码创建一个渲染页面路由：
app.get('/render', async (req, res) => {
const url = req.query.url
const html = await renderPage(url)
res.send(html)
})
运行服务器
最后，我们需要运行服务器。我们可以使用以下命令运行服务器：
npm start
测试服务
现在，我们可以测试服务了。我们可以使用以下命令测试服务：
curl http://localhost:3000/render?url=https://example.com
如果您看到页面内容，则说明服务运行正常。
puppeteer在静态服务中的应用场景
puppeteer在静态服务中有很多应用场景，例如：
- 海报渲染：您可以使用puppeteer将动态内容渲染成静态海报。
- 生成pdf：您可以使用puppeteer将动态内容生成pdf文件。
- 网站截图：您可以使用puppeteer截取网站的截图。
- 网页自动化：您可以使用puppeteer自动化网页操作，例如访问网页、点击按钮、填写表单等。
总结
本文介绍了如何使用puppeteer搭建一个简单的静态服务。puppeteer是一个非常强大的工具，它可以用于多种场景，例如海报渲染、生成pdf、网站截图和网页自动化等。希望本文对您有所帮助。
