使用Puppeteer和无服务器功能构建链接预览器

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

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

NETLIFY功能使创建和部署无服务器功能易于NetLify托管的应用程序。

钥匙要点

>利用puppeteer和NetLify函数来构建无服务器链接预览器，该链接预览器可从URL获取元数据和屏幕截图。

首先设置带有尾风CSS的VUE 3应用程序，以确保现代响应式设计。

• 实现NetLify功能以处理诸如API创建之类的后端过程，而无需管理服务器，增强可扩展性和易于部署的性能。
• >在NetLify函数中使用Puppeteer来自动化浏览器任务，例如捕获屏幕截图和从网页中提取元数据。
• >在NetLify上部署应用程序，利用GIT存储库的连续部署进行简化的更新和维护。
通过合并与无服务器函数交互以在前端动态显示链接的VUE组件来增强用户体验。
• >先决条件
• 要与本教程一起，您需要熟悉JavaScript，Vue.js，Git，Github和Netlify。您还应该在安装了Vetur（用于IntelliSense）的文本编辑器（例如VS代码），以及在计算机上安装的节点的最新版本。您可以在此处安装节点。您可以通过运行命令节点-VIN终端检查节点的版本。
>您还应该在Netlify上拥有一个帐户。如果尚未创建一个。

>

我们正在构建的

>展示我们如何使用前端应用程序轻松设置无服务器功能，我们将使用自定义链接预览器组件构建应用程序。

此组件将带有URL的请求发送给我们的无服务器函数。然后，该函数使用Puppeteer使用URL从目标站点获取元数据并生成站点的屏幕截图。

>该功能将元数据和屏幕截图发送回我们前端的组件，以将其显示为应用程序中的链接预览。

这是指向Netlify上部署的示例项目的链接。这是要跟随的github回购。

创建并设置VUE应用程序

我们将使用VUE CLI创建VUE 3应用程序。我们还将安装和设置Tailwind CSS，这是一种公用事业优先的CSS框架，可为应用程序提供我们可以使用的类，而无需编写大量自定义CSS。

>安装并设置VUE

要快速脚手架vue应用程序，我们将使用VUE CLI。要安装Vue CLI，请运行：

<span>npm install -g @vue/cli
</span>

>安装了CLI后，我们可以通过运行来创建一个项目：>

>这将提示我们为安装选择一个预设。我们将选择“手动选择功能”，以便可以选择所需的功能。这是我选择的选项：

vue create link-previewer

选择这些选项后，我们将被问到是否要将选项保存为预设以供以后使用。选择y（yes）或n（否），然后继续安装。

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

>

>运行CD链接浏览器以输入新创建的项目。

>安装并设置尾风CSS

要安装尾风，我们将使用PostCSS 7兼容性构建，因为尾风取决于PostCSS 8 - 在撰写本文时，Vue 3尚未支持。 ：

创建尾风配置文件

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

接下来，生成tailwind.config.js and Postcss.config.js文件：

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

npx tailwindcss init <span>-p
</span>

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

在tailwind.config.js文件中，配置带有所有页面和组件的吹扫选项，以便tailwind可以在生产构建中的Treekake Undused Styles：

>

在CSS文件中包括后风

>创建./src/assets/css/main.css文件，然后使用@TailWind指令包括尾灯的基础，组件，和实用程序样式：

>

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

tailwind将在制造时间将这些指令与基于配置的设计系统生成的所有样式交换。

最后，确保在./src/main.js文件中导入CSS文件：

就是这样，我们可以运行我们的服务器：

<span>/* ./src/assets/css/main.css */
</span><span><span>@tailwind base;</span>
</span><span><span>@tailwind components;</span>
</span><span><span>@tailwind utilities;</span>
</span>
<span>body{
</span>  <span><span>@apply bg-gray-50;</span>
</span><span>}
</span>

<span>// ./src/main.js
</span><span>import <span>{ createApp }</span> from 'vue'
</span><span>import <span>App</span> from './App.vue'
</span><span>import './registerServiceWorker'
</span><span>import router from './router'
</span><span>import store from './store'
</span><span>import './assets/css/main.css'
</span>
<span>createApp(App).use(store).use(router).mount('#app')
</span>

>现在该应用程序正在运行，如果我们转到提供的URL，我们应该看到VUE的默认演示应用程序，并看到已应用了tailwind的前风格基本样式。

<span>npm run serve
</span>

>安装尾风CSS Intellisense扩展

为了获得更平滑的开发体验，请安装tailwind CSS Intellisense扩展名。

基本应用结构

这是我们的项目文件夹的外观概述：

>

<span>npm install -g @vue/cli
</span>

netlify函数的快速简介

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

>基本的NetLify函数文件以下面的语法导出处理程序方法：>

当调用/调用函数时，NETLIFY提供事件和上下文参数。当调用函数的端点时，处理程序会收到类似的事件对象：

>

vue create link-previewer

另一方面，上下文参数包括有关该函数的上下文的信息。

在该功能中，我们正在返回一个具有两个重要属性的对象：>

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

>状态代码，在这种情况下为200

身体，这是

> stringified

对象。

>

• >该函数将在我们的网站/.netlify/functions/hello上调用，并且将返回200个状态代码和消息“ Hello，World！”。
• >现在我们已经了解了Netlify函数的工作方式，让我们在实践中查看它们。 创建我们的第一个NetLify函数
为了创建我们的第一个NetLify函数，我们将在项目目录中创建一个新的文件函数/Hello.js，然后输入以下内容：>

>创建功能文件后，我们必须进行一些必要的配置，以便我们在本地运行我们的功能。>

设置NetLify Configuration

我们将在我们的项目文件夹的根部创建一个NetLify.toml文件，该文件将告诉Netlify在哪里找到我们的功能：

netlify现在将在构建时间定位并将功能部署在功能文件夹中。

>安装netlify cli

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

要在本地运行我们的功能而无需部署以NetLify，我们需要安装NetLify CLI。 CLI使我们能够在本地使用一些出色的Netlify功能部署项目。

要安装CLI，请确保您有Node.js版本10或更高版本，然后运行：>

这将在全球范围内安装NetLify CLI，因此我们可以从任何目录运行NetLify命令。要获取版本，用法等等，我们可以运行：

>

npx tailwindcss init <span>-p
</span>

>使用Netlify Dev

运行该应用程序

>要使用Netlify CLI在本地运行我们的项目，请停止Dev Server（如果是活动），然后运行：>

>这是我们应该看到的：

>

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

如果您仔细观察，您会看到一些事情正在发生：

>

• >

  > NetLify尝试将.ENV文件注入环境变量到构建过程中，然后可以通过我们的NetLify函数访问。在这种情况下，我们没有.ENV文件，因此它加载了在进程中定义的默认值。

其次，它加载或部署位于功能目录中的功能。功能服务器部署在不同的随机端口 - 36647。
• > 最后，它自动检测应用程序所构建的框架，并运行必要的构建过程以部署应用程序。在这种情况下，您可以看到“使用vue.js启动netlify dev”。它还支持React和其他流行的框架。

  然后，Netlify在http：// localhost：8888。

• >现在我们的服务器已经启动并且我们的功能已加载，我们可以调用/调用它。默认情况下，我们可以使用此路由访问我们的功能：/.netlify/functions/。

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

>

如果我们将Get请求发送到http：// localhost：8888/.netlify/functions/hello，我们应该得到{“ message”：“ Hello，world！”}的响应。

太好了！我们的第一个无服务器函数有效！

创建预览函数API

>现在我们的NetLify函数有效，我们可以开始构建预览API。这是我们功能API将要做的事情的快速分解：

它接收将从前端发送的目标URL

它将数据传递给puppeteer

> 然后，puppeteer启动一个新的无头浏览器实例

puppeteer在浏览器中打开一个新页面，并导航到目标URL

然后，puppeteer提取

以上是使用Puppeteer和无服务器功能构建链接预览器的详细内容。更多信息请关注PHP中文网其他相关文章！