Créons un générateur de code QR avec une fonction sans serveur !

Les codes QR sont amusants, non ? On les aime, puis on les déteste, puis on les aime à nouveau. Quoi qu'il en soit, ils ont réapparu ces derniers temps et cela m'a fait réfléchir à la façon dont ils sont fabriqués. Il existe des milliards de générateurs de codes QR, mais disons que c'est quelque chose que vous devez faire sur votre propre site Web. Ce paquet peut faire ça. Mais il pèse également 180 Ko pour tout ce dont il a besoin pour générer des éléments. Vous ne voudriez pas servir tout cela avec le reste de vos scripts.

Maintenant, je suis relativement nouveau dans le concept des fonctions cloud, mais j'ai entendu dire que c'était les genoux de l'abeille pour quelque chose comme ça. De cette façon, la fonction réside quelque part sur un serveur qui peut être appelé en cas de besoin. Sorta comme une petite API pour exécuter la fonction.

Certains hébergeurs offrent une sorte de fonctionnalité de fonction cloud. DigitalOcean se trouve être l'un d'entre eux ! Et, comme Droplets, les fonctions sont assez faciles à déployer.

Créer un dossier de fonctions localement

DigitalOcean a une CLI avec une commande qui va échafauder les choses pour nous, donc cd où que vous souhaitiez configurer et exécuter :

doctl serverless init --language js qr-generator

Notez que le langage est explicitement déclaré. Les fonctions DigitalOcean prennent également en charge PHP et Python.

Nous obtenons un beau projet propre appelé qr-generator avec une /packages dossier qui contient toutes les fonctions du projet. Il y a un exemple de fonction là-dedans, mais nous pouvons l'ignorer pour l'instant et créer un qr dossier juste à côté :

Ce dossier est l'endroit où les deux qrcode forfait et notre qr.js la fonction va vivre. Alors, allons cd développement packages/sample/qr et installez le paquet :

npm install --save qrcode

Nous pouvons maintenant écrire la fonction dans un nouveau qr.js fichier:

const qrcode = require('qrcode') exports.main = (args) => { return qrcode.toDataURL(args.text).then(res => ({ headers: { 'content-type': 'text/html; charset=UTF-8' }, body: args.img == undefined ? res : `<img src="${res}">` }))
} if (process.env.TEST) exports.main({text:"hello"}).then(console.log)

Tout ce que cela fait, c'est exiger le qrcode package et l'exportation d'une fonction qui génère essentiellement un <img> tag avec le PNG base64 pour la source. Nous pouvons même le tester dans le terminal :

doctl serverless functions invoke sample/qr -p "text:css-tricks.com"

Vérifiez le fichier de configuration

Il y a une étape supplémentaire dont nous avons besoin ici. Lorsque le projet a été échafaudé, nous avons eu ce petit project.yml fichier et il configure la fonction avec quelques informations à son sujet. Voici ce qu'il y a par défaut :

targetNamespace: ''
parameters: {}
packages: - name: sample environment: {} parameters: {} annotations: {} actions: - name: hello binary: false main: '' runtime: 'nodejs:default' web: true parameters: {} environment: {} annotations: {} limits: {}

Vous voyez ces lignes en surbrillance ? La packages: name la propriété est où dans le packages dossier la fonction vit, qui est un dossier appelé sample dans ce cas. le actions/ name propriété est le nom de la fonction elle-même, qui est le nom du fichier. C'est hello par défaut lorsque nous lançons le projet, mais nous avons nommé le nôtre qr.js, donc nous devrions changer cette ligne de hello à qr avant de passer à autre chose.

Déployer la fonction

Nous pouvons le faire directement depuis la ligne de commande ! Tout d'abord, nous nous connectons à l'environnement sandbox DigitalOcean afin d'avoir une URL en direct pour les tests :

## You will need an DO API key handy
doctl sandbox connect

Nous pouvons maintenant déployer la fonction :

doctl sandbox deploy qr-generator

Une fois déployé, nous pouvons accéder à la fonction à une URL. Quelle est l'URL ? Il y a une commande pour ça :

doctl sbx fn get sample/qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr

Putain ouais ! Plus besoin d'expédier ce package complet avec le reste des scripts ! Nous pouvons atteindre cette URL et générer le code QR à partir de là.

Démo

We fetch l'API et c'est vraiment tout ce qu'il y a à faire !

Créons un générateur de code QR avec une fonction sans serveur ! publié à l'origine le Astuces CSS. Vous devriez recevoir le bulletin.