Redwoodjs、Fauna、およびVercelを使用してサーバーレスJamstackサイトを展開する

このチュートリアルは、RedwoodJS、Faunadb、およびVercelを使用してJamstack ServerLessアプリケーションを構築することをガイドします。 FaunaのGraphQL APIをRedwoodJSフロントエンドのバックエンドとして活用し、Vercelのワンクリック展開で簡単に展開します。

この強力な技術スタックを使用した実際の経験とともに、Jamstackやサーバーレスの概念に深く掘り下げることを期待してください。

レッドウッドアプリを構築します

RedwoodJSは、React（FrontEnd）、GraphQL（データ）、およびPrisma（データベースクエリ）を組み合わせたサーバーレスアプリケーションのフレームワークです。他のフロントエンドフレームワーク（Bisonなど）が存在しますが、RedwoodJSは成熟した確立されたエコシステムを提供します。

スターターテンプレートをバイパスし、基本的なRedwoodプロジェクトから構築して、各コンポーネントを調べます。まず、糸をインストールして、これらのコマンドを実行します。

糸はRedwood-App ./CSStricksを作成します
CD csstricks
Yarn RW Dev

フロントエンドはlocalhost:8910で実行され、 localhost:8911 （GraphiQl Playgroundを使用）でバックエンドを実行します。 Redwoodランディングページは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>

このプロジェクトは、YARNワークスペースで管理されているweb （FrontEnd）およびapi （BackEnd）ディレクトリに分割されています。 PrismaをFaunadbに置き換え、 prismaディレクトリとdb.jsの内容を削除します（ただし、 db.jsファイルを保持します）。

index.html

index.htmlファイルには、ルートdomノードが含まれています（<div id="redwood-app"></div> ）Reactアプリケーションがレンダリングされる場合。 Redwoodjsは、Jamstack指向ですが、現在、Next.jsやGatsbyのようにプレレンダリングを実行していません。

index.js

index.js ReactDOM.render()を使用して、メインアプリケーションコンポーネントをredwood-app Dom Elementにレンダリングします。コンテキスト管理にはRedwoodProviderを使用し、エラー処理にはFatalErrorBoundary使用します。

Routes.js

Routes.js 、Redwoodのルーターを使用してアプリケーションのルーティングを定義します。

ページの作成

Redwood CLIを使用してページを作成しましょう。

 Yarn RW Gページホーム /
YARN RW Gページについて

これにより、 HomePageとAboutPageに必要なファイルが生成されます。不要なナビゲーションリンクを削除して、これらのページを簡素化します。

レイアウト

ナビゲーション用の再利用可能なレイアウトを作成します。

 Yarn 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を含むFAUNAスキーマをミラーリングします。 api/src/services/posts/posts.jsを作成して、 graphql-requestを使用してFauna GraphQL APIを照会します。 apiディレクトリにgraphql-requestとgraphqlをインストールすることを忘れないでください。

動物相許可

api/src/lib/db.jsを構成して、環境変数を使用して承認ヘッダーにFAUNADBの秘密を含めるようにします。

Seeding Faunadb

ファウナシェルを使用して、データベースにサンプル投稿を追加します。

セル

BlogPostsCellを生成して、投稿して表示します。

 YARN RWはセルブログ投稿を生成します

BlogPostsCell.jsを変更してpostsを照会し、各投稿のタイトルとボディをレンダリングします。 BlogPostsCellをHomePageにインポートします。

Vercel Deployment

プロジェクトをVercelに接続します。 netlify.toml （存在する場合）を変更して、 apiProxyPath 「/api」に設定します。 vercelの環境変数にfaunadbの秘密を追加します。 Vercelのビルドコマンドは、Redwoodjsでシームレスに機能します。

あなたのアプリケーションが完了しました！ライブデモとGitHubリポジトリが利用可能です（リンクがここに挿入されます）。

以上がRedwoodjs、Fauna、およびVercelを使用してサーバーレスJamstackサイトを展開するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。