PhotoStore App

はじめに

このチュートリアルでは、PhotoStore AppというReact Webアプリケーションを構築します。このアプリケーションでは、クライアントから画像のアップロードとダウンロードが可能です。また、以下の機能も備えています：

• すべてのログイン機能。
• アップロードされた画像を、サムネイル、リスト、フルサイズなどの異なるビューで表示できます。
• ダッシュボードの表示をGridまたはListビューに切り替えることができます。
• アップロードした画像を、アプリケーションにサインアップした他のユーザーと共有できます。
• 2つのダッシュボードが提供されます：
  • Your Gallery: 自分がアップロードした画像を表示します。
  • Shared Gallery: 他の登録ユーザーから共有された画像を表示します。
• 以前共有した画像に対するユーザーのアクセスを管理するオプションもあります。

アプリケーションのクライアント側は以下のようになります：

このアプリケーションのロジックは、以下のCatalystサービスとそれぞれのコンポーネントを使用してコーディングされています：

1. Catalyst Serverless:

   • AppSail: フロントエンドとクライアントコードをバンドルし、AppSailにデプロイしてアプリケーション全体をホストします。

2. Catalyst CloudScale:

   • Authentication: アプリケーションにエンドユーザーを追加します。認証要件の処理にはHosted Authenticationタイプを実装します。
   • Data Store: アプリケーション内の画像に関する各種詳細情報を保存します。
   • ZCQL: Data Storeへのデータの投稿と取得に使用します。
   • Stratus: アプリケーションからアップロードされる画像を保存します。

3. Catalyst Pipelines: 開発ライフサイクルを漏れなく管理しながら、GitHubリポジトリでプロジェクト全体をシームレスに維持します。さらに重要なのは、PipelinesでこのCatalystアプリケーションをデプロイすることで、プラットフォーム依存パッケージのSharpを使用して、アップロードされた画像をサムネイルに変換できることです。Pipelinesは、Linuxマシンで動作するCatalyst上でパッケージを使用してホストするために必要なすべての依存関係を処理します。

このアプリケーションの構築には、Catalyst WebコンソールとCatalystコマンドラインインターフェース（CLI）を使用します。

アプリケーションワークフロー

アプリケーションのワークフローは以下のとおりです：

• エンドユーザーがアプリケーションにサインアップします。
• クライアントで画像の表示、ダウンロード、またはアップロードを行えます。
• 画像の表示を選択した場合、デフォルトではサムネイルビューで表示されます。画像のコンテキスト情報を提供するための詳細はDataStoreで管理されます。
• ユーザーがクライアントから画像をアップロードすると、画像はStratusにアップロードされ、そのObject URLで参照されます。
• 新しくアップロードされた画像はサムネイルサイズで名前とともに表示され、クリックするとフルサイズで表示できます。
• さらに、アプリケーション開発サイクルに加えた変更は、Catalyst Pipelinesの助けにより、GitHubリポジトリ内のアプリケーションに自動的に反映されます。

デプロイフロー