Déploiement d'un site Jamstack sans serveur avec Redwoodjs, Faune et Vercel

Ce tutoriel vous guide dans la création d'une application sans serveur Jamstack à l'aide de Redwoodjs, Faunadb et Vercel. Nous tirons parti de l'API GraphQL de Fauna en tant que backend pour un frontend RedwoodJS, en déploiement sans effort avec le déploiement en un clic de Vercel.

Attendez-vous à une plongée profonde dans les concepts JamStack et sans serveur, ainsi qu'une expérience pratique en utilisant cette puissante pile technologique.

Construire votre application Redwood

RedwoodJS est un cadre pour les applications sans serveur, combinant React (frontend), GraphQL (données) et prisma (requêtes de base de données). Alors que d'autres cadres frontaux existent (comme le bison), RedwoodJS propose un écosystème mature et bien établi.

Nous contournerons les modèles de démarrage et nous construisons à partir d'un projet de séquoia de base, examinant chaque composant. Tout d'abord, installez le fil et exécutez ces commandes:

 fil Créer un Redwood-App ./CSStricks
CD CSStricks
fil rw dev

Votre frontend fonctionne sur localhost:8910 et le backend sur localhost:8911 (avec un terrain de jeu Graphiql). La page d'atterrissage du séquoia devrait apparaître à localhost:8910 . (Remarque: Redwoodjs La version 0.21.0 est utilisée dans cet exemple; consultez la documentation pour la dernière version et la préparation de la production.)

Structure du projet

RedwoodJS hiérarchise la convention sur la configuration, fournissant une disposition de projet structurée:

 <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>

Le projet est divisé en répertoires web (frontend) et api (backend), géré par les espaces de travail YARN. Nous remplacerons Prisma par Faunadb, en supprimant le répertoire prisma et le contenu de db.js (mais en gardant le fichier db.js ).

index.html

Le fichier index.html contient le nœud Root Dom (<div id="redwood-app"></div> ) où l'application React est rendue. Redwoodjs, bien que orienté Jamstack, ne pratiquait actuellement pas de pré-rendu comme Next.js ou Gatsby.

index.js

index.js rend le composant d'application principal dans l'élément DOM redwood-app à l'aide de ReactDOM.render() . Il utilise RedwoodProvider pour la gestion du contexte et FatalErrorBoundary pour la gestion des erreurs.

Routes.js

Routes.js définit le routage de l'application à l'aide du routeur de Redwood.

Création de pages

Créons des pages à l'aide de la CLI de séquoia:

 yarn rw g page home /
Page de fil RW G sur

Cela génère les fichiers nécessaires pour HomePage et AboutPage . Simplifiez ces pages en supprimant les liens de navigation inutiles.

Disposition

Créez une disposition réutilisable pour la navigation:

 Blog de mise en page RW G YARN

Modifier BlogLayout.js pour inclure des liens de navigation vers HomePage et AboutPage en utilisant<link> composants. Importez BlogLayout dans HomePage et AboutPage pour intégrer la navigation.

Langue de définition du schéma de la faune (SDL)

Créez sdl.gql avec le schéma suivant:

 Type Post {
  Titre: String!
  Corps: String!
}

Type Query {
  Posts: [Post]
}

Téléchargez ce schéma sur votre instance faunadb. Notez que FaunAdB crée des types intermédiaires; Nous expliquerons cela dans notre schéma RedwoodJS.

Redwoodjs SDL et services

Créez api/src/graphql/posts.sdl.js reflétant le schéma de la faune, y compris le type PostPage intermédiaire. Créez api/src/services/posts/posts.js pour interroger l'API Fauna GraphQL à l'aide de graphql-request . N'oubliez pas d'installer graphql-request et graphql dans le répertoire api .

Autorisation de la faune

Configurez api/src/lib/db.js pour inclure votre secret de Faunadb dans l'en-tête d'autorisation à l'aide de variables d'environnement.

Faunadb de semis

Utilisez le shell Fauna pour ajouter quelques exemples de messages à votre base de données.

Cellules

Générez un BlogPostsCell ​​pour récupérer et afficher les publications:

 YARN RW Générez des objets de blogs cellulaires

Modifiez BlogPostsCell.js pour interroger les posts et rendre le titre et le corps de chaque publication. Importez BlogPostsCell ​​dans HomePage .

Déploiement de Vercel

Connectez votre projet à Vercel. Modifiez netlify.toml (s'il existe) pour définir apiProxyPath sur "/ api". Ajoutez votre secret de faunadb aux variables environnementales de Vercel. La commande de construction de Vercel fonctionne de manière transparente avec Redwoodjs.

Votre application est maintenant terminée! Une démo en direct et un référentiel GitHub sont disponibles (les liens seraient insérés ici).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!