使用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中文網其他相關文章！