Создание сайтов в Зоринске. Создайте средство предварительного просмотра ссылок с функциями Puppeteer и Serverless

В этом руководстве мы увидим, как мы можем развернуть бессерверные функции вместе с нашим интерфейсным приложением и создать API, который генерирует изображения и получает метаданные из ссылок.

Благодаря бессерверным функциям разработчики могут создавать и внедрять современные функции и функции в свои приложения, не заморачиваясь настройкой внутренних серверов и управлением ими. Функции размещаются и развертываются компаниями, занимающимися облачными вычислениями.

Функции Netlify упрощают создание и развертывание бессерверных функций для приложений, размещенных на Netlify.

Предпосылки

Чтобы следовать этому руководству, вам необходимо быть знакомым с JavaScript, Vue.js, Git, GitHub и Netlify. У вас также должен быть текстовый редактор — например, VS Code) с установленным Vetur (для IntelliSense) — и последняя версия Node, установленная на вашем компьютере. Установить Node можно здесь. Вы можете проверить свою версию Node, выполнив команду node -vв своем терминале.

У вас также должна быть учетная запись на Netlify. Вы можете создать его, если еще этого не сделали.

Что мы строим

Чтобы показать, как мы можем легко настроить бессерверные функции с нашим интерфейсным приложением, мы создадим приложение с настраиваемым компонентом предварительного просмотра ссылок.

Этот компонент отправляет запрос с URL-адресом нашей бессерверной функции. Затем функция использует Puppeteer для получения метаданных с целевого сайта по URL-адресу и создания снимка экрана сайта.

Функция отправляет метаданные и снимки экрана обратно в компонент на нашем внешнем интерфейсе, чтобы отобразить их в качестве предварительного просмотра ссылки в приложении.

Вот ссылка на пример проекта, развернутого на Netlify. А вот репозиторий GitHub, за которым стоит следить.

Создайте и настройте приложение Vue

Мы собираемся создать приложение Vue 3, используя Vue CLI. Мы также установим и настроим 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 (нет) и продолжите установку.

Предустановки Linkpreviewer vue

Выполнить 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}'],

...

}

Включить Tailwind в файл CSS

Создайте. /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

Vue CLI: запустите сервер после успешного создания приложения

Теперь, когда приложение запущено, если мы перейдем по предоставленному URL-адресу, мы должны увидеть демонстрационное приложение по умолчанию для Vue и увидеть, что были применены базовые стили предварительной проверки Tailwind.

Вывод приложения Vue после добавления Tailwind CSS

Установите расширение Tailwind CSS IntelliSense

Чтобы упростить процесс разработки, установите расширение Tailwind CSS Intellisense для VS Code.

Установите расширение Tailwind CSS Intellisense для VS Code

Базовая структура приложения

Вот краткий обзор того, как должна выглядеть папка нашего проекта:

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

Чтобы запускать наши функции локально без развертывания в Netlify, нам нужно установить Netlify CLI. Интерфейс командной строки позволяет нам развертывать наши проекты с некоторыми замечательными функциями Netlify локально.

Чтобы установить CLI, убедитесь, что у вас Node.js версии 10 или новее, а затем запустите:

npm install netlify-cli -g

Это устанавливает Netlify CLI глобально, поэтому мы можем запускать netlifyкоманды из любого каталога. Чтобы получить версию, использование и т. д., мы можем запустить:

netlify

Запустите приложение с Netlify Dev

Чтобы запустить наш проект локально с Netlify CLI, остановите сервер разработки (если он активен), затем запустите:

netlify dev

И вот что мы должны увидеть:

Запустите Netlify dev с Netlify CLI

Если вы внимательно посмотрите, то увидите, что там происходит несколько вещей:

Netlify пытается внедрить переменные среды из наших.envфайлов в процесс сборки, к которым затем могут получить доступ наши функции Netlify. В этом случае у нас нет.envфайла, поэтому он загружает значения по умолчанию, определенные в process.

Во-вторых, он загружает или развертывает наши функции, расположенные в каталоге functions. Сервер функций развернут на другом случайно выбранном порту — 36647.

Наконец, он автоматически определяет, на какой платформе построено приложение, и запускает необходимые процессы сборки для развертывания приложения. В этом случае вы можете увидеть «Запуск Netlify Dev с Vue.js». Он также поддерживает React и другие популярные фреймворки.

Затем Netlify запускает наш сервер разработки на http: //localhost:8888.

Netlify dev Cli запущен

Теперь, когда наш сервер запущен и наши функции загружены, мы можем вызвать/вызвать его. По умолчанию мы можем получить доступ к нашим функциям, используя этот маршрут: /.netlify/functions/.

Важно отметить, что нам не нужно указывать порт, на котором работает наш сервер функций. Мы можем использовать указанный выше маршрут по умолчанию для связи с нашим сервером функций. Netlify автоматически разрешает URL-адрес и порт за кулисами.

если мы отправим GETзапрос на http: //localhost:8888/.netlify/functions/hello, мы должны получить ответ {«message»:"Hello, World!"}.

hello.js Ответ функции от браузера

Здорово! Наша первая бессерверная функция работает!

Создайте API функции предварительного просмотра

Теперь, когда наша функция Netlify работает, мы можем приступить к созданию предварительного API. Вот краткое изложение того, что будет делать наш API функций:

он получает целевой URL-адрес, который будет отправлен из внешнего интерфейса

он передает данные в Puppeteer

Затем Puppeteer запускает новый экземпляр безголового браузера.

Puppeteer открывает новую страницу в браузере и переходит к целевому URL-адресу.

Затем Puppeteer извлекает содержимое тегов

он делает скриншот страницы

он отправляет данные скриншота обратно в интерфейс

Теперь, когда у нас есть общее представление о том, что будет делать наш API функций, мы можем приступить к созданию функций. Начнем с установки и настройки Puppeteer для функций Netlify.

Установите и настройте Кукольник

Puppeteer — это библиотека Node, которая предоставляет высокоуровневый API для управления безголовыми браузерами Chrome или Chromium. Его также можно настроить для использования полного (не безголового) хрома или хрома. Вы можете делать большинство вещей, которые вы можете делать вручную в браузере, используя Puppeteer. Подробнее о Puppeteer можно узнать в документации Puppeteer.

Чтобы начать работу с Puppeteer, мы установим его в нашем проекте.

Кукловод для местного развития и производства

Puppeteer загружает последнюю версию Chromium (~170 МБ для macOS, ~282 МБ для Linux, ~280 МБ для Windows), которая гарантированно работает с API.

Мы не можем использовать полный puppeteerпакет для производства. Это связано с тем, что максимальный размер Netlify Functions составляет 50 МБ, а пакет Chromium слишком велик.

Благодаря этой очень полезной статье Ире Адеринокуна мы по-прежнему можем работать с Puppeteer как локально, так и в продакшне. Вот что нам нужно сделать:

Установить puppeteerкак зависимость разработки * для локального развертывания:

npm i puppeteer —save-dev

Чтобы Puppeteer работал как локально, так и в продакшене, мы должны установить puppeteer-core и chrome-aws-lambdaв качестве производственных зависимостей.

Вы можете проверить разницу между puppeteerи puppeteer-core здесь. Однако основное отличие заключается в том, что puppeteer-coreChromium не загружается автоматически при установке.

Поскольку puppeteer-coreбраузер не загружается, мы установим chrome-aws-lambda, «Chromium Binary для AWS Lambda и облачных функций Google», который мы можем использовать в наших функциях Netlify. Вот пакеты, которые будут работать в продакшене:

npm i puppeteer-corechrome-aws-lambda —save-prod

Теперь, когда мы установили наши пакеты, давайте создадим нашу функцию.

Используйте уже установленный браузер для Puppeteer

Если Puppeteer устанавливает полноценный браузер для локальной работы, это может быть связано с проблемами с медленной сетью или пропускной способностью. Есть обходной путь — использовать уже установленный браузер Chrome или Chromium для Puppeteer.

Нам нужен путь к браузеру на нашей локальной машине. Мы будем использовать это как наш executablePath, который мы передадим puppeteer.launch () методу. Это сообщает Puppeteer, где найти исполняемый файл браузера.

Если вы точно не знаете, где найти путь к исполняемому файлу, откройте браузер и перейдите на страницу chrome: //version/, чтобы отобразить версию chrome.

Путь к исполняемому файлу Chrome из браузера Chrome

Скопируйте путь и создайте.envфайл в корне проекта.

#. /.env

EXCECUTABLE_PATH=

Чтобы получить содержимое.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-lambdapackage. Делаем это с помощью puppeteer.launch () метода. Этот метод принимает объект в качестве аргумента с несколькими необязательными свойствами. Важным свойством, которое мы передаем этому методу, является executablePath.

Мы назначаем, executablePathчтобы process.env.EXCECUTABLE_PATH || await chromium.executablePathпозволить пакету найти доступный безголовый браузер для запуска.

После запуска браузера мы открываем новую страницу в браузере с помощью browser.newPage () метода. Мы также устанавливаем желаемую область просмотра браузера для страницы с помощью page.setViewport () метода.

Обратите внимание, что мы используем awaitключевое слово при запуске любой функции. Это связано с тем, что Puppeteer работает асинхронно, и выполнение некоторых функций может занять некоторое время.

Мы также можем делать такие вещи, как определение мультимедийных функций страницы с помощью Puppeteer, используя page.emulateMediaFeatures () метод, который принимает массив объектов мультимедийных функций. Вот как мы устанавливаем prefers-color-schemeзначение 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.querySelectorметоду в JavaScript. Мы передаем селектор CSS — head > title— тега title в качестве первого аргумента. Мы также передаем функцию el => el.textContentв качестве второго аргумента, где el— параметр, который мы передаем функции, и — titleэлемент. Теперь мы можем получить значение, используя title.textContent.

Обратите внимание, что все это заключено в круглые скобки ( ()), и у нас есть || nullпосле page. $eval. Это связано с тем, что titleприсваивается значение null, если page. $eval () не удается получить заголовок страницы.

Чтобы получить описания страницы, мы будем использовать page.evaluate () метод, который позволяет нам запустить некоторый клиентский JavaScript и вернуть значение назначенной переменной — descriptions.

Мы передаем функцию как и аргумент в page.evaluate () метод. Внутри функции мы используем document.querySelectorдля получения различных метаописаний, таких как

После получения элементов мы используем тернарные операторы, чтобы получить contentи добавить их к descriptionsобъекту, если элементы существуют или nullэлемент не существует.

Получив описания, мы делаем снимок экрана с помощью page.screenshot () метода и закрываем браузер с помощью browser.close ().

Наконец, мы отправляем сведения о странице в bodyсвойстве объекта JSON с statusCodeрасширением 200. Если на каком-либо из предыдущих шагов возникает ошибка, она фиксируется в catchблоке, и вместо этого мы отправляем сообщение statusCodeоб 400ошибке.

Функция тестирования и развертывания

Проверим нашу функцию с помощью тестера API. Вы можете установить Postman или Talend API тестер в свой браузер или использовать расширение Thunder Client, тестер API для VS Code.

Вы также можете использовать cURL:

curl -X POST -H «Content-Type: application/json» -d '{«paramName»: «value»}'

Запустите функцию с помощью netlify devкоманды.

Сервер функций Netlify CLI после запуска Netlify Dev

Мы можем отправить запрос, используя порт для сервера функций или:8888порт по умолчанию для сервера разработки Netlify, чтобы отправить запрос к нашим функциям. Я буду использовать http: //localhost:8888/.netlify/functions/generate-previewдля отправки POSTзапроса объект, содержащий targetURLв body:

{

«targetURL»: «https: //miracleio.me»

}

Когда мы отправляем запрос, вот ответ, который мы получаем.

Запрос и ответ Thunder Client API

Мы получаем объект 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.

В нашем

В приведенном выше коде мы получаем targetURLсвойство как свойство, которое будет передано в наш компонент.

В setup (), мы передаем propsв качестве аргумента, чтобы мы могли получить доступ к свойствам компонентов, таким как targetURL.

Затем мы создаем реактивный peviewDataобъект, используя ref: const previewData = ref ({}). В новой generatePreview () функции мы используем fetchдля отправки POSTзапроса, содержащего в targetURLнашу бессерверную функцию. Эта функция возвращает ответ или nullпри возникновении ошибки.

Далее, чтобы запустить функцию до того, как компонент будет смонтирован, мы используем onBeforeMount () хук. Мы передаем asyncфункцию в качестве аргумента. Внутри функции мы присваиваем previewData.valueфункции generatePreview (). Описания (desc, og, twitter) затем получаются из descriptionsсвойства.

Чтобы получить описание, которое будет отображаться в предварительном просмотре, мы previewData.value.descriptionназначим (desc || og || twitter || «»). Таким образом, первое свойство со значением присваивается description.

Сделайте это, чтобы отобразить данные предварительного просмотра в нашем шаблоне:

В приведенном выше коде, чтобы отобразить наше изображение, которое по сути является base64строкой, мы должны передать строку вместе с такими данными, как тип изображения и кодировка, в src-««атрибут.

Вот и все для нашего LinkPreviewer.vueкомпонента. Давайте посмотрим на это в действии. В. /src/views/Home.vue:

В нашем Home.vueфайле мы в основном используем demoLinksмассив ссылок для отображения списка LinkPreviewerкомпонентов, который мы передаем targetURLреквизитам компонента.

У нас также есть элемент, который мы используем для динамического добавления дополнительных LinkPreviewerкомпонентов в список.

Вот как теперь выглядит наше простое приложение.

Вывод предварительного просмотра ссылок при наведении курсора мыши

Милая! Наше приложение работает. Поскольку мы работали локально с помощью Netlify CLI, давайте посмотрим, как мы можем выполнить развертывание в Netlify с помощью CLI.

Развертывание приложения в Netlify

Прежде чем мы развернем наше приложение в Netlify, мы должны создать наше приложение для производства:

npm run build

Это создаст наше приложение и создаст dist/папку, которую мы можем развернуть в рабочей среде.

Далее нам нужно войти в нашу учетную запись Netlify:

netlify deploy

Это войдет в вашу учетную запись Netlify в вашем браузере.

Успешный вход в Netlify CLI

После авторизации приложения мы можем связать наш проект с новым сайтом. Netlify задаст нам кучу вопросов:

Чем бы Вы хотели заняться? Выберите «Создать и настроить новый сайт».

Команда? Выберите .

Выбрать уникальное имя сайта? Выберите .

Укажите каталог публикации (например, «public», «dist» или «.»). Введите dist.

После этого Netlify загрузит наши файлы и развернет их на нашем новом сайте.

Развернуть с помощью GitHub

В качестве альтернативы мы можем решить развернуть наш сайт с GitHub. Все, что вам нужно сделать, это войти в GitHub, создать новый репозиторий и скопировать URL-адрес в наш только что созданный репозиторий.

Быстрая настройка 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, подобное этому: «Поддержка аутентификации по паролю была удалена 13 августа 2021 года. Пожалуйста, используйте токен личного доступа. вместо.» Это означает, что вам нужно создать токен личного доступа (PAT) и использовать его для входа в систему. Для этого перейдите в настройки токена GitHub и создайте новый токен. Выберите все разрешения, которые вы хотите. Убедитесь, что у вас есть доступ к репозиториям. После создания PAT скопируйте его и сохраните где-нибудь. Затем git push -u origin mainповторите команду и вставьте свой PAT, когда вас попросят ввести пароль.

После того, как мы отправили проект на GitHub, перейдите в Netlify, чтобы создать новый сайт из GitHub.

Следуйте инструкциям, чтобы выбрать репозиторий и ввести параметры сборки для вашего проекта. Для нашего проекта Vue команда сборки — npm run build, а каталог развертывания — dist.

Варианты Netlify для развертывания на сайте

После этого нажмите «Развернуть сайт «.

Netlify развернет сайт, и мы сможем просмотреть наш сайт, щелкнув предоставленную ссылку для развертывания. Мы можем увидеть наши функции, перейдя в «Функции «в верхнем меню.

Обзор функций Netlify Dashboard

Вы можете выбрать функцию для просмотра дополнительных сведений и журналов.

Детали и журналы функций Netlify

Милая!

Вот ссылка на демонстрацию, развернутую на Netlify: https://lnkpreviewr.netlify.app

Заключение

Мы смогли создать и развернуть бессерверные функции с помощью Netlify, используя функции Netlify. Мы также увидели, как мы можем взаимодействовать с функциями нашего внешнего интерфейса Vue. На этот раз мы использовали его для создания скриншотов и получения данных с других сайтов и создали с его помощью компонент предварительного просмотра ссылок, но мы можем сделать гораздо больше. С бессерверными функциями мы можем делать больше на внешнем интерфейсе, не беспокоясь о настройке внутреннего сервера.