В этом руководстве мы увидим, как мы можем развернуть бессерверные функции вместе с нашим интерфейсным приложением и создать API, который генерирует изображения и получает метаданные из ссылок.
Благодаря бессерверным функциям разработчики могут создавать и внедрять современные функции и функции в свои приложения, не заморачиваясь настройкой внутренних серверов и управлением ими. Функции размещаются и развертываются компаниями, занимающимися облачными вычислениями.
Функции Netlify упрощают создание и развертывание бессерверных функций для приложений, размещенных на Netlify.
Предпосылки
Чтобы следовать этому руководству, вам необходимо быть знакомым с JavaScript, Vue.js, Git, GitHub и Netlify. У вас также должен быть текстовый редактор — например, VS Code) с установленным Vetur (для IntelliSense) — и последняя версия Node, установленная на вашем компьютере. Установить Node можно здесь. Вы можете проверить свою версию Node, выполнив команду node -vв своем терминале.
У вас также должна быть учетная запись на Netlify. Вы можете создать его, если еще этого не сделали.
Что мы строим
Чтобы показать, как мы можем легко настроить бессерверные функции с нашим интерфейсным приложением, мы создадим приложение с настраиваемым компонентом предварительного просмотра ссылок.
Этот компонент отправляет запрос с
Функция отправляет метаданные и снимки экрана обратно в компонент на нашем внешнем интерфейсе, чтобы отобразить их в качестве предварительного просмотра ссылки в приложении.
Вот ссылка на пример проекта, развернутого на Netlify. А вот репозиторий GitHub, за которым стоит следить.
Создайте и настройте приложение Vue
Мы собираемся создать приложение Vue 3, используя Vue CLI. Мы также установим и настроим Tailwind CSS, ориентированную на утилиты
Установите и настройте Vue.
Чтобы быстро создать шаблон приложения Vue, мы будем использовать Vue CLI. Чтобы установить Vue CLI, запустите:
npm install -g @vue/cli
После установки CLI мы можем создать проект, запустив:
vue create
Это предложит нам выбрать предустановку для нашей установки. Мы выберем «Выбрать функции вручную», чтобы мы могли выбрать нужные функции. Вот варианты, которые я выбрал:
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
Установите и настройте Tailwind CSS
Чтобы установить Tailwind, мы будем использовать сборку, совместимую с PostCSS 7, поскольку Tailwind зависит от PostCSS 8, который на момент написания еще не поддерживается Vue 3. Удалите все предыдущие установки Tailwind и переустановите сборку совместимости:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm: @tailwindcss/
Создайте файлы конфигурации 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
}
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: запустите сервер после успешного создания приложения
Теперь, когда приложение запущено, если мы перейдем по предоставленному
Вывод приложения Vue после добавления Tailwind CSS
Установите расширение Tailwind CSS IntelliSense
Чтобы упростить процесс разработки, установите расширение Tailwind CSS Intellisense для VS Code.
Установите расширение Tailwind CSS Intellisense для VS Code
Базовая структура приложения
Вот краткий обзор того, как должна выглядеть папка нашего проекта:
├─ 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
}
С 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 глобально, поэтому мы можем запускать netlifyкоманды из любого каталога. Чтобы получить версию, использование и т. д., мы можем запустить:
netlify
Запустите приложение с Netlify Dev
Чтобы запустить наш проект локально с Netlify CLI, остановите сервер разработки (если он активен), затем запустите:
netlify dev
И вот что мы должны увидеть:
Запустите Netlify dev с Netlify CLI
Если вы внимательно посмотрите, то увидите, что там происходит несколько вещей:
Netlify пытается внедрить переменные среды из наших.envфайлов в процесс сборки, к которым затем могут получить доступ наши функции Netlify. В этом случае у нас нет.envфайла, поэтому он загружает значения по умолчанию, определенные в process.
Наконец, он автоматически определяет, на какой платформе построено приложение, и запускает необходимые процессы сборки для развертывания приложения. В этом случае вы можете увидеть «Запуск Netlify Dev с Vue.js». Он также поддерживает React и другие популярные фреймворки.
Затем Netlify запускает наш сервер разработки на http: //localhost:8888.
Netlify dev Cli запущен
Теперь, когда наш сервер запущен и наши функции загружены, мы можем вызвать/вызвать его. По умолчанию мы можем получить доступ к нашим функциям, используя этот маршрут: /.netlify/functions/
Важно отметить, что нам не нужно указывать порт, на котором работает наш сервер функций. Мы можем использовать указанный выше маршрут по умолчанию для связи с нашим сервером функций. Netlify автоматически разрешает
если мы отправим GETзапрос на http: //localhost:8888/.netlify/functions/hello, мы должны получить ответ {«message»:"Hello, World!"}.
hello.js Ответ функции от браузера
Здорово! Наша первая бессерверная функция работает!
Создайте API функции предварительного просмотра
Теперь, когда наша функция Netlify работает, мы можем приступить к созданию предварительного API. Вот краткое изложение того, что будет делать наш API функций:
он получает целевой
он передает данные в Puppeteer
Затем Puppeteer запускает новый экземпляр безголового браузера.
Puppeteer открывает новую страницу в браузере и переходит к целевому
Затем 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как зависимость разработки * для локального развертывания:
npm i puppeteer —
Чтобы Puppeteer работал как локально, так и в продакшене, мы должны установить
Вы можете проверить разницу между puppeteerи
Поскольку
npm i
Теперь, когда мы установили наши пакеты, давайте создадим нашу функцию.
Используйте уже установленный браузер для 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/
//. /functions/
const chromium = require ('
const puppeteer = require ('
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
await page.emulateMediaFeatures ([
{name: '
])
// navigate to target URL and get page details and screenshot
try{
...
}
}
В приведенном выше коде мы делаем несколько вещей.
Далее запускаем браузер с помощью
Мы назначаем, executablePathчтобы process.env.EXCECUTABLE_PATH || await chromium.executablePathпозволить пакету найти доступный безголовый браузер для запуска.
После запуска браузера мы открываем новую страницу в браузере с помощью browser.newPage () метода. Мы также устанавливаем желаемую область просмотра браузера для страницы с помощью page.setViewport () метода.
Обратите внимание, что мы используем awaitключевое слово при запуске любой функции. Это связано с тем, что Puppeteer работает асинхронно, и выполнение некоторых функций может занять некоторое время.
Мы также можем делать такие вещи, как определение мультимедийных функций страницы с помощью Puppeteer, используя page.emulateMediaFeatures () метод, который принимает массив объектов мультимедийных функций. Вот как мы устанавливаем
Получить метаданные сайта и снимок экрана
Затем мы перейдем к целевому
//. /functions/
...
// 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блок для переноса нашего кода, чтобы, если
Если 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. Если на
Функция тестирования и развертывания
Проверим нашу функцию с помощью тестера API. Вы можете установить Postman или Talend API тестер в свой браузер или использовать расширение Thunder Client, тестер API для VS Code.
Вы также можете использовать cURL:
curl -X POST -H «
Запустите функцию с помощью netlify devкоманды.
Сервер функций Netlify CLI после запуска Netlify Dev
Мы можем отправить запрос, используя порт для сервера функций или:8888порт по умолчанию для сервера разработки Netlify, чтобы отправить запрос к нашим функциям. Я буду использовать http: //localhost:8888/.netlify/functions/
{
«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
}
}
Теперь, когда наша бессерверная функция работает, давайте посмотрим, как мы можем использовать ее в нашем внешнем интерфейсе.
Создание функциональности предварительного просмотра ссылок на клиенте
Чтобы взаимодействовать с нашей
Мы создадим LinkPreviewкомпоненты, которые будут отображать обычные ссылки. Этим компонентам будут переданы их целевые
Создание компонента предварительного просмотра ссылок
В нашем
В приведенном выше коде мы получаем 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.
Сделайте это, чтобы отобразить данные предварительного просмотра в нашем шаблоне:
<a class="link underline text-blue-600" : href="targetURL" : target="previewData ? previewData.title : '_blank'"> {{targetURL}} <img : src="`data:image/jpeg;base64,${previewData.screenshot}`" : alt="previewData.description" /> {{previewData.description}} {{previewData.title}}
В приведенном выше коде, чтобы отобразить наше изображение, которое по сути является base64строкой, мы должны передать строку вместе с такими данными, как тип изображения и кодировка, в src-««атрибут.
Вот и все для нашего LinkPreviewer.vueкомпонента. Давайте посмотрим на это в действии. В. /src/views/Home.vue:
Welcome to the link previewer app! Here are some links that you can preview by hovering on them <
В нашем 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, создать новый репозиторий и скопировать
Быстрая настройка GitHub после создания нового репо для получения
Затем мы запускаем следующую команду в папке нашего проекта:
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
Примечание. Возможно, вы не сможете отправить репозиторий со своего терминала
После того, как мы отправили проект на GitHub, перейдите в Netlify, чтобы создать новый сайт из GitHub.
Следуйте инструкциям, чтобы выбрать репозиторий и ввести параметры сборки для вашего проекта. Для нашего проекта Vue команда сборки — npm run build, а каталог развертывания — dist.
Варианты Netlify для развертывания на сайте
После этого нажмите «Развернуть сайт «.
Netlify развернет сайт, и мы сможем просмотреть наш сайт, щелкнув предоставленную ссылку для развертывания. Мы можем увидеть наши функции, перейдя в «Функции «в верхнем меню.
Обзор функций Netlify Dashboard
Вы можете выбрать функцию для просмотра дополнительных сведений и журналов.
Детали и журналы функций Netlify
Милая!
Вот ссылка на демонстрацию, развернутую на Netlify: https://lnkpreviewr.netlify.app
Заключение
Мы смогли создать и развернуть бессерверные функции с помощью Netlify, используя функции Netlify. Мы также увидели, как мы можем взаимодействовать с функциями нашего внешнего интерфейса Vue. На этот раз мы использовали его для создания скриншотов и получения данных с других сайтов и создали с его помощью компонент предварительного просмотра ссылок, но мы можем сделать гораздо больше. С бессерверными функциями мы можем делать больше на внешнем интерфейсе, не беспокоясь о настройке внутреннего сервера.