使用 Puppeteer 无服务器功能构建链接浏览器的方法你会吗

本文链接：https://blog.csdn.net/qq_39652397/article/details/123380160

在本教程中，我们将了解如何在前端应用程序旁边部署服务器的功能，并创建一个 API 来生成图像并从链接中获取元数据。

借助无服务器功能，开发人员可以在其应用程序中创建和实现现代特性和功能，而无需经历设置和管理后端服务器的痛苦。这些功能由云计算公司托管和部署。

Netlify 函数使托管在Netlify上的应用程序可以轻松创建和部署无服务器函数。

先决条件

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

您还应该在 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（否）并继续安装。

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

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

安装 Tailwind CSS IntelliSense 扩展

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

基本应用结构

以下是我们的项目文件夹应该是什么样子的概述：

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