Créez un aperçu du lien avec des fonctions de marionnet et sans serveur

Dans ce tutoriel, nous allons voir comment nous pouvons déployer des fonctions sans serveur aux côtés de notre application frontale et créer une API qui génère des images et saisit des métadonnées à partir de liens.

Avec des fonctions sans serveur, les développeurs peuvent créer et implémenter des fonctionnalités et des fonctionnalités modernes dans leurs applications sans passer par la douleur de la mise en place et de la gestion des serveurs arrière. Les fonctions sont hébergées et déployées par les sociétés de cloud computing.

Les fonctions Netlify facilitent la création et le déploiement de fonctions sans serveur pour les applications hébergées sur netlify.

Les plats clés

• Utilisez des fonctions de marionnet-puppet et de netlify pour créer un aperçu de lien sans serveur qui récupère les métadonnées et les captures d'écran à partir d'URL.
• Commencez par configurer une application Vue 3 avec CSS à vent arrière pour le style, assurer une conception moderne et réactive.
• Implémentez les fonctions Netlify pour gérer les processus backend comme la création d'API sans gérer les serveurs, améliorer l'évolutivité et la facilité de déploiement.
• Utilisez des marionnets dans des fonctions Netlify pour automatiser les tâches du navigateur, telles que la capture de captures d'écran et l'extraction des métadonnées des pages Web.
• Déployez l'application sur NetLify, en tirant parti du déploiement continu à partir des référentiels GIT pour les mises à jour et la maintenance rationalisées.
• Améliorez l'expérience utilisateur en incorporant un composant VUE qui interagit avec la fonction sans serveur pour afficher les prévisualistes de liens dynamiquement sur le frontend.

Prérequis

Pour suivre ce tutoriel, vous devrez vous familiariser avec JavaScript, Vue.js, Git, Github et Netlify. Vous devriez également avoir un éditeur de texte - tel que le code vs) avec Vetur installé (pour IntelliSense) - et une version récente de nœud installée sur votre machine. Vous pouvez installer le nœud ici. Vous pouvez vérifier votre version de Node en exécutant le nœud de commande -Vin votre terminal.

Vous devriez également avoir un compte sur Netlify. Vous pouvez en créer un si vous ne l'avez pas déjà fait.

ce que nous construisons

Pour montrer comment nous pouvons facilement configurer des fonctions sans serveur avec notre application frontale, nous créerons une application avec un composant de prévisualisation de lien personnalisé.

Ce composant envoie une demande avec une URL à notre fonction sans serveur. La fonction utilise ensuite Puppeteer pour obtenir des métadonnées du site cible à l'aide de l'URL et pour générer une capture d'écran du site.

La fonction renvoie les métadonnées et les captures d'écran au composant de notre frontal pour l'afficher en tant que prévisualisation de lien dans l'application.

Voici le lien vers l'exemple de projet déployé sur netlify. Et voici le dépôt de github à suivre.

Créer et configurer l'application Vue

Nous allons créer une application Vue 3 à l'aide de Vue CLI. Nous allons également installer et configurer Tailwind CSS, un framework CSS-First utilitaire qui fournit des classes que nous pouvons utiliser pour notre application sans avoir à écrire beaucoup de CSS personnalisés.

Installez et configurez Vue

Pour échafaucher rapidement une application Vue, nous utiliserons Vue CLI. Pour installer Vue CLI, exécutez:

<span>npm install -g @vue/cli
</span>

Une fois la CLI installée, nous pouvons créer un projet en fonctionnant:

vue create link-previewer

Cela nous incitera à choisir un préréglage pour notre installation. Nous sélectionnerons «sélectionner manuellement les fonctionnalités» afin que nous puissions choisir les fonctionnalités dont nous avons besoin. Voici les options que j'ai sélectionnées:

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>

Après avoir sélectionné ces options, on nous demanderons si nous voulons enregistrer les options en tant que préréglage pour une utilisation ultérieure. Sélectionnez y (oui) ou n (non) et continuez avec l'installation.

Exécutez le CD-link-previewer pour entrer le projet nouvellement créé.

Installez et configurez CSS Tailwind

Pour installer Tailwind, nous utiliserons la construction de compatibilité PostCSS 7, car le vent arrière dépend de PostCSS 8 - qui au moment de la rédaction n'est pas encore pris en charge par Vue 3. Désinstaller toute installation précédente et réinstaller la construction de compatibilité :

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Créer les fichiers de configuration du vent arrière

Suivant, générez Tailwind.Config.js et Postcss.config.js Fichiers:

npx tailwindcss init <span>-p
</span>

Cela créera un fichier minimal tailwind.config.js à la racine du projet.

Configurer le vent arrière pour éliminer les styles inutilisés en production

Dans le fichier tailwind.config.js, configurez l'option Purge avec les chemins de chemin vers toutes les pages et composants pour que Tailwind peut secouer les styles inutilisés dans les builds de production:

<span>// ./tailwind.config.js
</span>module<span>.exports = {
</span>  <span>purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
</span>  <span>...
</span><span>}
</span>

Inclure le vent arrière dans le fichier CSS

Créez le fichier ./src/assets/css/main.css et utilisez la directive @tailwind pour inclure la base, les composants et les styles d'utilitaires de Tailwind:

<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>

Le vent arrière échangera ces directives au moment de la construction avec tous les styles qu'il génère en fonction du système de conception configuré.

Enfin, assurez-vous que le fichier CSS est importé dans le fichier ./src/main.js:

<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>

Et c'est tout, nous pouvons exécuter notre serveur:

<span>npm run serve
</span>

Maintenant que l'application est en cours d'exécution, si nous allons à l'URL fournie, nous devrions voir l'application de démonstration par défaut pour Vue et voir que les styles de base de Tailwind ont été appliqués.

Installez l'extension CSS Intellisense Tailwind

Pour une expérience de développement plus douce, installez l'extension CSS Intellisense à vent arrière pour le code vs.

Structure de base de l'application

Voici un aperçu de ce à quoi devrait ressembler notre dossier de projet:

<span>npm install -g @vue/cli
</span>

Une introduction rapide aux fonctions Netlify

Les fonctions Netlify sont un produit Netlify qui simplifie le processus de création et de déploiement de fonctions sans serveur. Selon la page d'accueil du produit, il est habitué à:

Déployer le code côté serveur qui fonctionne comme des points de terminaison API, s'exécute automatiquement en réponse aux événements ou traite des travaux plus complexes en arrière-plan.

Un fichier de fonction Netlify de base exporte une méthode de gestionnaire avec la syntaxe suivante:

vue create link-previewer

Netlify fournit les paramètres d'événement et de contexte lorsque la fonction est appelée / invoquée. Lorsque le point de terminaison d'une fonction est appelé, le gestionnaire reçoit un objet d'événement comme celui-ci:

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>

Le paramètre de contexte, en revanche, comprend des informations sur le contexte dans lequel la fonction a été appelée.

Dans la fonction, nous renvoyons un objet avec deux propriétés importantes:

• Statuscode, qui est de 200 dans ce cas
• corps, qui est un objet stringified .

La fonction sera appelée à partir de notre site sur /.netlify/functions/hello et sur succès, il renverrait le code d'état 200 et le message «Hello, World!».

Maintenant que nous avons une idée du fonctionnement des fonctions Netlify, voyons-les dans la pratique.

Création de notre première fonction Netlify

Pour créer notre première fonction Netlify, nous allons créer un nouveau fichier Fonctions / Hello.js dans le répertoire du projet et entrer comme suit:

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Une fois que nous avons créé le fichier de fonction, nous devons effectuer certaines configurations nécessaires pour que nous exécutions notre fonction localement.

Configurer la configuration Netlify

Nous allons créer un fichier Netlify.toml à la racine de notre dossier de projet qui indiquera Netlify où trouver nos fonctions:

npx tailwindcss init <span>-p
</span>

Netlify localisera et déploiera désormais les fonctions dans le dossier des fonctions au moment de la construction.

Installer Netlify CLI

Pour exécuter nos fonctions localement sans avoir à se déployer sur NetLify, nous devons installer NetLify CLI. La CLI nous permet de déployer nos projets avec de superbes fonctionnalités NetLify localement.

Pour installer la CLI, assurez-vous d'avoir Node.js version 10 ou version ultérieure, puis exécutez:

<span>// ./tailwind.config.js
</span>module<span>.exports = {
</span>  <span>purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
</span>  <span>...
</span><span>}
</span>

Cela installe Netlify CLI globalement, afin que nous puissions exécuter les commandes NetLify à partir de n'importe quel répertoire. Pour obtenir la version, l'utilisation, etc., nous pouvons courir:

<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>

Exécutez l'application avec Netlify Dev

Pour exécuter notre projet localement avec Netlify CLI, arrêtez le serveur de développement (s'il est actif), puis exécutez:

<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>

Et voici ce que nous devrions voir:

Si vous regardez attentivement, vous verrez quelques choses qui se passent là-bas:

• Netlify essaie d'injecter des variables d'environnement de nos fichiers .env dans le processus de construction, qui peuvent ensuite être accessibles par nos fonctions Netlify. Dans ce cas, nous n'avons aucun fichier .env, il charge donc les défauts définis dans le processus.

• Deuxièmement, il charge ou déploie nos fonctions situées dans le répertoire des fonctions. Le serveur de fonctions est déployé sur un port différent et aléatoire - 36647.

• Enfin, il détecte automatiquement avec quel framework l'application est construite et exécute les processus de construction nécessaires pour déployer l'application. Dans ce cas, vous pouvez voir «Démarrer Netlify Dev avec Vue.js». Il prend également en charge React et d'autres cadres populaires.

Netlify démarre alors notre serveur de développement sur http: // localhost: 8888.

Maintenant que notre serveur a commencé et que nos fonctions sont téléchargées, nous pouvons l'appeler / l'invoquer. Par défaut, nous pouvons accéder à nos fonctions à l'aide de cette route: /.netlify/functions/.

Une chose importante à noter est que nous n'avons pas besoin de spécifier le port où notre serveur fonctionne est en cours d'exécution. Nous pouvons utiliser l'itinéraire par défaut ci-dessus pour communiquer avec notre serveur de fonctions. Netlify résout automatiquement l'URL et le port dans les coulisses.

Si nous envoyons une demande de GET à http: // localhost: 8888 / .netlify / functions / bonjour, nous devrions obtenir une réponse de {"message": "Bonjour, monde!"}.

génial! Notre première fonction sans serveur fonctionne!

Créez l'API de la fonction de prévisualisation

Maintenant que notre fonction Netlify fonctionne, nous pouvons commencer à construire l'API Aperçu. Voici un aperçu rapide de ce que notre API Fonctions va faire:

• Il reçoit l'URL cible qui sera envoyée à partir de l'extrémité avant
• Il transmet les données à Puppeteer
• Puppeneer lance ensuite une nouvelle instance de navigateur sans tête
• marionnettiste ouvre une nouvelle page dans le navigateur et navigue vers l'URL cible
• Puppeteer extrait ensuite le contenu des balises et pour la description de la page cible
• Il capture une capture d'écran de la page
• Il renvoie les données de capture d'écran à l'avant

Maintenant que nous avons une idée de base de ce que va faire notre API Fonctions, nous pouvons commencer à créer des fonctions. Commençons par installer et configurer Puppeteer pour les fonctions Netlify.

installer et configurer les marionnets

Puppeteer est une bibliothèque de nœuds qui fournit une API de haut niveau pour contrôler les navigateurs chromés ou chrome sans tête sans tête. Il peut également être configuré pour utiliser le chrome ou le chrome complet (non taillé). Vous pouvez faire la plupart des choses que vous pouvez faire manuellement dans le navigateur à l'aide de marionnettiste. En savoir plus sur les marionnettiste se trouvent dans la documentation des marionnettes.

Pour commencer avec Puppeteer, nous allons l'installer dans notre projet.

marionnettiste pour le développement local et la production

Puppeneer télécharge une version récente de Chromium (~ 170 Mo macOS, ~ 282 Mo Linux, ~ 280 Mo) qui est garantie de fonctionner avec l'API.

Nous ne pouvons pas utiliser le package de marionnettiste complet pour la production. En effet

Grâce à cet article très utile de Ire Aderinokun, nous pouvons toujours travailler avec Puppeteer à la fois localement et en production. Voici ce que nous devons faire:

Installez Puppeteer en tant que dépendance de développement

* pour le déploiement local:

<span>npm install -g @vue/cli
</span>

Pour que les marionnettistes fonctionnent à la fois localement et en production, nous devons installer des marionnetteer-core et chrome-aws-lambda comme

dépendances de production .

Vous pouvez consulter la différence entre marionnettiste et marionnettiste ici. La principale différence, cependant, est que Puppeteer-core ne télécharge pas automatiquement le chrome lorsqu'il est installé.

Étant donné que Puppeteer-core ne télécharge pas un navigateur, nous installerons Chrome-Aws-Lambda, un "Chromium Binary pour AWS Lambda et Google Cloud Fonctions" que nous pouvons utiliser dans nos fonctions Netlify. Ce sont les packages qui fonctionneront en production:

vue create link-previewer

Maintenant que nous avons installé nos packages, créons notre fonction.

Utiliser le navigateur déjà installé pour marionnettiste

Si Puppeteer installant un navigateur complet pour travailler avec localement va être un problème, cela peut être dû à des problèmes de réseau ou de bande passante lents. Il y a une solution de contournement, qui est d'utiliser notre navigateur chrome ou chrome déjà installé pour marionnettiste.

Ce dont nous avons besoin, c'est du chemin vers le navigateur de notre machine locale. Nous allons l'utiliser comme notre exécutablePath, que nous passerons à la méthode puppeneer.launch (). Cela indique à Puppeteer où trouver le fichier exécutable du navigateur.

Si vous ne savez pas exactement où trouver le chemin exécutable, ouvrez votre navigateur et allez sur Chrome: // Version / Pour afficher la version de Chrome.

Copiez le chemin et créez un fichier .env dans la racine du projet.

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>

Pour obtenir le contenu du fichier .env, nous allons installer un autre package - Dotenv:

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Maintenant que nous avons installé avec succès le package, créons la fonction Netlify.

Créer la fonction générée de prévisions

Créez un nouveau fichier, ./fonctions/generate-preview.js:

npx tailwindcss init <span>-p
</span>

Dans le code ci-dessus, nous faisons un certain nombre de choses. Tout d'abord, nous obtenons le TargetUrl à partir de la charge utile de demande dans Event.body. Cela serait envoyé avec une demande de poste.

Ensuite, nous lançons le navigateur à l'aide du package Chrome-aws-Lambda. Nous le faisons en utilisant la méthode puppeneer.launch (). Cette méthode prend un objet comme argument avec quelques propriétés facultatives. Une propriété importante que nous transmettons à cette méthode est le ExécutablePath.

Nous attribuons le ExécutablePath à Process.env.Excecuable_Path || attendre chromium.ExécutablePath permettant au package de localiser le navigateur sans tête disponible pour le lancer.

Une fois le navigateur lancé, nous ouvrons une nouvelle page dans le navigateur à l'aide de la méthode Browser.NewPage (). Nous définissons également la fenêtre de navigateur souhaitée pour la page à l'aide de la méthode page.setViewport ().

Notez que nous utilisons le mot-clé Await lors de l'exécution d'une fonction. En effet

Nous pouvons également faire des choses comme définir les fonctionnalités médiatiques de la page avec Puppeteer à l'aide de la méthode Page.MulateMediaFeatures (), qui prend un tableau d'objets de fonctionnalité multimédia. C'est ainsi que nous définissons le préfère-color-scheme dans Dark.

Obtenez des méta-données du site et capture d'écran

Ensuite, nous naviguerons vers l'URL cible et obtiendrons notre titre, notre description et notre capture d'écran:

<span>npm install -g @vue/cli
</span>

Dans le code ci-dessus, nous utilisons un bloc TryCatch pour envelopper notre code afin que, si quelque chose ne va pas, à partir de l'attente Page.goto (TargetUrl), qui navigue vers l'URL cible, nous pouvons attraper l'erreur et Envoyez-le à notre frontal. Une erreur peut se produire en fournissant une URL non valide.

Si l'URL était valide, nous obtenons le titre à l'aide de la méthode de la page. $ EVAL (), qui est similaire à la méthode Document.QuerySelector habituelle en JavaScript. Nous passons dans le sélecteur CSS - tête> titre - de la balise de titre comme premier argument. Nous passons également une fonction el => el.textContent comme deuxième argument, où El est un paramètre que nous passons à la fonction et est l'élément de titre. Nous pouvons maintenant obtenir la valeur en utilisant Title.TextContent.

Notez que tout cela est enveloppé dans une parenthèses (()) et nous avons un || NULL APRÈS PAGE. $ EVAL. C'est ainsi que le titre est attribué null si page. $ Eval () ne parvient pas à obtenir le titre de la page.

Pour obtenir les descriptions de la page, nous utiliserons la méthode page.evaluate (), qui nous permet d'exécuter un javascript côté client et de renvoyer une valeur à la variable attribuée - descriptions.

Nous transmettons une fonction et argument à la méthode page.evaluate (). Dans la fonction, nous utilisons document.QuerySelector pour obtenir les différentes descriptions de méta, telles que Pour la description par défaut, et Pour la description OpenGraph.

Après avoir obtenu les éléments, nous utilisons les opérateurs ternaires pour obtenir le contenu et l'ajouter à l'objet descriptions si les éléments existent, ou null si l'élément n'existe pas.

Une fois que nous avons obtenu les descriptions, nous prenons une capture d'écran de la page à l'aide de la méthode page.screenshot () et fermons le navigateur avec le navigateur.close ().

Enfin, nous envoyons les détails de la page dans la propriété corporelle un objet JSON avec un code status de 200. Si une erreur se produit dans l'une des étapes précédentes, elle est prise dans le bloc de capture et que nous envoyons un code d'état de 400 et le message d'erreur à la place.

Tester et déploier la fonction

Testons notre fonction à l'aide d'un testeur API. Vous pouvez installer Postman ou Talend API Tester dans votre navigateur ou utiliser l'extension du client Thunder, un testeur API pour le code vs.

Vous pouvez également utiliser Curl:

<span>npm install -g @vue/cli
</span>

Exécutez la fonction à l'aide de la commande Netlify Dev.

Nous pouvons envoyer une demande en utilisant le port pour le serveur Functions ou le port par défaut: 8888 pour le serveur de développement NetLify pour envoyer une demande à nos fonctions. J'utiliserai http: // localhost: 8888 / .netlify / functions / generate-preview pour envoyer une demande post avec un objet contenant le TargetUrl dans le corps:

vue create link-previewer

Lorsque nous envoyons la demande, voici la réponse que nous obtenons.

Nous obtenons un objet JSON contenant nos données d'aperçu:

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>

Maintenant que notre fonction sans serveur fonctionne, voyons comment nous pouvons l'utiliser dans notre frontal.

Création de la fonctionnalité d'aperçu du lien sur le client

Afin d'interagir avec notre fonction Generate-Preview, nous devrons envoyer des demandes de poste contenant notre TargetUrl.

Nous créerons des composants LinkPreView qui afficheront des liens normaux. Ces composants passeront leurs URL cibles comme accessoires. Avant que le composant ne soit monté dans l'application, il enverra une demande de poste avec le TargetUrl à notre fonction sans serveur, obtiendra les données d'aperçu et l'afficher une fois que nous survons sur le lien.

Création du composant d'aperçu du lien

Tout d'abord, créons notre composant de prévisualisation de lien src / composants / linkpreviewer.vue.

Dans notre <script>, nous obtiendrons les données de prévisualisation du lien en envoyant une demande à notre fonction sans serveur et enregistrerons les données dans l'objet PreviewData. Nous l'utiliserons plus tard dans notre modèle pour afficher les données: </script>

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Dans le code ci-dessus, nous obtenons le TargetUrl comme un accessoire qui sera transmis dans notre composant.

Dans la configuration (), nous passons des accessoires comme argument pour que nous accédons aux accessoires des composants comme TargetUrl.

Ensuite, nous créons un objet réactif PeViewData à l'aide de Ref: const aperviewdata = ref ({}). Dans une nouvelle fonction GeneratePreView (), nous utilisons Fetch pour envoyer une demande post contenant le TargetUrl à notre fonction sans serveur. Cette fonction renvoie la réponse ou null si une erreur se produit.

Ensuite, pour exécuter la fonction avant le montage du composant, nous utilisons le crochet onBeForMount (). Nous passons une fonction asynchrone comme un argument. Dans la fonction, nous attribuons PrewerData.Value à la fonction génératepreview (). Les descriptions (Desc, OG, Twitter) sont ensuite obtenues de la propriété descriptions.

Pour obtenir la description qui sera affichée dans l'aperçu, nous attribuerons Aperçu Aperçu.Value.Description à (Desc || OG || Twitter || ""). De cette façon, la première propriété avec une valeur est attribuée à la description.

Faites cela pour afficher les données d'aperçu dans notre modèle:

<span>npm install -g @vue/cli
</span>

Dans le code ci-dessus, afin d'afficher notre image - qui est essentiellement une chaîne de base64 - nous devons passer la chaîne avec des données comme le type d'image et le codage dans l'attribut SRC- ""

C'est à peu près tout pour notre composant linkpreviewer.vue. Voyons-le en action. Dans ./src/views/home.vue:

vue create link-previewer

Dans notre fichier home.vue, nous utilisons essentiellement un tableau Demolinks de liens pour rendre une liste de composants LinkPreViewer, que nous transmettons aux accessoires TargetUrl du composant.

Nous avons également un élément , que nous utilisons pour ajouter dynamiquement plus de composants LinkPreViewer à la liste.

Voici à quoi ressemble notre application simple maintenant.

doux! Notre application fonctionne. Depuis que nous exécutons localement à l'aide de Netlify CLI, voyons comment nous pouvons déployer sur Netlify en utilisant le CLI.

Déploiement de l'application sur Netlify

Avant de déployer notre application sur Netlify, nous devons créer notre application pour la production:

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>

Cela créera notre application et créera un distr / dossier que nous pouvons déployer en production.

Ensuite, nous devons nous connecter à notre compte Netlify:

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Cela vous enregistrera sur votre compte Netlify dans votre navigateur.

Après l'autorisation de l'application, nous pouvons lier notre projet à un nouveau site. Netlify nous posera un tas de questions:

• Qu'aimeriez-vous faire? Choisissez «Créer et configurer un nouveau site».
• Équipe? Choisissez .
• Choisissez un nom de site unique? Choisissez .
• Veuillez fournir un répertoire de publication (tel que «public» ou «dist» ou «.»). Entrez dist.

Après cela, Netlify téléchargera nos fichiers et les déploiera sur notre nouveau site.

Déployer à l'aide de github

Alternativement, nous pouvons décider de déployer notre site à partir de GitHub. Tout ce que vous avez à faire est de vous connecter à GitHub, de créer un nouveau référentiel et de copier l'URL dans notre ré-transfert nouvellement créé.

Nous exécutons ensuite la commande suivante dans notre dossier de projet:

<span>npm install -g @vue/cli
</span>

Remarque: vous ne pourrez peut-être pas pousser à votre référentiel à partir de votre terminal en raison de problèmes d'authentification, et vous pourriez recevoir un message de Git comme ceci: «La prise en charge de l'authentification du mot de passe a été supprimée le 13 août 2021. Veuillez utiliser un jeton d'accès personnel à la place. » Cela signifie que vous devez créer un jeton d'accès personnel (PAT) et l'utiliser pour vous connecter. Pour ce faire, accédez aux paramètres de jeton GitHub et générez un nouveau jeton. Sélectionnez toutes les autorisations souhaitées. Assurez-vous que vous pouvez accéder à des repos. Après avoir généré votre PAT, copiez-le et enregistrez-le quelque part. Ensuite, essayez à nouveau le git push -u Origin Main Commande et collez dans votre pat Une fois que nous avons poussé le projet à GitHub, rendez-vous sur Netlify pour créer un nouveau site à partir de github.

Suivez les étapes pour choisir un référentiel et entrez les paramètres de construction de votre projet. Pour notre projet VUE, la commande build est NPM Run build, et le répertoire de déploiement est dist.

Après cela, cliquez sur Déployer le site.

Netlify déploiera le site et nous pouvons prévisualiser notre site en cliquant sur le lien de déploiement fourni. Nous pouvons voir nos fonctions en passant aux fonctions du menu supérieur.

Vous pouvez sélectionner une fonction pour afficher plus de détails et de journaux.

doux!

Voici le lien vers la démo déployée sur netlify: https://lnkpreviewr.netlify.app

Conclusion

Nous avons pu créer et déployer des fonctions sans serveur avec NetLify à l'aide de fonctions NetLify. Nous avons également vu comment nous pouvons interagir avec les fonctions de notre frontal Vue. Cette fois, nous avons l'habitude de la capture d'écran et d'obtenir des données d'autres sites et de construire un composant d'aperçu de lien avec celui-ci, mais nous pouvons en faire beaucoup plus. Avec les fonctions sans serveur, nous pouvons en faire plus sur le frontal sans avoir à prendre la peine de configurer un serveur back-end.

lecture plus approfondie et ressources

Voici quelques ressources et contenus que j'ai trouvés utiles et je pense que vous aussi:

• Project Github Repo
• Tutoriels - Fonctions Netlify
• En fonctionnement avec des fonctions sans serveur - Jamstack Explorers (netlify.com)
• Débutant avec les développeurs de marionnettes Google
• Comment utiliser des marionnets dans une fonction Netlify-aws-Lambda
• Comment utiliser des marionnets pour automatiser Chrome dans une API avec des fonctions sans serveur NetLify - Space Jelly

Questions fréquemment posées (FAQ) sur les marionnettiste et les fonctions sans serveur

Comment puis-je déboguer mon code de marionnet-dans dans une fonction sans serveur?

Le code de marionnettèle de débogage dans une fonction sans serveur peut être un peu délicat en raison de la nature de l'architecture sans serveur. Cependant, vous pouvez utiliser la fonction «Console.log» pour imprimer les valeurs et suivre l'exécution de votre code. Vous pouvez également utiliser la fonction «Page.on (« Console », MSG => Console.log (msg.Text ()))» pour enregistrer toute la sortie de la console du navigateur. N'oubliez pas de vérifier les journaux du tableau de bord de votre fournisseur de fonctions sans serveur.

Comment puis-je gérer les erreurs dans Puppeteer dans des fonctions sans serveur?

La gestion des erreurs dans les marionnetètes dans les fonctions sans serveur est cruciale pour vous assurer que votre application s'exécute en douceur en douceur dans . Vous pouvez utiliser des blocs de capture d'essai pour gérer les erreurs. Dans le bloc Catch, vous pouvez enregistrer le message d'erreur et éventuellement envoyer une réponse avec le message d'erreur. De cette façon, vous pouvez suivre et résoudre tous les problèmes qui peuvent survenir.

Puis-je utiliser des marionnets avec d'autres fournisseurs sans serveur en dehors de Netlify?

Oui, vous pouvez utiliser des marionnetsteer avec d'autres fournisseurs sans serveur tels que AWS Lambda, Google Cloud Fonctions et Fonctions Azure. Cependant, le processus de configuration peut varier en fonction du fournisseur. Vous devrez peut-être utiliser une construction personnalisée de marionnetteer comme Chrome-aws-Lambda pour AWS Lambda.

Comment puis-je optimiser les performances de Puppeteer dans des fonctions sans serveur?

pour optimiser les performances de Puppeneer Dans les fonctions sans serveur, vous pouvez utiliser quelques stratégies. Tout d'abord, réutilisez l'instance du navigateur sur plusieurs invocations. Deuxièmement, utilisez l'option «NetworkIdle0» Waittuntil pour vous assurer que toutes les demandes de réseau sont terminées. Troisièmement, désactivez les fonctionnalités inutiles dans Puppeteer comme les images, les CSS et les polices pour accélérer le chargement de la page.

Comment puis-je prendre des captures d'écran avec des marionnets dans des fonctions sans serveur?

Prendre des sisens avec des marionnettes dans des fonctions sans serveur? est simple. Vous pouvez utiliser la fonction «page.screenshot ()» pour prendre une capture d'écran de la page actuelle. Vous pouvez spécifier des options telles que le type de capture d'écran (JPEG ou PNG), la qualité et l'inclusion de la page complète ou simplement de la fenêtre.

Puis-je utiliser Puppeteer pour automatiser la soumission de formulaire dans des fonctions sans serveur?

Oui, vous pouvez utiliser des marionnetsteer pour automatiser la soumission de formulaire dans des fonctions sans serveur. Vous pouvez utiliser la fonction «Page.Type ()» pour remplir les champs d'entrée et la fonction «page.click ()» pour cliquer sur les boutons ou les liens. Après la soumission du formulaire, vous pouvez utiliser Puppeteer pour naviguer sur la page résultante et extraire les données dont vous avez besoin.

Comment puis-je gratter les sites Web dynamiques avec des marionnettes dans des fonctions sans serveur?

Puppeter est excellent pour le grattage Sites Web dynamiques dans des fonctions sans serveur car elle peut rendre le contenu généré par JavaScript. Vous pouvez utiliser la fonction «page.evaluate ()» pour exécuter le code JavaScript dans le contexte de la page et extraire les données dont vous avez besoin.

Comment puis-je gérer la navigation et les redirectes de page avec des marionnettistes dans des fonctions sans serveur?

La gestion des redirections de navigation et de page avec des marionnettiste dans des fonctions sans serveur peut être effectuée à l'aide de la fonction «page.WaitFornavigation ()». Cette fonction attend que la page navigue vers une nouvelle URL ou un nouveau rechargement. Vous pouvez l'utiliser en conjonction avec la fonction «page.click ()» pour attendre que la page navigue après avoir cliqué sur un lien ou un bouton.

Puis-je utiliser Puppeteer pour tester mon application Web dans des fonctions sans serveur?

Oui, vous pouvez utiliser Puppeteer pour tester votre application Web dans des fonctions sans serveur. Le marionnettiste fournit une API de haut niveau pour l'automatisation du navigateur, ce qui est parfait pour les tests de bout en bout. Vous pouvez simuler les interactions utilisateur, vérifier l'état de la page résultante et même prendre des captures d'écran pour vérifier visuellement le comportement de votre application.

Comment puis-je gérer les cookies et les sessions avec des marionnets dans des fonctions sans serveur?

Gestion des cookies et des sessions avec Puppeteer dans des fonctions sans serveur peuvent être effectuées à l'aide des fonctions «page.cookies ()» et «page.setcookie ()». Vous pouvez utiliser ces fonctions pour obtenir et définir des cookies, respectivement. Ceci est utile pour maintenir une session ou tester le comportement de votre application avec différents cookies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!