I codici QR sono divertenti, giusto? Li amiamo, poi li odiamo, poi li amiamo di nuovo. Ad ogni modo, ultimamente sono spuntati di nuovo e mi ha fatto pensare a come sono fatti. Ci sono milioni di generatori di codici QR là fuori, ma dì che è qualcosa che devi fare sul tuo sito web. Questo pacchetto può farlo. Ma pesa anche ben 180 KB per tutto ciò di cui ha bisogno per generare cose. Non vorrai servire tutto questo insieme al resto dei tuoi script.
Ora, sono relativamente nuovo al concetto di funzioni cloud, ma ho sentito che sono le ginocchia dell'ape per qualcosa proprio come questo. In questo modo, la funzione risiede da qualche parte su un server che può essere chiamato quando è necessario. Ordina come una piccola API per eseguire la funzione.
Alcuni host offrono una sorta di funzionalità della funzione cloud. DigitalOcean sembra essere uno di questi! E, come Droplets, le funzioni sono abbastanza facili da implementare.
Crea una cartella delle funzioni in locale
DigitalOcean ha una CLI che con un comando impalca le cose per noi, quindi cd
ovunque tu voglia impostare ed eseguire le cose:
doctl serverless init --language js qr-generator
Si noti che la lingua è dichiarata esplicitamente. Le funzioni di DigitalOcean supportano anche PHP e Python.
Otteniamo un bel progetto pulito chiamato qr-generator
con una /packages
cartella che contiene tutte le funzioni del progetto. C'è una funzione di esempio lì dentro, ma per ora possiamo trascurarla e creare un qr
cartella proprio accanto ad essa:
Quella cartella è dove entrambi i qrcode
pacchetto e il ns qr.js
funzione vivranno. Allora, andiamo cd
ai miglioramenti packages/sample/qr
e installa il pacchetto:
npm install --save qrcode
Ora possiamo scrivere la funzione in un nuovo qr.js
file:
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)
Tutto ciò che sta facendo è richiedere il qrcode
pacchetto ed esportando una funzione che fondamentalmente genera un file <img>
tag con un PNG base64 per l'origine. Possiamo anche testarlo nel terminale:
doctl serverless functions invoke sample/qr -p "text:css-tricks.com"
Controlla il file di configurazione
C'è un passaggio in più di cui abbiamo bisogno qui. Quando il progetto è stato impalcato, abbiamo ottenuto questo piccolo project.yml
file e configura la funzione con alcune informazioni a riguardo. Questo è ciò che è lì per impostazione predefinita:
targetNamespace: ''
parameters: {}
packages: - name: sample environment: {} parameters: {} annotations: {} actions: - name: hello binary: false main: '' runtime: 'nodejs:default' web: true parameters: {} environment: {} annotations: {} limits: {}
Vedi quelle linee evidenziate? Il packages: name
la proprietà è dove nel packages
cartella in cui vive la funzione, che è una cartella chiamata sample
in questo caso. Il actions/ name
proprietà è il nome della funzione stessa, che è il nome del file. È hello
per impostazione predefinita quando avviamo il progetto, ma abbiamo chiamato il nostro qr.js
, quindi dovremmo cambiare quella linea da hello
a qr
prima di andare avanti.
Distribuisci la funzione
Possiamo farlo direttamente dalla riga di comando! Innanzitutto, ci colleghiamo all'ambiente sandbox DigitalOcean in modo da avere un URL attivo per il test:
## You will need an DO API key handy
doctl sandbox connect
Ora possiamo distribuire la funzione:
doctl sandbox deploy qr-generator
Una volta distribuito, possiamo accedere alla funzione tramite un URL. Qual è l'URL? C'è un comando per questo:
doctl sbx fn get sample/qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr
Cavolo sì! Non è più necessario spedire l'intero pacchetto con il resto degli script! Possiamo colpire quell'URL e generare il codice QR da lì.
Dimo
We fetch
l'API e questo è davvero tutto quello che c'è da fare!
Realizziamo un generatore di codici QR con una funzione serverless! originariamente pubblicato il CSS-Tricks. Dovresti ricevi la newsletter.
- '
- "
- 9
- a
- WRI
- accesso
- azioni
- Tutti
- api
- fondamentalmente
- prima
- stile di vita
- il cambiamento
- Cloud
- codice
- concetto
- Connettiti
- consolle
- creare
- schierare
- schierato
- Ambiente
- qualunque cosa
- caratteristica
- Nome
- da
- function
- funzioni
- divertente
- generare
- generatore
- andando
- qui
- Evidenziato
- detiene
- Come
- HTTPS
- informazioni
- install
- IT
- stessa
- JavaScript
- Le
- Lingua
- linea
- Linee
- piccolo
- vivere
- amore
- fatto
- make
- Scopri di più
- in movimento
- esigenze
- offrire
- proprio
- pacchetto
- piuttosto
- processi
- progetto
- proprietà
- QR code
- RE
- REST
- ritorno
- Correre
- sandbox
- serverless
- set
- So
- alcuni
- qualcosa
- da qualche parte
- Spin
- supporto
- terminal
- test
- Testing
- Il
- L’ORIGINE
- cose
- Pensiero
- us
- sito web
- Sito web
- Trasferimento da aeroporto a Sharm