Lass uns einen QR-Code-Generator mit einer serverlosen Funktion erstellen!

QR-Codes sind lustig, oder? Wir lieben sie, hassen sie dann und lieben sie wieder. Jedenfalls tauchen sie in letzter Zeit wieder auf und das hat mich darüber nachdenken lassen, wie sie hergestellt werden. Es gibt eine Unmenge von QR-Code-Generatoren da draußen, aber sagen wir, Sie müssen das auf Ihrer eigenen Website tun. Dieses Paket kann das tun. Aber es wiegt auch satte 180 KB für alles, was es zur Generierung von Dingen benötigt. Sie möchten nicht all das zusammen mit Ihren anderen Skripten ausliefern.

Nun, ich bin relativ neu im Konzept der Cloud-Funktionen, aber ich höre, das ist das Nonplusultra für so etwas. Auf diese Weise lebt die Funktion irgendwo auf einem Server, der bei Bedarf aufgerufen werden kann. So etwas wie eine kleine API, um die Funktion auszuführen.

Einige Hoster bieten eine Art Cloud-Funktionen-Feature an. DigitalOcean ist zufällig einer davon! Und wie Droplets sind Funktionen ziemlich einfach bereitzustellen.

Erstellen Sie lokal einen Ordner für Funktionen

DigitalOcean verfügt über eine CLI, mit der wir mit einem Befehl Dinge vorbereiten können. Wechseln Sie also mit cd dorthin, wo Sie die Dinge einrichten möchten, und führen Sie aus

doctl serverless init --language js qr-generator

Beachten Sie, dass die Sprache explizit deklariert ist. DigitalOcean-Funktionen unterstützen auch PHP und Python.

Wir erhalten ein schönes, sauberes Projekt namens qr-generator mit einem /packages-Ordner, der alle Funktionen des Projekts enthält. Dort gibt es eine Beispielfunktion, die wir vorerst ignorieren und direkt daneben einen qr-Ordner erstellen können

In diesem Ordner werden sowohl das qrcode-Paket als auch unsere qr.js-Funktion leben. Wechseln wir also mit cd in packages/sample/qr und installieren das Paket

npm install --save qrcode

Jetzt können wir die Funktion in einer neuen Datei qr.js schreiben

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)

Dabei wird nur das qrcode-Paket neu angefordert und eine Funktion exportiert, die im Grunde einen <img>-Tag mit einem Base64-PNG als Quelle generiert. Wir können es sogar im Terminal testen

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

Überprüfen Sie die Konfigurationsdatei

Wir benötigen hier einen zusätzlichen Schritt. Als das Projekt vorbereitet wurde, haben wir diese kleine project.yml-Datei erhalten, die die Funktion mit einigen Informationen darüber konfiguriert. Das ist standardmäßig darin enthalten

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

Sehen Sie diese hervorgehobenen Zeilen? Die Eigenschaft packages: name gibt an, wo im packages-Ordner die Funktion liegt, in diesem Fall ein Ordner namens sample. Die Eigenschaft actions/ name ist der Name der Funktion selbst, der dem Dateinamen entspricht. Es ist standardmäßig hello, wenn wir das Projekt starten, aber wir haben unsere qr.js genannt, also sollten wir diese Zeile von hello in qr ändern, bevor wir weitermachen.

Stellen Sie die Funktion bereit

Das können wir direkt von der Kommandozeile aus tun! Zuerst verbinden wir uns mit der DigitalOcean-Sandbox-Umgebung, damit wir eine Live-URL zum Testen haben

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

Jetzt können wir die Funktion bereitstellen

doctl sandbox deploy qr-generator

Nach der Bereitstellung können wir auf die Funktion über eine URL zugreifen. Wie lautet die URL? Dafür gibt es einen Befehl

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

Hell yeah! Kein Grund mehr, dieses gesamte Paket mit dem Rest der Skripte auszuliefern! Wir können diese URL aufrufen und den QR-Code von dort generieren.

Demo

Wir fetch die API und das war's im Grunde schon!