Låt oss skapa en QR-kodgenerator med en serverlös funktion! PlatoBlockchain Data Intelligence. Vertikal sökning. Ai.

Låt oss skapa en QR-kodgenerator med en serverlös funktion!

QR-koder är roliga, eller hur? Vi älskar dem, sedan hatar vi dem, sedan älskar vi dem igen. Hur som helst, de har på sistone dykt upp igen och det fick mig att tänka på hur de är gjorda. Det finns som en gazillion QR-kodgeneratorer där ute, men säg att det är något du behöver göra på din egen webbplats. Detta paket kan göra det. Men den väger också rejäla 180 KB för allt den behöver för att generera saker. Du skulle inte vilja tjäna allt det tillsammans med resten av dina skript.

Nu är jag relativt ny på konceptet med molnfunktioner, men jag hör att det är biets knän för något som det här. På så sätt bor funktionen någonstans på en server som kan anropas när det behövs. Lite som ett litet API för att köra funktionen.

Vissa värdar erbjuder någon form av molnfunktionsfunktion. DigitalOcean råkar vara en av dem! Och precis som Droplets är funktionerna ganska lätta att distribuera.

Skapa en funktionsmapp lokalt

DigitalOcean har en CLI som med ett kommando som ställer upp saker åt oss, så cd var du än vill ställa in saker och köra:

doctl serverless init --language js qr-generator

Observera att språket är uttryckligen deklarerat. DigitalOcean-funktioner stöder även PHP och Python.

Vi får ett fint rent projekt som heter qr-generator med en /packages mapp som innehåller alla projektets funktioner. Det finns en exempelfunktion där, men vi kan förbise den för tillfället och skapa en qr mappen bredvid:

Låt oss skapa en QR-kodgenerator med en serverlös funktion! PlatoBlockchain Data Intelligence. Vertikal sökning. Ai.
Låt oss skapa en QR-kodgenerator med en serverlös funktion!

Den mappen är där både qrcode paket och vårt qr.js funktion kommer att leva. Så, låt oss cd in packages/sample/qr och installera paketet:

npm install --save qrcode

Nu kan vi skriva funktionen i en ny qr.js fil:

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)

Allt som gör är att kräva den qrcode paketera och exportera en funktion som i princip genererar en <img> taggen med a base64 PNG för källan. Vi kan till och med testa det i terminalen:

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

Kontrollera konfigurationsfilen

Det är ett extra steg vi behöver här. När projektet byggdes upp fick vi det här lilla project.yml fil och den konfigurerar funktionen med lite information om den. Detta är vad som finns där som standard:

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

Ser du de markerade raderna? De packages: name egendom är var i packages mapp funktionen lives, vilket är en mapp som heter sample I detta fall. De actions/ name egenskap är namnet på själva funktionen, vilket är namnet på filen. Dess hello som standard när vi snurrar upp projektet, men vi döpte vårt qr.js, så vi borde ändra den linjen från hello till qr innan du går vidare.

Distribuera funktionen

Vi kan göra det direkt från kommandoraden! Först ansluter vi till DigitalOcean-sandlådemiljön så att vi har en live-URL för testning:

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

Nu kan vi distribuera funktionen:

doctl sandbox deploy qr-generator

När den väl har implementerats kan vi komma åt funktionen på en URL. Vad är webbadressen? Det finns ett kommando för det:

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

Fan ja! Du behöver inte längre skicka hela paketet med resten av skripten! Vi kan träffa den webbadressen och generera QR-koden därifrån.

demo

We fetch API:et och det är verkligen allt som finns!

CodePen Bädda in reserv

Låt oss skapa en QR-kodgenerator med en serverlös funktion! ursprungligen publicerad på CSS-tricks. Du borde få nyhetsbrevet.

Tidsstämpel:

Mer från CSS-tricks