Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-Mitarbeitern

Serverless Computing hat die Softwareentwicklung revolutioniert, die Bereitstellung und DevOps vereinfacht. Dieses Tutorial zeigt, dass das Erstellen einer serverlosen Full-Stack-Anwendung mit CloudFlare-Mitarbeitern erstellt wird, eine Plattform, die Skalierung und Infrastruktur abstrahiert. Das Projekt "Repo Hunt" ist eine tägliche Rangliste für Open-Source-Projekte, die von Produktjagd und Reddit inspiriert ist. Die fertige Website ist hier verfügbar.

CloudFlare-Mitarbeiter, die das globale Netzwerk von Cloudflares nutzen, bietet unabhängig vom Benutzerstandort extrem niedrige Latenzleistung. Das Wrangler CLI -Tool vereinfacht das Erstellen, Hochladen und Veröffentlichen. In diesem Tutorial wird die "Router" -Stemplate verwendet, wodurch URL-basierte Routing ermöglicht wird. Der Quellcode ist auf Github [Link-to-Github-Repo] verfügbar.

Einrichten Ihrer Umgebung

Wrangler installieren:

 npm install -g @cloudflare/wrangler

Erstellen Sie ein neues Projekt mit der Router -Vorlage:

 wrangler generieren repo-hunt https://github.com/cloudflare/worker-template-router
CD Repo-Jagd

Die Router -Vorlage verwendet Webpack, wodurch die NPM -Module einbezogen werden können. Eine Router -Klasse übernimmt URL -Routing. Ein grundlegendes Beispiel:

 // index.js
const router = fordert ('./router');

AddEventListener ('Fetch', Ereignis => {
  Event.respectorwith (Handlrequest (Ereignis.Request));
});

Async -Funktion Handlersquest (Anfrage) {
  versuchen {
    const r = neuer Router ();
    R.Get ('/', () => Neue Antwort ("Hallo, Welt!"));
    const resp = warte R.Route (Anfrage);
    Rückkehr resp;
  } catch (err) {
    Neue Antwort zurückgeben (err);
  }
}

Die Arbeitnehmer reagieren auf fetch und geben eine Response zurück. In diesem Tutorial wird Routen für die Homepage ( / ), ein Einreichungsformular ( /post ) und die Einführung ( /repo ) ( /post) verwendet.

Routing und Vorlagen

Die Strecke der Homepage ( / ) macht eine Liste der eingereichten Repositorys. Wir beginnen mit einer einfachen HTML -Antwort:

 // index.js
const router = fordert ('./router');
const index = require ('./ Handler/Index');

// ... (Rest von index.js)

// Handler/Index.js
const headers = {'content-type': 'text/html'};
const handler = () => {
  Neue Antwort zurückgeben ("Hallo, Welt!", {Header});
};
module.exports = Handler;

Verwenden Sie wrangler preview um zu testen. Als nächstes werden wir eine komplexere Vorlage erstellen:

 // Handler/Index.js
const headers = {'content-type': 'text/html'};
const template = require ('../ semplates/index');

// ... (Rest von Handlern/Index.js)

// Vorlagen/index.js
const layout = fordert ('./ Layout');
const template = () => layout (`<h1 id="Hallo-Welt"> Hallo Welt!</h1> `);
module.exports = template;

// Vorlagen/layout.js
const layout = body => ` $ {Body} `;
module.exports = layout;

Dies verwendet eine Layout -Vorlage für ein konsistentes Styling (Bulma CSS ist enthalten).

Datenpersistenz mit Arbeitern KV

Die Arbeiter KV bieten einen Schlüsselwertgeschäft für Datenpersistenz. Wir speichern Repositories (Schlüssel: repos:${id} ) und tägliche Listen (Schlüssel: $date ). Hinweis: Die Arbeiter KV benötigen einen bezahlten Plan.

Grundlegende KV -Operationen:

 Repo_hunt.put ("mystring", "Hallo, Welt!"); // Einstellen eines Wertes
const string = warte repo_hunt.get ("mystring"); // einen Wert abrufen

Wir erstellen Klassen zum Verwalten von Repo- und Tagesdaten:

 // store/repo.js
const uUid = fordert ('uUid/v4');

Klasse Repo {
  // ... (Implementierung der Repo -Klasse)
}
module.exports = repo;

// store/day.js
const heute = () => neues Datum (). TolocaledateString ();

module.exports = {
  Hinzufügen: asynchrische Funktion (id) {// ...},
  getRepos: async function () {// ...}
};

Die Repo -Klasse übernimmt die Validierung und Beharrlichkeit. Day verwaltet tägliche Repository -Listen.

Umgang mit Benutzern

Mit einem Formular (GET /post ) können Benutzer Repositorys einreichen. Ein Post /repo -Handler verarbeitet Einsendungen:

 // Handler/create.js
const qs = fordert ('qs');
const repo = fordert ('../ store/repo');
const Day = fordert ('../ store/tag');

// ... (Erstellen Sie Handler -Implementierung)

Dadurch wird die qs -Bibliothek verwendet, um Formendaten zu analysieren, ein Repo -Objekt zu erstellen, es für KV zu speichern und seine ID zur täglichen Liste hinzugefügt.

Daten zur Homepage rendern

Die Homepage ruft nun Repository -Daten ab und rendert sie auf:

 // Handler/Index.js
// ... (aktualisierter Indexhandler)

// Vorlagen/index.js
// ... (Aktualisierte Vorlagenfunktion, um Repos zu rendern)

Die getRepos -Funktion des Day holt und sofort Repo -Objekte. Die Vorlage macht jedes Repository.

Einsatz

Beanspruchen eine Arbeiter.dev Subdomain:

 Wrangler Subdomain My-Subdomain

Bereitstellung der Anwendung:

 Wrangler Publish

Erstellen Sie einen KV -Namespace im CloudFlare -Dashboard und aktualisieren Sie wrangler.toml mit der Namespace -ID:

 [[KV-NamesPaces]]
binding = "repo_hunt"
id = "$ yournameSpacId"

Veröffentlichen Sie nach dem Hinzufügen des KV -Namespace zu wrangler.toml . Die Anwendung ist jetzt live!

Weiterentwicklung

Dieses Tutorial bietet eine Grundlage für eine serverlose Anwendung. Zukünftige Verbesserungen könnten Upvoting, Kommentare und ausgefeiltere Funktionen umfassen. Entdecken Sie die Dokumentation und die Vorlagengalerie der Arbeiter für weitere Entwicklungsideen.

Das obige ist der detaillierte Inhalt vonErstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-Mitarbeitern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!