使用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中文網其他相關文章！