使用Redwoodjs，Fauna和Vercel部署无服务的Jamstack网站

该教程通过使用Redwoodjs，Faunadb和Vercel构建Jamstack无服务器应用程序来指导您。我们将利用Fauna的GraphQl API作为Redwoodjs Frontend的后端，并在Vercel的一键式部署中毫不费力地部署。

期望使用此功能强大的技术堆栈深入了解Jamstack和无服务的概念。

构建您的红木应用程序

Redwoodjs是无服务器应用程序的框架，将React（Frontend），GraphQl（数据）和Prisma（数据库查询）组合在一起。尽管存在其他前端框架（例如野牛），但Redwoodjs提供了一个成熟且建立了良好的生态系统。

我们将绕过起动模板并从基本的Redwood项目构建，以检查每个组件。首先，安装纱线并运行以下命令：

纱线创建Redwood-App ./csstricks
CD CSSTRICKS
纱RW开发

您的前端在localhost:8910 ，后端在localhost:8911 （带有GraphIQL游乐场）上运行。红木着陆页应出现在localhost:8910 。 （注意：此示例中使用了Redwoodjs版本0.21.0；请咨询文档以获取最新版本和生产准备。）

项目结构

Redwoodjs优先考虑约定而不是配置，提供了结构化的项目布局：

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

该项目分为由纱线工作区管理的web （前端）和api （后端）目录。我们将用Faunadb替换Prisma，删除prisma目录和db.js的内容（但保留db.js文件）。

index.html

index.html文件包含root dom节点（<div id="redwood-app"></div> ）渲染React应用程序的位置。 Redwoodjs虽然以Jamstack为导向，但目前却没有像Next.js或Gatsby那样执行预读。

index.js

index.js使用ReactDOM.render()将主要应用程序组件呈现到redwood-app元素中。它利用RedwoodProvider进行上下文管理和FatalErrorBoundary进行错误处理。

Routes.js

Routes.js使用Redwood的路由器定义了应用程序的路由。

创建页面

让我们使用Redwood CLI创建页面：

纱线RW G页面家庭 /
纱线RW G页面

这为HomePage和AboutPage生成必要的文件。通过删除不必要的导航链接来简化这些页面。

布局

为导航创建可重复使用的布局：

纱线RW G布局博客

修改BlogLayout.js以包括AboutPage HomePage的导航链接，并使用<link>成分。将BlogLayout导入到HomePage和AboutPage ，以合并导航。

动物模式定义语言（SDL）

使用以下模式创建sdl.gql ：

类型post {
  标题：字符串！
  身体：绳子！
}

类型查询{
  帖子：[帖子]
}

将此架构上传到您的Faunadb实例。请注意，Faunadb创建了中介类型；我们将在Redwoodjs模式中解释这一点。

Redwoodjs SDL和服务

创建api/src/graphql/posts.sdl.js镜像动物架模式，包括中介类型的PostPage 。创建api/src/services/posts/posts.js使用graphql-request查询FAUNA GraphQl API。切记在api目录中安装graphql-request和graphql 。

动物区系授权

使用环境变量，将api/src/lib/db.js配置为在授权标题中包含您的FaunAdb Secret。

播种Faunadb

使用Fauna Shell将一些示例帖子添加到您的数据库中。

细胞

生成BlogPostsCell来获取和显示帖子：

纱线RW生成细胞博客文章

修改BlogPostsCell.js查询posts并渲染每个帖子的标题和正文。将BlogPostsCell导入到HomePage中。

动词部署

将您的项目连接到Vercel。修改netlify.toml （如果存在）将apiProxyPath设置为“/api”。将您的Faunadb秘密添加到Vercel的环境变量中。 Vercel的Build Command与Redwoodjs无缝地工作。

您的申请已完成！可以使用实时演示和GitHub存储库（链接将在此处插入）。

以上是使用Redwoodjs，Fauna和Vercel部署无服务的Jamstack网站的详细内容。更多信息请关注PHP中文网其他相关文章！