使用 Puppeteer 無伺服器功能建構連結浏覽器的方法你會嗎

在本教程中，我們将了解如何在前端應用程式旁邊部署伺服器的功能，并建立一個 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
           

Netlify 函數簡介

Netlify Functions是一款 Netlify 産品，可簡化建立和部署無伺服器函數的過程。根據該産品的首頁，它用于：

部署用作 API 端點、自動運作以響應事件或在背景處理更複雜作業的伺服器端代碼。

一個基本的 Netlify 函數檔案使用以下文法導出一個處理程式方法：

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 狀态碼和消息“Hello, World!”。

現在我們已經了解了 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
           

這是我們應該看到的事情：

如果你仔細觀察，你會發現那裡發生了一些事情：

• Netlify 嘗試将我們.env檔案中的環境變量注入到建構過程中，然後我們的 Netlify 函數可以通路這些變量。在這種情況下，我們沒有.env檔案，是以它會加載process.
• 其次，它加載或部署位于函數目錄中的函數。Functions 伺服器部署在一個不同的随機端口上 - 36647.
• 最後，它會自動檢測應用程式是用什麼架構建構的，并運作必要的建構過程來部署應用程式。在這種情況下，您可以看到“使用 Vue.js 啟動 Netlify Dev”。它還支援 React 和其他流行的架構。

Netlify 然後在http://localhost:8888.

現在我們的伺服器已經啟動并且我們的函數已經加載，我們可以調用它。預設情況下，我們可以使用以下路由通路我們的函數：/.netlify/functions/<function name>.

需要注意的一件重要事情是，我們不需要指定 Functions 伺服器運作的端口。我們可以使用上面的預設路由與我們的 Functions 伺服器進行通信。Netlify 在背景自動解析 URL 和端口。

如果我們向http://localhost:8888/.netlify/functions/helloGET發送請求，我們應該得到.{"message":"Hello, World!"}

偉大的！我們的第一個無伺服器功能有效！

建立預覽函數 API

現在我們的 Netlify 函數可以工作了，我們可以開始建構預覽 API。以下是我們的 Functions API 将要執行的操作的簡要說明：

• 它接收将從前端發送的目标 URL
• 它将資料傳遞給 Puppeteer
• Puppeteer 然後啟動一個新的無頭浏覽器執行個體
• Puppeteer 在浏覽器中打開一個新頁面并導航到目标 URL
• 然後 Puppeteer 提取<title>和<meta>标簽的内容，用于目标頁面的描述
• 它捕獲頁面的螢幕截圖
• 它将螢幕截圖資料發送回前端

現在我們對 Functions API 将要做什麼有了基本的了解，我們可以開始建立 Functions。讓我們從為 Netlify Functions 安裝和設定 Puppeteer 開始。

安裝和配置 Puppeteer

Puppeteer是一個 Node 庫，它提供了一個進階 API 來控制無頭 Chrome 或 Chromium 浏覽器。它也可以配置為使用完整的（非無頭）鉻或鉻。您可以使用 Puppeteer 在浏覽器中手動完成大部分操作。更多關于 Puppeteer的資訊可以在 Puppeteer 文檔中找到。

為了開始使用 Puppeteer，我們将把它安裝到我們的項目中。

本地開發和生産的傀儡師

Puppeteer 下載下傳了最新版本的 Chromium（約 170MB macOS、約 282MB Linux、約 280MB Windows），該版本保證可與 API 一起使用。

我們不能使用完整的puppeteer包進行生産。這是因為 Netlify Functions 的最大大小為 50MB，而 Chromium 包太大。

感謝Ire Aderinokun的這篇非常有用的文章，我們仍然可以在本地和生産環境中使用 Puppeteer。這是我們必須做的：

puppeteer作為本地部署的開發依賴項安裝：

npm i puppeteer --save-dev
           

為了讓 Puppeteer 在本地和生産環境中工作，我們必須安裝puppeteer-core和chrome-aws-lambda作為生産依賴項。

您可以在此處puppeteer檢視和之間的差別。但是，主要差別在于安裝時不會自動下載下傳 Chromium。puppeteer-core puppeteer-core

由于puppeteer-core不下載下傳浏覽器，我們将安裝chrome-aws-lambda，一個“用于 AWS Lambda 和 Google Cloud Functions 的 Chromium 二進制檔案”，我們可以在 Netlify 函數中使用它。這些是可以在生産中使用的包：

npm i puppeteer-core chrome-aws-lambda --save-prod
           

現在我們已經安裝了我們的包，讓我們建立我們的函數。

為 Puppeteer 使用已安裝的浏覽器

如果 Puppeteer 在本地安裝完整的浏覽器會成為問題，那可能是由于網絡速度慢或帶寬問題。有一種解決方法，即使用我們已經安裝的 Chrome 或 Chromium 浏覽器來運作 Puppeteer。

我們需要的是本地機器上浏覽器的路徑。我們将把它用作我們的executablePath，我們将把它傳遞給puppeteer.launch()方法。這告訴 Puppeteer 在哪裡可以找到浏覽器可執行檔案。

如果您不知道在哪裡可以找到可執行路徑，請打開浏覽器并轉到chrome://version/以顯示 chrome 的版本。

.env複制路徑并在項目的根目錄中建立一個檔案。

# ./.env
EXCECUTABLE_PATH=<path to chrome>
           

要擷取.env檔案的内容，我們将安裝另一個包—— dotenv：

npm install dotenv
           

現在我們已經成功安裝了包，讓我們建立 Netlify 函數。

建立生成預覽功能

建立一個新檔案，./functions/generate-preview.js：

// ./functions/generate-preview.js

const chromium = require('chrome-aws-lambda')
const puppeteer = require('puppeteer-core')

exports.handler = async function (event, context) {
  // parse body of POST request to valid object and
  // use object destructuring to obtain target url
  const { targetURL } = JSON.parse(event.body)

  // launch browser
  const browser = await puppeteer.launch({
    args: chromium.args,
    // get path to browser
    executablePath: process.env.EXCECUTABLE_PATH || await chromium.executablePath,
    headless: true
  })

  // open new page in browser
  const page = await browser.newPage()

  // set the viewport of the page
  await page.setViewport({
    width: 768,
    height: 425,
    deviceScaleFactor: 1
  })

  // set the prefers-color-scheme to dark
  await page.emulateMediaFeatures([
    {name: 'prefers-color-scheme', value:'dark'}
  ])

  // navigate to target URL and get page details and screenshot
  try{
    ...
  }
}
           

在上面的代碼中，我們做了很多事情。首先，我們targetURL從 中的請求有效負載中擷取event.body。這将與POST請求一起發送。

接下來，我們使用該chrome-aws-lambda包啟動浏覽器。我們使用puppeteer.launch()方法來做到這一點。此方法接受一個對象作為具有一些可選屬性的參數。我們傳遞給此方法的一個重要屬性是executablePath.

我們将 配置設定executablePath給process.env.EXCECUTABLE_PATH || await chromium.executablePath使包能夠找到可用的無頭浏覽器以啟動。

browser.newPage()浏覽器啟動後，我們使用該方法在浏覽器中打開一個新頁面。page.setViewport()我們還使用該方法為頁面設定所需的浏覽器視口。

請注意，我們await在運作任何函數時都使用了關鍵字。這是因為 Puppeteer 是異步工作的，有些函數可能需要一些時間才能執行。

我們還可以使用 Puppeteerpage.emulateMediaFeatures()方法定義頁面的媒體特征，該方法采用媒體特征對象數組。這就是我們設定prefers-color-schemeto的方式dark。

擷取站點中繼資料和螢幕截圖

接下來，我們将導航到目标 URL 并擷取我們的标題、描述和螢幕截圖：

// ./functions/generate-preview.js

...
// navigate to target URL and get page details and screenshot
try {
  // navigate to the targetURL
  await page.goto(targetURL)

  // get the title from the newly loaded page
  const title = (await page.$eval(`head > title`, el => el.textContent) || null)

  // get the descriptions of the page using their CSS selectors
  const descriptions = await page.evaluate(() => {
    let descriptions = {}

    let desc = document.querySelector(`meta[name='description']`)
    let og = document.querySelector(`meta[property='og:description']`)
    let twitter = document.querySelector(`meta[property='twitter:description']`)

    desc ? descriptions.desc = desc.content : descriptions.desc = null
    og ? descriptions.og = og.content: descriptions.og = null
    twitter ? descriptions.twitter = twitter.content : descriptions.twitter = null

    return descriptions
  })

  // screenshot the page as a jpeg with a base64 encoding
  const screenshot = await page.screenshot({
    type: 'jpeg',
    encoding: 'base64'
  })

  // close the browser
  await browser.close()

  // send the page details 
  return {
    statusCode: 200,
    body: JSON.stringify({
      title,
      screenshot,
      descriptions
    })
  }

} catch (error) {

  // if any error occurs, close the browser instance 
  // and send an error code
  await browser.close()
  return {
    statusCode: 400,
    body: JSON.stringify({
      error
    })
  }
}
           

在上面的代碼中，我們使用一個trycatch塊來包裝我們的代碼，這樣，如果出現任何問題，從await page.goto(targetURL)導航到目标 URL 的 開始，我們可以捕獲錯誤并将其發送到我們的前端。提供無效 URL 可能會發生錯誤。

如果 URL 有效，我們使用 方法擷取标題page.$eval()，這類似于document.querySelectorJavaScript 中的常用方法。我們傳入head > title标題标簽的 CSS 選擇器——作為第一個參數。我們還傳遞了一個函數el => el.textContent作為第二個參數，其中el是我們傳遞給函數的參數并且是title元素。我們現在可以使用title.textContent.

請注意，所有這些都包含在括号 ( ()) 中，并且我們有一個|| nullafter page.$eval。title如果page.$eval()無法擷取頁面标題，則将其配置設定為 null。

要擷取頁面的描述，我們将使用該page.evaluate()方法，它允許我們運作一些用戶端 JavaScript 并向配置設定的變量傳回一個值 - descriptions。

我們将一個函數作為參數傳遞給該page.evaluate()方法。在我們document.querySelector用來擷取各種元描述的函數中，例如<meta name="description" content="<site description>" />預設描述和<meta property="og:description" content="<site description>" />OpenGraph 描述。

擷取元素後，如果元素存在，或者元素不存在，我們使用三元運算符擷取content并将其添加到對象中。descriptionsnull

獲得描述後，我們使用page.screenshot()方法截取頁面并使用 關閉浏覽器browser.close()。

最後，我們将body屬性中的頁面詳細資訊發送到一個 JSON 對象，其中statusCode包含200. 如果在前面的任何步驟中發生錯誤，它會被捕獲在catch塊中，我們會發送 a statusCodeof400和錯誤消息。

測試和部署功能

讓我們使用 API 測試器測試我們的功能。您可以在浏覽器中安裝Postman或Talend API 測試器，或使用Thunder Client 擴充，這是 VS Code 的 API 測試器。

您還可以使用 cURL：

curl -X POST -H "Content-Type: application/json" -d '{"paramName": "value"}' <URL>
           

netlify dev使用指令運作函數。

我們可以使用函數伺服器的端口或:8888Netlify 開發伺服器的預設端口發送請求，以向我們的函數發送請求。我将使用包含以下對象的對象http://localhost:8888/.netlify/functions/generate-preview發送POST請求：targetURLbody

{
  "targetURL" : "https://miracleio.me"
}
           

當我們發送請求時，這是我們得到的響應。

我們得到一個包含預覽資料的 JSON 對象：

{
  "title": "Miracleio | PortfolioX",
  "screenshot": "/9j/4AAQSkZJRgABAQAAAQABAAD...",
  "descriptions": {
    "desc": "Designer & Frontend Developer portfolio site. Built by Miracleio with love ❤",
    "og": "Designer & Frontend Developer portfolio site. Built by Miracleio with love ❤",
    "twitter": null
  }
}
           

現在我們的無伺服器功能可以工作了，讓我們看看如何在前端使用它。

在用戶端建構連結預覽功能

為了與我們的generate-preview函數互動，我們需要發送POST包含我們的targetURL.

我們将建立LinkPreview顯示正常連結的元件。這些元件将作為道具傳遞其目标 URL。在元件安裝到應用程式之前，它會向我們的無伺服器函數發送一個POST請求，擷取預覽資料，并在我們将滑鼠懸停在連結上時顯示它。targetURL

建立連結預覽元件

首先，讓我們建立我們的連結預覽元件src/components/LinkPreviewer.vue。

在我們的<script>中，我們将通過向我們的無伺服器函數發送請求來擷取連結預覽資料，并将資料儲存在previewData對象中。稍後我們将在模闆中使用它來顯示資料：

// ./src/components/LinkPreviewer.vue
...

<script>
import { computed, onBeforeMount, ref } from '@vue/runtime-core'
  export default {
    // define targetURL as a prop
    props: ['targetURL'],
    setup(props) {
      // create a reactive previewData object using ref
      const previewData = ref({})

      // function to send a POST request containing the targetURL 
      // to the serverless function
      const generatePreview = async () => {
        try {
          const res = await fetch('/.netlify/functions/generate-preview', {
            method: 'POST',
            body: JSON.stringify({
              targetURL : props.targetURL
            })
          })

          const data = await res.json()
          return data
        } catch (err) {
          console.log(err)
          return null
        }
      }

      // run function before component is mounted
      onBeforeMount(async ()=>{
        // run generatePreview() to get the preview data and assign to previewData
        previewData.value = await generatePreview()

        // use object destructuring to get the different descriptions 
        // from the preview data
        const {desc, og, twitter} = previewData.value.descriptions

        // assign only one valid value to the description property 
        // in the previewData object
        previewData.value.description = computed(()=>(desc || og || twitter || ""))
      })

      // make the following entities available to the component
      return { generatePreview, previewData}
    }
  }
</script>
           

在上面的代碼中，我們将targetURL作為 props 傳遞給我們的元件。

在 中setup()，我們作為參數傳遞props，以便我們通路像targetURL.

然後，我們使用:建立一個響應式peviewData對象。在一個新函數中，我們用來向我們的無伺服器函數發送一個包含 的請求。此函數傳回響應或如果發生錯誤。refconst previewData = ref({})generatePreview()fetchPOSTtargetURLnull

接下來，要在挂載元件之前運作該函數，我們使用onBeforeMount()鈎子。我們傳遞一個async函數作為參數。在函數内，我們配置設定previewData.value給generatePreview()函數。desc, og, twitter然後從descriptions屬性中擷取描述 ( )。

為了獲得将在預覽中顯示的描述，我們将配置設定previewData.value.description給(desc || og || twitter || ""). 這樣，第一個具有值的屬性被配置設定給description.

這樣做以在我們的模闆中顯示預覽資料：

<!-- ./src/components/LinkPreviewer.vue -->

<template>
  <div class="inline relative">
    <!-- display targetURL link -->
    <a class="link underline text-blue-600" 
       :href="targetURL" 
       :target="previewData ? previewData.title : '_blank'">
       {{targetURL}} 
    </a>

    <!-- display preview data if object exists -->
    <div v-if="previewData" class="result-preview absolute top-8 left-0 w-72 transform translate-y-4 opacity-0 invisible transition bg-white overflow-hidden rounded-md shadow-lg z-10">

      <!-- display image using the base64 screenshot data -->
      <img v-if="previewData.screenshot"
           :src="`data:image/jpeg;base64,${previewData.screenshot}`"
           :alt="previewData.description" />

      <!-- display title and description -->
      <div class="details p-4 text-left">
        <h1 class=" font-extrabold text-xl"> {{previewData.title}} </h1>
        <p> {{previewData.description}} </p>
      </div>
    </div>
  </div>
</template>

<script> ... </script>

<style scoped>
  .link:hover ~ .result-preview{
    @apply visible opacity-100 translate-y-0;
  }
</style>
           

在上面的代碼中，為了顯示我們的圖像（本質上是一個base64字元串），我們必須将字元串與圖像類型和編碼等資料一起傳遞到src-""屬性中。

這就是我們的LinkPreviewer.vue元件。讓我們看看它的實際效果。在./src/views/Home.vue：

<!-- ./src/views/Home.vue -->

<template>
  <main class="home">
    <header>
      <h1>Welcome to the link previewer app!</h1>
      <p>Here are some links that you can preview by hovering on them</p>
    </header>
    <ul class=" mb-4">
      <!-- render LinkPreviewer component for each demolink -->
      <li v-for="link in demoLinks" :key="link">
        <link-previewer :targetURL="link" />
      </li>
    </ul>
    <!-- input field to add new links -->
    <input class=" p-2 ring ring-blue-600 rounded-lg shadow-md" type="url" @keyup.enter="addLink" required placeholder="enter valid url">
  </main>
</template>

<script>
import { ref } from '@vue/reactivity'
import LinkPreviewer from '../components/LinkPreviewer.vue'

export default{
  components: { LinkPreviewer },
  setup(){
    // demo links
    const demoLinks = ref([
      'http://localhost:5000',
      'https://google.com',
      'https://miracleio.me',
      'https://miguelpiedrafita.com/'
    ])

    // function to add new links to the demoLinks array
    const addLink = ({target}) => {
      demoLinks.value.push(target.value)
      target.value = ""
    }

    return {demoLinks, addLink}
  }
}
</script>
           

在我們的Home.vue檔案中，我們基本上使用demoLinks連結數組來呈現LinkPreviewer元件清單，我們将其傳遞給targetURL元件的 props。

我們還有一個<input>元素，我們用它來動态地将更多LinkPreviewer元件添加到清單中。

這是我們的簡單應用程式現在的樣子。

甜的！我們的應用程式有效。由于我們一直使用 Netlify CLI 在本地運作，讓我們看看如何使用 CLI 部署到 Netlify。

将應用程式部署到 Netlify

在我們将我們的應用程式部署到 Netlify 之前，我們必須為生産建構我們的應用程式：

npm run build
           

這将建構我們的應用程式并建立一個dist/我們可以部署到生産環境的檔案夾。

接下來，我們需要登入到我們的 Netlify 帳戶：

netlify deploy
           

這将使您在浏覽器中登入您的 Netlify 帳戶。

授權應用程式後，我們可以将我們的項目連結到一個新站點。Netlify 會問我們一堆問題：

• 你想幹什麼？選擇“建立和配置新站點”。
• 團隊？選擇<your team>。
• 選擇一個獨特的網站名稱？選擇<site name>。
• 請提供釋出目錄（例如“public”或“dist”或“.”）。輸入dist。

在此之後，Netlify 将上傳我們的檔案并将它們部署到我們的新站點。

使用 GitHub 部署

或者，我們可以決定從 GitHub 部署我們的網站。您所要做的就是登入 GitHub，建立一個新存儲庫，并将 URL 複制到我們新建立的存儲庫。

然後我們在項目檔案夾中運作以下指令：

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/miracleonyenma/link-previewer.git
git push -u origin main
           

注意：由于身份驗證問題，您可能無法從終端推送到您的存儲庫，并且您可能會從 Git 收到如下消息：“對密碼身份驗證的支援已于 2021 年 8 月 13 日删除。請使用個人通路令牌反而。” 這意味着您必須建立一個個人通路令牌 (PAT) 并使用它來登入。為此，請轉到GitHub 令牌設定并生成一個新令牌。選擇所需的所有權限。確定您能夠通路存儲庫。生成 PAT 後，将其複制并儲存在某處。然後git push -u origin main再次嘗試該指令并在要求您輸入密碼時粘貼您的 PAT。

将項目推送到 GitHub 後，前往 Netlify從 GitHub 建立一個新站點。

按照步驟選擇存儲庫并輸入項目的建構設定。對于我們的 Vue 項目，建構指令是npm run build，部署目錄是dist.

之後，單擊Deploy site。

Netlify 将部署站點，我們可以通過單擊提供的部署連結來預覽我們的站點。我們可以通過從頂部菜單轉到功能來檢視我們的功能。

您可以選擇一項功能以檢視更多詳細資訊和日志。

結論

我們已經能夠使用 Netlify 函數通過 Netlify 建立和部署無伺服器函數。我們還看到了如何與 Vue 前端的函數進行互動。這一次，我們習慣了它截屏并從其他網站擷取資料，并用它建構了一個連結預覽器元件，但我們可以做的還有很多。借助無伺服器功能，我們可以在前端做更多事情，而無需費心設定後端伺服器。

如果本文對你有幫助，别忘記給我個3連 ，點贊，轉發，評論，，咱們下期見。

收藏 等于白嫖，點贊才是真情。

親愛的小夥伴們，有需要JAVA面試文檔資料請點贊＋轉發，關注我後，私信我333就可以領取免費資料哦