人々が写真やコメントを投稿できるシンプルな Web サイトを構築します。
3つのパートを構築していきます。
1.1 - フロントエンドクライアント
このプロジェクトは、HTML ユーザー インターフェイスを動的に構築することでブラウザを通じてユーザーと対話し、 gRPC WebおよびHttpClient を使用して独自のサーバーと通信します。
1.2 - フロントエンド用バックエンド (BFF)
このプロジェクトは、Blazor クライアント アプリケーションをホストし、提供します。また、呼び出しを REST および gRpc バックエンドに転送するリバース プロキシとしても機能します。
2.1 - 写真RESTサービス
2.2 - コメント gRPC サービス
これらのプロジェクトは、データをサーバーに保存し、http、json、protobuf を通じてクライアントのリクエストに応答する責任を負います。
このプロジェクトは認証部分を処理します。クライアント アプリケーションがサービスにアクセスするために使用する JWT トークンを発行します。
このチュートリアルの作成時点では、.NET Core 7.0 は Visual Studio 2022 でのみ使用できます。.NET Core 7.0 で作業するには、最新バージョンの Visual Studio 2022 をインストールすることをお勧めします。
最新の手順については、入門ドキュメントにアクセスしてください。
いくつかの簡単な手順を実行していきます。各ステップは 1 つのタスクに焦点を当て、前のステップの上に構築されます。最初は単純なプロジェクトから始めますが、途中でどんどん複雑になっていきます。たとえば、最初は認証と認可には焦点を当てません。後のステップで追加します。
Lab01 から開始して各 readme.md に従う場合は、各ラボを完了し、独自のコードを使用して次のラボに進むことができます。このリポジトリで提供されているStart
フォルダーやSolution
フォルダーを開く必要はありません。
Start
フォルダーは、各ステップの開始点です。Solution
フォルダーは各ステップの最終バージョンであり、各ラボの終了時にプロジェクトがどうなるかを確認する場合に備えて提供されます。実行する必要があるのは、試したいラボに対応するStart
フォルダー (最初から開始する場合はLab01/Start
) を開き、 readme.md
ファイルの指示に従うことです。完了したら、自分の作業とSolution
フォルダーに提供されているソリューションを自由に比較してください。
Labs
フォルダーを開きますLab01
サブフォルダーに移動します。Start
サブフォルダーに移動しますreadme.md
ファイルに含まれる指示に従って続行してください。Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln
を開きますアプリケーションを起動する
または
あなたは Web アプリケーションの構築に興味のある C# プログラマーだと思います。年齢によっては、すでに asp、aspx、mvc、および/または razor ページを使用したことがあり、今度は blazor を試してみたいと考えている場合があります。あなたはすでに HTML と CSS に精通しており、Angular、React、Vue などの JavaScript フレームワークを試したことがあるかもしれません。
Web の概念とテクノロジに関する大量のドキュメントをリンクするつもりなので、Web 開発者の専門家でなくても心配する必要はありません。途中ですべてを学ぶことができます。ただし、少なくとも C# に堪能である必要があります。そうしないと、このチュートリアルを理解するのが難しくなります。実際、これから記述するコードのほとんどは C# になります。 HTML も書きますが、それは簡単に学べるので問題ありません。
Duende.Bff.Yarp
フレームワークを使用した JWT Bearer トークンの取得と受け渡し