用Puppeteer和无服务器函数构建一个链接预览器

热门技术勘探工
135 阅读8分钟

Build a Link Previewer with Puppeteer and Serverless Functions

在本教程中，我们将看到如何在前端应用旁边部署无服务器函数，并创建一个能生成图片并从链接中抓取元数据的API。

通过无服务器函数，开发者可以在他们的应用程序中创建和实现现代特征和功能，而无需经历建立和管理后端服务器的痛苦。这些功能是由云计算公司托管和部署的。

Netlify功能使创建和部署无服务器功能对托管在Netlify上的应用程序很容易。

前提条件

要跟上本教程，你需要熟悉JavaScript、Vue.js、Git、GitHub和Netlify。你还应该有一个安装了Vetur（用于IntelliSense）的文本编辑器（如VS Code），并在你的机器上安装一个最新版本的Node。你可以在这里安装Node。你可以通过在终端运行node -v命令来检查你的Node的版本。

你还应该在Netlify上有一个账户。如果你还没有，你可以创建一个。

我们正在建造的东西

为了展示我们如何在前端应用程序中轻松设置无服务器功能，我们将构建一个带有自定义链接预览器组件的应用程序。

这个组件会向我们的无服务器函数发送一个带有URL的请求。然后，该函数使用Puppeteer从使用URL的目标网站获取元数据，并生成该网站的截图。

该函数将元数据和截图发回给我们前端的组件，在应用程序中作为链接预览显示。

这里是部署在Netlify上的例子项目的链接。这里是GitHub Repo的链接，可以跟上。

创建和设置Vue应用程序

我们将使用Vue CLI创建一个Vue 3应用程序。我们还将安装和设置Tailwind CSS，这是一个实用至上的CSS框架，它提供的类可以用于我们的应用程序，而不需要编写大量的自定义CSS。

安装和设置Vue

为了快速搭建一个Vue应用程序，我们将使用Vue CLI。要安装Vue CLI，请运行。

npm install -g @vue/cli

一旦CLI被安装，我们可以通过运行来创建一个项目。

vue create link-previewer

这将提示我们为我们的安装选择一个预设。我们将选择 "手动选择功能"，这样我们就可以选择我们需要的功能。下面是我选择的选项。

Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with: 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

选择这些选项后，我们会被问及是否要将这些选项保存为预设，以便以后使用。选择Y （是）或N （否），然后继续安装。

Linkpreviewer vue presets

运行cd link-previewer ，进入新创建的项目。

安装并设置Tailwind CSS

为了安装Tailwind，我们将使用PostCSS 7兼容版，因为Tailwind依赖于PostCSS 8--在撰写本文时，Vue 3还不支持该版本。卸载任何之前的Tailwind安装，并重新安装兼容版。

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建Tailwind的配置文件

接下来，生成tailwind.config.js 和postcss.config.js 文件。

npx tailwindcss init -p

这将在项目的根部创建一个最小的tailwind.config.js 文件。

配置Tailwind以删除生产中未使用的样式

在tailwind.config.js 文件中，用所有页面和组件的路径配置purge 选项，这样Tailwind就可以在生产构建中树状摇动未使用的样式。

// ./tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  ...
}

在CSS文件中包括Tailwind

创建./src/assets/css/main.css 文件，并使用@tailwind 指令来包括Tailwind的base 、components 、和utilities 样式。

/* ./src/assets/css/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

body{
  @apply bg-gray-50;
}

在构建时，Tailwind会将这些指令与它根据配置的设计系统产生的所有样式进行交换。

最后，确保CSS文件被导入到./src/main.js 文件中。

// ./src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import './assets/css/main.css'

createApp(App).use(store).use(router).mount('#app')

就这样，我们可以运行我们的服务器了。

npm run serve

Vue CLI: start the server after successfully creating an app

现在应用程序正在运行，如果我们进入提供的URL，我们应该看到Vue的默认演示应用程序，并看到Tailwind的预检基本样式已经被应用。

Vue app output after adding Tailwind CSS

安装Tailwind CSS IntelliSense扩展

为了获得更顺畅的开发体验，请为VS Code安装Tailwind CSS Intellisense扩展。

Install Tailwind CSS Intellisense Extension for VS Code

基本应用结构

下面是我们的项目文件夹的概况，应该是这样的。

link-previewer/
├─ functions/
│  ├─ generate-preview.js
│  └─ hello.js
├─ public/
│  ├─ favicon.ico
│  ├─ img/
│  │  └─ icons/
│  ├─ index.html
│  └─ robots.txt
├─ src/
│  ├─ main.js
│  ├─ App.vue
│  ├─ registerServiceWorker.js
│  ├─ assets/
│  │  ├─ css/
│  │  │  └─ main.css
│  │  └─ logo.png
│  ├─ components/
│  │  └─ LinkPreviewer.vue
│  ├─ router/
│  │  └─ index.js
│  ├─ store/
│  │  └─ index.js
│  └─ views/
│     ├─ About.vue
│     └─ Home.vue
├─ .git
├─ .gitignore
├─ .browserslistrc
├─ .eslintrc.js
├─ babel.config.js
├─ netlify.toml
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ README.md
└─ tailwind.config.js

Netlify Functions的快速介绍

Netlify Functions是Netlify的一个产品，它简化了创建和部署无服务器函数的过程。根据该产品的主页，它可以用来。

部署作为API端点的服务器端代码，自动运行以响应事件，或在后台处理更复杂的工作。

一个基本的Netlify Function文件导出一个处理方法，其语法如下。

exports.handler = async function(event, context){
  return {
    statusCode: 200,
    body: JSON.stringify({message: "Hello World!"})
  }
}

当函数被调用/激活时，Netlify提供event 和context 参数。当一个函数的端点被调用时，handler ，像这样接收一个event 对象。

{
  "path": "Path parameter (original URL encoding)",
  "httpMethod": "Incoming request’s method name",
  "headers": {Incoming request headers},
  "queryStringParameters": {Query string parameters},
  "body": "A JSON string of the request payload",
  "isBase64Encoded": "A boolean flag to indicate if the applicable request payload is Base64-encoded"
}

另一方面，context 参数包括关于函数被调用的上下文的信息。

在该函数中，我们要返回一个具有两个重要属性的对象。

  • statusCode，在这种情况下是200
  • body，这是一个字符串化的对象。

该函数将从我们的网站/.netlify/functions/hello ，一旦成功，它将返回200状态代码和信息，"你好，世界！"。

现在我们对Netlify函数的工作有了一个概念，让我们来看看它们的实际应用。

创建我们的第一个Netlify函数

为了创建我们的第一个Netlify函数，我们将在项目目录中创建一个新的文件functions/hello.js ，并输入以下内容。

// functions/hello.js
exports.handler = async function(event, context){
  return {
    statusCode: 200,
    body: JSON.stringify({message: "Hello World!"})
  }
}

一旦我们创建了这个函数文件，我们就必须进行一些必要的配置，以便我们能够在本地运行我们的函数。

设置Netlify配置

我们将在我们项目文件夹的根部创建一个netlify.toml 文件，这个文件将告诉Netlify在哪里找到我们的函数。

# ./netlify.toml

[functions]
  directory = "./functions"

现在Netlify会在构建时在functions 文件夹中找到并部署这些函数。

安装Netlify CLI

为了在本地运行我们的函数而不需要部署到Netlify，我们需要安装Netlify CLI。CLI允许我们在本地部署我们的项目和一些伟大的Netlify功能。

要安装CLI，请确保你的Node.js版本为10或更高，然后运行。

npm install netlify-cli -g

这将在全局范围内安装Netlify CLI，所以我们可以在任何目录下运行netlify 命令。要获得版本、使用情况等信息，我们可以运行。

netlify

用Netlify Dev运行应用程序

要用Netlify CLI在本地运行我们的项目，请停止开发服务器（如果它是活动的），然后运行。

netlify dev

这就是我们应该看到的。

Run Netlify dev with Netlify CLI

如果你仔细观察，你会发现有一些事情正在发生。

  • Netlify试图将环境变量从我们的.env 文件中注入到构建过程中，这些变量可以被我们的Netlify函数访问。在这种情况下，我们没有.env 文件，所以它加载的是process 中定义的默认值。

  • 其次，它加载或部署我们位于函数目录下的函数。函数服务器被部署在一个不同的、随机的端口上 -36647 。

  • 最后，它自动检测应用程序是用什么框架构建的，并运行必要的构建过程来部署应用程序。在这种情况下，你可以看到 "用Vue.js启动Netlify Dev"。它也支持React和其他流行的框架。

然后Netlify在http://localhost:8888 上启动我们的开发服务器。

Netlify dev Cli started

现在我们的服务器已经启动了，我们的函数也被加载了，我们可以调用/invoke它。默认情况下，我们可以使用这个路由访问我们的函数：/.netlify/functions/<function name> 。

需要注意的一件事是，我们不需要指定函数服务器运行的端口。我们可以使用上面的默认路由与我们的函数服务器进行通信。Netlify会在幕后自动解决URL和端口的问题。

如果我们发送一个GET 的请求到http://localhost:8888/.netlify/functions/hello，我们应该得到一个{"message":"Hello, World!"} 的响应。

hello.js Function response from browser

很好！我们的第一个无服务器函数成功了我们的第一个无服务器函数成功了!

继续阅读：在SitePoint 上用Puppeteer和无服务器函数构建一个链接预览器。

avatar
文章
阅读
粉丝