React、ServerLess、およびAirTableでJamstackに移行します

建物で学ぶ！このチュートリアルでは、NetLify ServerLess関数とAirTableを使用してReactアプリケーションを作成することにより、Jamstackアーキテクチャを示しています。 Jamstackは静的なホスティングを強調していますが、このプロジェクトは完全なCRUD機能を含む動的機能を示しています。

テクノロジーの選択

JavaScript、API、およびMarkupを表すJamstackは、既存のテクノロジーを新しい方法で活用しています。このチュートリアルのテクノロジースタックは、展開とホスティングの容易さを優先します。 NetLify関数は、AirTableでバックエンドCRUD操作を処理し、NetLifyでシームレスな展開を可能にします。 AirTableはデータベース管理を簡素化し、ユーザーフレンドリーなインターフェイスとJavaScript SDKを提供し、個別のデータベースホスティングと管理の必要性を排除します。

アプリケーションの概要

このアプリケーションは、オンラインコースを追跡し、個人的な学習キューのように振る舞います。ユーザーは、コースを追加、更新、マーク、マーク、およびコースを削除できます。

ソースコード：ReactおよびNetlify関数を使用して、安全な生産対応のJamstackアプリケーションの構築に関する新しいコースを含むオンラインコースを作成します。このコースでは、認証、エアテーブルデータストレージ、スタイルのコンポーネント、Netlify CIなどをカバーしています。詳細→

エアテーブルセットアップ

AirTableは、データベースに「ベース」を使用します。次の手順に従ってください：

1. 無料のAirTableアカウントを作成します。
2. 新しいベースを作成します（私は私の「Jamstack Demos」と名付けられました）。
3. これらの列で「コース」という名前のテーブルを作成します。
   • name （シングルラインテキスト）
   • link （シングルラインテキスト）
   • tags （複数の選択 - 「ノード」、「React」、「Jamstack」、「JavaScript」などのタグを追加）
   • purchased （チェックボックス）
4. サンプルコースデータを追加します。

AirTable資格情報の取得

コーディングする前に、これらのAirTable資格情報を収集します。

1. APIキー： AirTableアカウントの概要ページにあります。
2. ベースID：ベースの詳細内にあるAirTable APIページにあります。
3. テーブル名：（例：「コース」）

プロジェクトのセットアップ

スタータープロジェクトはGitHubで入手できます。次の手順に従ってください：

1. リポジトリをフォークします。
2. フォークリポジトリをローカルにクローンします。
3. starterブランチ（ git checkout starter ）をチェックアウトします。

このプロジェクトにはcreate-react-app構造、サーバーレス関数のfunctionsディレクトリ、 netlify.toml構成ファイルが含まれます。 dotenvパッケージをインストールします。

 npmインストールdotenv

AirTable資格情報を使用して、プロジェクトルートに.envファイルを作成します。

 <code>AIRTABLE_API_KEY=<your_api_key> AIRTABLE_BASE_ID=<your_base_id> AIRTABLE_TABLE_NAME=<your_table_name></your_table_name></your_base_id></your_api_key></code>

サーバーレス関数

Netlify関数は/functionsディレクトリ内のJavaScriptファイルです。 courses.jsファイルは、メインAPIエンドポイントとして機能します。 HTTPメソッドに基づいて、ヘルパー関数（ getCourses 、 createCourse 、 updateCourse 、 deleteCourse ）を使用します。

 exports.handler = async（event）=> {
  if（event.httpmethod === 'get'）{
    return await getCourses（event）;
  } // ...その他のHTTPメソッド
};

airtable.jsファイルは、AirTable接続を構成します。

 require（ 'dotenv'）。config（）;
var airtable = require（ 'airtable'）;
// ...エアテーブルベースとテーブルのセットアップ...

CRUD操作

ヘルパー関数はAirTableと相互作用します。

• getCourses.js ： table.select().firstPage()を使用してコースを取得し、エラーを処理し、応答をフォーマットします。
• createCourse.js ： table.create()を使用して新しいコースを作成します。
• updateCourse.js ： table.update()を使用してコースを更新します。
• deleteCourse.js ： table.destroy()を使用してコースを削除します。

テスト： netlify devを使用して、関数をローカルに実行します。郵便配達員や不眠症などのツールを使用したエンドポイントをテストします。

フロントエンドを反応します

Reactアプリケーションは、サーバーレス関数と相互作用します。

• App.js ： loadCourses fetch('/api/courses')を使用してコースをフェッチします。
• CourseForm.js ： submitCourse 、新しいコースを作成するために投稿リクエストを送信します。
• Course.js ： markCoursePurchased送信プットリクエスト、 deleteCourse削除リクエストを送信します。

Netlifyへの展開

GitHubリポジトリを接続して、Netlifyに展開します。特定：

• ビルドコマンド： npm run build
• ディレクトリの公開： build
• .envファイルから環境変数を追加します。

結論

このチュートリアルは、Jamstackアーキテクチャのシンプルさとパワーを示しています。 React、NetlifyFunctions、およびAirTableの組み合わせは、堅牢で簡単に展開できるフルスタックアプリケーションを提供します。他のJamstackサービスとテクノロジーを調べて、開発ワークフローをさらに強化してください。

以上がReact、ServerLess、およびAirTableでJamstackに移行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。