Bereitstellung einer serverlosen Jamstack -Site mit Redwoodjs, Fauna und Vercel

Dieses Tutorial führt Sie durch den Erstellen einer Jamstack -serverlosen Anwendung mit RedwoodJS, Faunadb und Vercel. Wir werden die GraphQL-API von Fauna als Backend für einen RedwoodJS-Frontend nutzen und mühelos mit dem Einsatz von Vercel einsetzt.

Erwarten Sie einen tiefen Eintauchen in Jamstack und serverlose Konzepte sowie praktische Erfahrung mit diesem leistungsstarken Tech -Stack.

Erstellen Sie Ihre Redwood -App

RedwoodJS ist ein Framework für serverlose Anwendungen, das React (Frontend), GraphQL (Daten) und Prisma (Datenbankabfragen) kombiniert. Während andere Frontend-Frameworks (wie Bison) existieren, bietet Redwoodjs ein ausgereiftes und etabliertes Ökosystem.

Wir werden Startervorlagen umgehen und aus einem einfachen Redwood -Projekt aufbauen, wodurch jede Komponente untersucht wird. Installieren Sie zunächst Garn und führen Sie diese Befehle aus:

 Garn erstellen Redwood-App ./CsStricks
CD CSStricks
Garn RW Dev

Ihr Frontend läuft auf localhost:8910 und das Backend auf localhost:8911 (mit einem graphiql -Spielplatz). Die Redwood -Landing -Seite sollte bei localhost:8910 erscheinen. (Hinweis: RedwoodJS Version 0.21.0 wird in diesem Beispiel verwendet. Wenden Sie sich an die Dokumentation für die neueste Version und Produktionsbereitschaft.)

Projektstruktur

RedwoodJS priorisiert die Konvention gegenüber der Konfiguration und bietet ein strukturiertes Projektlayout:

 <code>├── api │ ├── prisma │ │ ├── schema.prisma │ │ └── seeds.js │ └── src │ ├── functions │ │ └── graphql.js │ ├── graphql │ ├── lib │ │ └── db.js │ └── services └── web ├── public │ ├── favicon.png │ ├── README.md │ └── robots.txt └── src ├── components ├── layouts ├── pages │ ├── FatalErrorPage │ │ └── FatalErrorPage.js │ └── NotFoundPage │ └── NotFoundPage.js ├── index.css ├── index.html ├── index.js └── Routes.js</code>

Das Projekt ist in Verzeichnisse von web (Frontend) und api (Backend) unterteilt, die von Garnarbeitsbereichen verwaltet werden. Wir werden Prisma durch Faunadb ersetzen und das prisma -Verzeichnis und den Inhalt von db.js entfernen (aber die db.js -Datei beibehalten).

index.html

Die Datei index.html enthält den Root -DOM -Knoten (<div id="redwood-app"></div> ) wo die React -Anwendung gerendert wird. Redwoodjs, obwohl JamStack-orientiert, führt derzeit keine Vorrenderung wie Next.js oder Gatsby durch.

index.js

index.js rendert die Hauptanwendungskomponente mit ReactDOM.render() in das redwood-app -DOM-Element. Es verwendet RedwoodProvider für das Kontextmanagement und für die FatalErrorBoundary für Fehler.

Routes.js

Routes.js definiert das Routing der Anwendung mit dem Router von Redwood.

Seiten erstellen

Erstellen wir Seiten mit der Redwood CLI:

 Garn rw g Seite nach Hause /
Garn rw g Seite über

Dies generiert die erforderlichen Dateien für HomePage und AboutPage . Vereinfachen Sie diese Seiten durch Entfernen unnötiger Navigationsverbindungen.

Layouts

Erstellen Sie ein wiederverwendbares Layout für die Navigation:

 Garn RW G Layout Blog

Ändern Sie BlogLayout.js , um Navigationslinks zur HomePage und AboutPage einzuschließen<link> Komponenten. Importieren Sie BlogLayout in HomePage und AboutPage um die Navigation einzubeziehen.

Fauna -Schema -Definitionssprache (SDL)

Erstellen Sie sdl.gql mit dem folgenden Schema:

 Geben Sie Post {ein
  Titel: String!
  Körper: Schnur!
}

Geben Sie Abfrage ein {
  Beiträge: [Beitrag]
}

Laden Sie dieses Schema in Ihre Faunadb -Instanz hoch. Beachten Sie, dass Faunadb Vermittlertypen erstellt; Wir werden dies in unserem RedwoodJS -Schema berücksichtigen.

Redwoodjs SDL und Dienstleistungen

Erstellen Sie api/src/graphql/posts.sdl.js und spiegeln das Fauna -Schema, einschließlich der PostPage des Vermittlers, spiegeln. Erstellen Sie api/src/services/posts/posts.js um die Fauna GraphQL-API mithilfe von graphql-request abzufragen. Denken Sie daran, graphql-request und graphql im api -Verzeichnis zu installieren.

Fauna -Autorisierung

Konfigurieren Sie api/src/lib/db.js um Ihr Faunadb -Geheimnis in den Autorisierungsheader mit Umgebungsvariablen aufzunehmen.

Säenfaunadb

Verwenden Sie die Fauna -Shell, um Ihrer Datenbank einige Beispielbeiträge hinzuzufügen.

Zellen

Generieren Sie eine BlogPostsCell , um Beiträge abzurufen und anzuzeigen:

 Garn Rw generieren Zell -Blogposts

Ändern Sie BlogPostsCell.js , um die posts abzufragen und den Titel und den Körper jedes Beitrags zu rendern. BlogPostsCell in HomePage importieren.

Vercel -Bereitstellung

Verbinden Sie Ihr Projekt mit Vercel. Ändern Sie netlify.toml (falls vorhanden), um apiProxyPath auf "/api" festlegen. Fügen Sie Ihr Faunadb -Geheimnis den Umgebungsvariablen von Vercel hinzu. Vercels Build -Befehl funktioniert nahtlos mit Redwoodjs.

Ihre Bewerbung ist jetzt abgeschlossen! Es sind ein Live -Demo- und Github -Repository verfügbar (hier werden Links eingefügt).

Das obige ist der detaillierte Inhalt vonBereitstellung einer serverlosen Jamstack -Site mit Redwoodjs, Fauna und Vercel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!