使用Puppeteer和無服務器功能構建鏈接預覽器-js教程-PHP中文網

首頁

web前端

js教程

使用Puppeteer和無服務器功能構建鏈接預覽器

Lisa Kudrow

Feb 09, 2025 pm 12:19 PM

使用Puppeteer和無服務器功能構建鏈接預覽器

在本教程中，我們將看到如何與前端應用程序一起部署無服務器功能，並創建一個生成圖像並從鏈接中獲取元數據的API。

>使用無服務器功能，開發人員可以在其應用程序中創建和實現現代功能，而無需經歷設置和管理後端服務器的痛苦。這些功能由雲計算公司託管和部署。

NETLIFY功能使創建和部署無服務器功能易於NetLify託管的應用程序。

鑰匙要點

>利用puppeteer和NetLify函數來構建無服務器鏈接預覽器，該鏈接預覽器可從URL獲取元數據和屏幕截圖。

首先設置帶有尾風CSS的VUE 3應用程序，以確保現代響應式設計。

實現NetLify功能以處理諸如API創建之類的後端過程，而無需管理服務器，增強可擴展性和易於部署的性能。
>在NetLify函數中使用Puppeteer來自動化瀏覽器任務，例如捕獲屏幕截圖和從網頁中提取元數據。
>在NetLify上部署應用程序，利用GIT存儲庫的連續部署進行簡化的更新和維護。
>先決條件
要與本教程一起，您需要熟悉JavaScript，Vue.js，Git，Github和Netlify。您還應該在安裝了Vetur（用於IntelliSense）的文本編輯器（例如VS代碼），以及在計算機上安裝的節點的最新版本。您可以在此處安裝節點。您可以通過運行命令節點-VIN終端檢查節點的版本。

我們正在構建的

>展示我們如何使用前端應用程序輕鬆設置無服務器功能，我們將使用自定義鏈接預覽器組件構建應用程序。

此組件將帶有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>

使用Puppeteer和無服務器功能構建鏈接預覽器 >運行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擴展使用Puppeteer和無服務器功能構建鏈接預覽器

為了獲得更平滑的開發體驗，請安裝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 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文件，因此它加載了在進程中定義的默認值。

> 最後，它自動檢測應用程序所構建的框架，並運行必要的構建過程以部署應用程序。在這種情況下，您可以看到“使用vue.js啟動netlify dev”。它還支持React和其他流行的框架。

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

>現在我們的服務器已經啟動並且我們的功能已加載，我們可以調用/調用它。默認情況下，我們可以使用此路由訪問我們的功能：/.netlify/functions/。

>要注意的一件事是，我們不需要指定運行功能服務器的端口。我們可以使用上面的默認路由與我們的功能服務器進行通信。 Netlify會自動解析幕後的URL和端口。

如果我們將Get請求發送到http：// localhost：8888/.netlify/functions/hello，我們應該得到{“ message”：“ Hello，world！”}的響應。

使用Puppeteer和無服務器功能構建鏈接預覽器

太好了！我們的第一個無服務器函數有效！

創建預覽函數API

>現在我們的NetLify函數有效，我們可以開始構建預覽API。這是我們功能API將要做的事情的快速分解：

它接收將從前端發送的目標URL

它將數據傳遞給puppeteer

> 然後，puppeteer啟動一個新的無頭瀏覽器實例使用Puppeteer和無服務器功能構建鏈接預覽器

puppeteer在瀏覽器中打開一個新頁面，並導航到目標URL

然後，puppeteer提取

和<meta>標籤的內容，以描述目標頁面> <h2 id="gt-它捕獲了頁面的屏幕截圖">>它捕獲了頁面的屏幕截圖</h2> >它將屏幕截圖數據發送回前端 <ul> <li>>現在我們對API的功能要做什麼有了一個基本思路，我們可以開始創建函數。讓我們從安裝和設置netlify函數的偽 </li>安裝和配置Puppeteer <li> <ande> Puppeteer是一個節點庫，可提供高級API來控制無頭鉻或鉻瀏覽器。它也可以配置為使用完整的（無頭）鉻或鉻。您可以使用Puppeteer在瀏覽器中手動執行大多數事情。有關Puppeteer的更多信息，可以在Puppeteer文檔中找到。 </ande> </li>> <li>為了開始使用Puppeteer，我們將其安裝在項目中。 </li> <h4 id="gt-用於本地開發和生產的木偶">>用於本地開發和生產的木偶</h4> puppeteer下載了最新版本的Chromium（〜170MB MacOS，〜282MB Linux，〜280MB Windows），保證可以與API一起使用。 >我們無法使用完整的Puppeteer軟件包進行生產。這是因為Netlify功能的最大尺寸為50MB，並且Chromium包裝太大。 感謝IRE Aderinokun的這篇非常有用的文章，我們仍然可以在本地和生產中與Puppeteer合作。這是我們要做的： >用於本地部署的開發依賴性* 要使Puppeteer在本地和生產中工作，我們必須將Puppeteer-Core和Chrome-aws-Lambda安裝為生產依賴項</ul> <pre class="brush:php;toolbar:false">npm install -g @vue/cli </pre>。 >您可以在此處查看Puppeteer和Puppeteer核心之間的區別。但是，主要區別在於，安裝時Puppeteer-Core不會自動下載Chromium。 >由於Puppeteer-core沒有下載瀏覽器，因此我們將安裝Chrome-aws-Lambda，這是“ AWS Lambda和Google Cloud功能的Chromium Binary binary”，我們可以在NetLify函數中使用。這些是將在生產中起作用的軟件包： >現在我們已經安裝了軟件包，讓我們創建我們的函數。 <ancy>> </ancy>使用已經安裝的瀏覽器作為puppeteer<pre class="brush:php;toolbar:false">vue create link-previewer </pre>> >如果Puppeteer安裝完整的瀏覽器以與本地一起使用，這將是一個問題，這可能是由於網絡或帶寬的問題而引起的。有一個解決方法，它可以將我們已經安裝的鉻或鉻瀏覽器用於木偶。 我們需要的是我們本地機器中瀏覽器的路徑。我們將使用它作為我們的可執行路徑，我們將將其傳遞到puppeteer.launch（）方法。這告訴Puppeteer在哪裡可以找到瀏覽器可執行文件。 <h4> </h4>>如果您不確切地知道在哪裡找到可執行路徑，請打開瀏覽器，然後轉到Chrome：//版本/顯示Chrome的版本。 >複製路徑並在項目的根部創建.env文件。 <and>> </and> 要獲取.env文件的內容，我們將安裝另一個軟件包 - dotenv：<ancy>> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907477031343.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" > </ancy>>現在我們已經成功安裝了軟件包，讓我們創建NetLify函數。 <antlify> 創建Generate-Preview函數 <pre class="brush:php;toolbar:false">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 </pre>創建一個新文件，./functions/generate-preview.js： <pre class="brush:php;toolbar:false">npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 </pre>在上面的代碼中，我們正在做很多事情。首先，我們從event.body中的請求有效載荷中獲取targetUrl。這將通過郵政請求發送。 接下來，我們使用Chrome-Aws-Lambda軟件包啟動瀏覽器。我們使用puppeteer.launch（）方法來執行此操作。此方法將對像作為具有一些可選屬性的參數。我們傳遞給此方法的一個重要屬性是可執行路徑。 我們將可執行路徑分配給process.env.excecutable_path ||等待Chromium.ectable Path，使包裹能夠找到可用的無頭瀏覽器啟動。 >啟動瀏覽器後，我們將使用browser.newpage（）方法在瀏覽器中打開一個新頁面。我們還使用page.setviewport（）方法為頁面設置所需的瀏覽器視口。 請注意，運行任何功能時我們正在使用等待的關鍵字。這是因為Puppeteer的工作異步性，並且某些功能可能需要一些時間才能執行。 > >我們還可以使用page.emulatemediafeatures（）方法來執行諸如Puppeteer定義頁面的媒體功能，該方法採用了一系列媒體功能對象。這就是我們將偏愛顏色的風格設置為黑暗的方式。 > <h3 id="獲取網站元數據和屏幕截圖">獲取網站元數據和屏幕截圖</h3> 接下來，我們將導航到目標URL並獲取我們的標題，描述和屏幕截圖： <pre class="brush:php;toolbar:false">npm install -g @vue/cli </pre> >在上面的代碼中，我們使用TryCatch塊來包裝我們的代碼，以便從等待Page.goto（targetUrl）開始，該導航到目標URL，我們可以捕獲錯誤和將其發送到我們的前端。通過提供無效的URL可能會發生錯誤。 如果URL有效，我們使用頁面。 $ eval（）方法獲得標題，該方法類似於常規文檔。我們將標題標籤的CSS選擇器（頭>標題）傳遞為第一個參數。我們還將函數el => el.textContent作為第二個參數，其中el是我們傳遞到函數的參數，並且是標題元素。現在，我們可以使用title.textcontent獲得值。 請注意，所有這些都包裹在括號（（（））中，我們有一個|| null後一頁。$ eval。因此，如果頁面為null。 >要獲取頁面的描述，我們將使用page.evaluate（）方法，該方法允許我們運行某些客戶端JavaScript並將值返回到分配的變量 - 描述。 >我們將函數和參數傳遞給page.evaluate（）方法。在函數中，我們使用document.queryselector獲取各種元描述，例如<meta name="“" descript content="“">” />用於默認說明，<meta property="“" og content="“">” />用於OpenGraph Description。 >獲得元素後，我們使用三元運算符獲取內容，並在元素存在時將其添加到描述對象，或者如果不存在元素，則null。 >一旦獲得了描述，我們就會使用page.screenshot（）方法進行頁面屏幕截圖，然後使用browser.close（）。>最後，我們在Body屬性中發送頁面詳細信息一個具有200個狀態代碼的JSON對象。如果以前的任何一個步驟中發生錯誤而錯誤消息。 <h3 id="測試和部署功能">測試和部署功能</h3> >讓我們使用API測試儀測試我們的功能。您可以在瀏覽器中安裝郵遞員或TALEND API測試儀，也可以使用Thunder Client Extension（VS代碼的API測試儀）。 您也可以使用捲曲： <pre class="brush:php;toolbar:false">npm install -g @vue/cli </pre>>使用NetLify dev命令運行該函數。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907477228599.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" > >我們可以使用functions Server的端口或默認端口發送請求：NetLify Dev Server的8888端口以將請求發送到我們的功能。我將使用http：// localhost：8888/.netlify/functions/generate-preview發送帶有targeturl的對象的郵政請求：> <pre class="brush:php;toolbar:false">vue create link-previewer </pre>當我們發送請求時，這是我們得到的響應。 > <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907477484427.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" > 我們得到一個包含我們的預覽數據的JSON對象：<ancy> 現在我們的無服務器功能起作用，讓我們看看如何在前端使用它。 <pre class="brush:php;toolbar:false">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 </pre>在客戶端上構建鏈接預覽功能 為了與我們的生成瀏覽函數進行交互，我們需要發送包含我們targeturl的發布請求。 <h2 id="gt-我們將創建將顯示正常鏈接的linkPreview組件-這些組件將通過其目標URL作為道具傳遞-在將組件安裝在應用程序中之前-它將帶有targetUrl的帖子請求到我們的無服務器函數-獲取預覽數據-並在我們懸停在鏈接上時將其顯示">>我們將創建將顯示正常鏈接的linkPreview組件。這些組件將通過其目標URL作為道具傳遞。在將組件安裝在應用程序中之前，它將帶有targetUrl的帖子請求到我們的無服務器函數，獲取預覽數據，並在我們懸停在鏈接上時將其顯示。 </h2>> 創建鏈接預覽組件 首先，讓我們創建我們的鏈接預覽組件SRC/COMPONTENTS/LINKPREVIEWER.VUE。 <h3>>在我們的<script>中，我們將通過向我們的無服務器函數發送請求並將數據保存在PreviewData對像中來獲取鏈接預覽數據。我們將在稍後在模板中使用此數據以顯示數據：<ancy>> </script> </h3> 在上面的代碼中，我們將Targeturl作為將傳遞到我們組件的道具。 在設置（）中，我們將道具作為參數將其傳遞給我們，以便我們訪問諸如targeturl的組件道具。 然後，我們使用Ref：const PreviewData = Ref（{}）創建一個反應性PEVIEWDATA對象。在新的generatePreview（）函數中，我們正在使用fetch將包含targeturl的帖子請求發送到我們的無服務器函數。如果發生錯誤，此功能將返迴響應或null。接下來，要在安裝組件之前運行該功能，我們使用onbeforemount（）掛鉤。我們將異步函數作為參數傳遞。在該函數中，我們將PreviewData.Value分配給GeneratePreview（）函數。然後從描述屬性獲取描述（DESC，OG，Twitter）。 > 要獲取將在預覽中顯示的描述，我們將為PreviewData.Value.Description分配（desc || og || og || twitter ||“”）。這樣，將一個具有值的第一個屬性分配給了描述。 > 執行此操作以在我們的模板中顯示預覽數據： <pre class="brush:php;toolbar:false">npm install -g @vue/cli </pre> 在上面的代碼中，為了顯示我們的映像 - 本質上是base64字符串 - 我們必須將字符串與圖像類型之類的數據一起傳遞並編碼為src-“”屬性。 >這就是我們的linkPreviewer.vue組件。讓我們看看它在行動中。 in ./src/views/home.vue： >在我們的home.vue文件中，我們基本上使用刪除鏈接數組來渲染linkpreviewer組件的列表，我們將其傳遞給組件的targeturl props。 <pre class="brush:php;toolbar:false">vue create link-previewer </pre>我們也有一個元素，我們將其用於動態添加更多linkpreviewer組件。 這是我們簡單的應用現在的樣子。 甜！我們的應用程序起作用。由於我們一直使用NetLify CLI在本地運行，讓我們看看如何使用CLI。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907477777669.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" >>部署該應用程序netLify >在我們部署應用程序以進行Netlify之前，我們必須構建我們的應用程序以進行生產：<ancy>> </ancy> <h2>這將構建我們的應用程序，並創建一個可以部署到生產的區域/文件夾。 <ancy>> </ancy> </h2>接下來，我們需要登錄到我們的NetLify帳戶：<ancy>> 這將在瀏覽器中將您登錄到您的NetLify帳戶中。 <pre class="brush:php;toolbar:false">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 </pre>> >授權應用程序後，我們可以將項目鏈接到新站點。 Netlify會問我們一堆問題：<pre class="brush:php;toolbar:false">npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 </pre> 您想做什麼？選擇“創建和配置新站點”。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907478061853.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" >團隊？選擇。 選擇一個唯一的站點名稱？選擇。 <ul>請提供發布目錄（例如“公共”，“ dist”或“。”）。輸入dist。 <li> </li> <li>之後，Netlify將上傳我們的文件並將其部署到我們的新站點。 </li>>使用github <li>部署或者，我們可以決定從Github部署我們的網站。您要做的就是登錄到GitHub，創建一個新的存儲庫，然後將URL複製到我們新創建的repo。 </li> <li> </li> 然後，我們在我們的項目文件夾中運行以下命令：</ul> <pre class="brush:php;toolbar:false">npm install -g @vue/cli </pre> 注意：由於身份驗證問題，您可能無法從終端推入存儲庫，並且您可能會從GIT中收到一條消息：“支持密碼身份驗證的支持於2021年8月13日刪除。請改用個人訪問令牌。”這意味著您必須創建一個個人訪問令牌（PAT）並使用它登錄。要做到這一點，請訪問GitHub令牌設置並生成新的令牌。選擇您想要的所有權限。確保您可以訪問存儲庫。生成PAT後，將其複制並保存在某個地方。然後，再次嘗試git push -u oinct main命令，並在詢問您的密碼時粘貼在PAT中。 一旦我們將項目推向GitHub，請前往Netlify，從Github創建一個新站點。 >按照選擇存儲庫的步驟並輸入項目的構建設置。對於我們的vue項目，構建命令是npm run構建，部署目錄是dist。 之後，單擊部署網站。 <antlify> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907478579627.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" > 您可以選擇一個函數以查看更多詳細信息和日誌。 > <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907478724563.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" > sweet！ 這是在Netlify上部署的演示的鏈接：https：//lnkpreviewr.netlify.app> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907478932965.png?x-oss-process=image/resize,p_40" class="lazy" alt="使用Puppeteer和無服務器功能構建鏈接預覽器" >結論 我們已經能夠使用NetLify函數使用NetLify創建和部署無服務器功能。我們還看到瞭如何與Vue前端的功能進行交互。這次，我們曾經屏幕截圖並從其他站點獲取數據並與之構建了鏈接預覽器組件，但是我們可以做更多的事情。使用無服務器功能，我們可以在前端進行更多操作，而不必費心設置後端服務器。 進一步閱讀和資源 <h2>這是我發現有用的一些資源和內容，我認為您也會：<ancy>><ul> <li>>項目github repo <ancy> </ancy> </li>教程 - NetLify函數<li> </li>>使用無服務器功能運行 - Jamstack Explorers（netlify.com）<li> </li>>開始使用puppeteer Google開發人員<li> </li>如何在Netlify-aws-lambda函數中使用puppeteer <ancly> <li>>如何使用Puppeteer在具有NetLify無服務器功能的API中自動化Chrome - Space Jelly</li> <li> </li>經常詢問有關木偶和無服務器功能的問題（常見問題解答） </ancly> </ul>>如何在無服務器函數中調試我的PuppeTeer代碼？ <ance><h2 id="gt-由於無服務器架構的性質-在無服務器函數中調試Puppeteer代碼可能會有些棘手-但是-您可以使用-console-log-函數打印出值並跟踪代碼的執行-您還可以使用-page-on-console-msg-gt-console-log-msg-text-函數來記錄瀏覽器的所有控制台輸出-請記住要檢查您的無服務器功能提供商儀表板中的日誌">>由於無服務器架構的性質，在無服務器函數中調試Puppeteer代碼可能會有些棘手。但是，您可以使用“ console.log”函數打印出值並跟踪代碼的執行。您還可以使用“ page.on（'console'，msg => console.log（msg.text（）））”函數來記錄瀏覽器的所有控制台輸出。請記住要檢查您的無服務器功能提供商儀表板中的日誌。 </h2> <h3 id="如何在無服務器函數中處理puppeteer中的錯誤">如何在無服務器函數中處理puppeteer中的錯誤？ </h3>>在無服務器函數中偽造的錯誤處理對於確保您的應用程序在upeteer中處理錯誤對於確保您的應用程序順利運行。您可以使用try-catch塊來處理錯誤。在捕獲塊中，您可以記錄錯誤消息，並可選地發送帶有錯誤消息的響應。這樣，您可以跟踪和解決可能出現的任何問題。 <h3></h3>>除了NetLify之外，我可以將Puppeteer與其他無服務器提供商一起使用？ AWS Lambda，Google Cloud功能和Azure功能。但是，設置過程可能會根據提供商而有所不同。您可能需要使用像Chrome-aws-lambda這樣的自定義構建for aws lambda。在無服務器功能中，您可以使用一些策略。首先，在多個調用中重複使用瀏覽器實例。其次，使用“ NetworkIdle0” Waituntil選項來確保所有網絡請求都已完成。第三，禁用木偶器中的不必要功能，例如圖像，CSS和字體，以加快頁面加載。 >>我如何在無服務器函數中使用PuppeTeer進行屏幕截圖？ <h3></h3>很簡單。您可以使用“ page.screenshot（）”函數進行當前頁面的屏幕截圖。您可以指定選項，例如屏幕截圖類型（JPEG或PNG），質量，是包含完整頁面還是僅僅是視口。 > <h3 id="gt-我可以使用Puppeteer在無服務器函數中自動化表單-您可以使用-page-type-函數填寫輸入字段-而-page-click-功能單擊按鈕或鏈接-提交表單後-您可以使用Puppeteer導航結果頁面並提取所需的數據">>我可以使用Puppeteer在無服務器函數中自動化表單？您可以使用“ page.type（）”函數填寫輸入字段，而“ page.click（）”功能單擊按鈕或鏈接。提交表單後，您可以使用Puppeteer導航結果頁面並提取所需的數據。 </h3> 我如何在無服務器函數中使用Puppeteer刮擦動態網站？ <ante></ante> <h3></h3> Puppeteer非常適合刮擦無服務器功能中的動態網站，因為它可以呈現JavaScript生成的內容。您可以使用“ page.evaluate（）”函數在頁面上下文中運行JavaScript代碼，並提取所需的數據。 如何在無服務器函數中使用Puppeteer處理導航和頁面重定向？我可以使用Puppeteer在無服務器功能中測試我的Web應用程序嗎？ >>如何在無服務器功能中使用Puppeteer處理cookie和sessions？可以使用“ page.cookies（）”和“ page.setCookie（）”函數進行無服務器功能中的Puppeteer會話。您可以使用這些功能分別獲取和設置cookie。這對於維護會話或使用不同的cookie測試應用程序的行為很有用。 <h3 id="gt">></h3></ance></ancy> </h2></antlify></ancy></ancy></antlify>

以上是使用Puppeteer和無服務器功能構建鏈接預覽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr