メインコンテンツまでスキップ

Papplicaアプリケーションの構造

ヒント

Papplicaは、独立したに結合された部分で構成されており、このページの詳細は必ずしも厳密に従う必要はありません。

必要に応じて、アプリケーション構造の一部を簡単に置き換えて、ビジネスニーズに対応したり、既存のシステムと統合したりすることができます。

概要​

通常、プロダクション対応のアプリケーションは以下の部分で構成されます：

  • フロントエンド: ユーザーのブラウザに表示されるアプリケーションのユーザーインターフェース。 このアプリケーションはCDNまたは静的ファイルサーバーにホストされ、 バックエンドに対してAPIリクエストを行います。
  • バックエンド: アプリケーションを動かすためのサーバーサイドのコードで、 サーバー上で実行されます。
  • デプロイ: アプリケーションをサーバーやクラウドプロバイダーにデプロイし、 ユーザーがアクセスできるようにするプロセス。
  • データベース: アプリケーションのデータを保存するストレージシステムで、 バックエンドからアクセスされます。
  • 外部サービス: アプリケーションが依存する可能性のある追加サービス、例えば決済ゲートウェイ、 メールサービス、または分析サービスなど。
  • モニタリング: ログ、メトリクス、アラートを通じてアプリケーションのパフォーマンスと 健康状態を監視するツールやサービス。
  • CI/CDパイプライン: アプリケーションをビルド、テスト、デプロイする自動化された ワークフローで、変更を安全かつ迅速にプロダクションにデプロイします。

Papplicaは、これらの各部分に対してソリューションを提供するプロトタイプアプリケーションを 提供しており、必要に応じてそれぞれを置き換えたりカスタマイズしたりすることができます。

フロントエンド​

通常のPapplicaアプリケーションのフロントエンドは、ReactとTypeScriptを使用して構築されたシングルページアプリケーション（SPA）であり、迅速な開発とビルド時間を提供する最新のビルドツールであるViteを使用して構築されています。

このフロントエンドアプリケーションは、さらに複数の部分に分解することができます：

アプリケーションテンプレート​

Nodeblocksは、フロントエンドアプリケーションを指定するための標準化されたテンプレート形式を 提供しており、必要に応じてアプリケーションに共通するさまざまな設定やコンポーネントを定義できます。 これには以下が含まれます：

  • アプリケーション名と説明
  • ページおよびナビゲーションコンポーネントの設定
  • APIクライアントの設定
  • ロギング
  • 国際化
  • その他の外部サービスの設定

これらは、依存性注入に似た 方法を使用して、起動時にフロントエンドアプリケーションに注入されます。 テンプレートは提供されたインターフェースに従った設定のみを必要とするため、 インターフェースを拡張または実装することで、アプリケーションの内部ロジックの 任意の部分を簡単に置き換えたりカスタマイズしたりすることができます。

フロントエンドフレームワーク​

フロントエンドフレームワークは、アプリケーション間で共有される再利用可能なコンポーネントと デザインパターンのコレクションです。これは、NPMパッケージとして提供され、任意のReact アプリケーションにインストールして使用できます：@basaldev/blocks-frontend-framework。

このフレームワークには以下が含まれます：

  • ブロック: アプリケーションを構築するために使用される再利用可能なコンポーネント。
  • デザインシステム: アプリケーション全体で一貫した外観と操作性を確保するための デザインガイドラインとコンポーネントのセット。

ブロックはフロントエンドアプリケーションの構成要素であり、開発者が新機能や ページを構築するために使用します。たとえば、Loginはログインフォームを提供するブロックであり、 SideMenuUserInfoはサイドメニュー内で使用するユーザー情報を表示するブロックです。

具体的には、ブロックは一連の標準的なプロパティを持つReactコンポーネントであり、 テンプレート内のさまざまな標準的な場所に配置できます。これらのプロパティには、 ページのタイトルを変更するメソッド、他のブロックに関する情報を取得するメソッド、 およびナビゲーションが含まれます。この標準インターフェースを使用することで、 ブロックを簡単に交換したり、カスタムコンポーネントに置き換えたりすることができます。

ブロックは、アプリケーションの起動時にブロックに注入されるAPIクライアントを介してバックエンドから データを受け取ります。これにより、APIエンドポイントのハードコーディングが排除され、異なる バックエンドサービス間の切り替えが容易になります。

デザインシステムは、アプリケーション全体で一貫した外観と操作性を確保するための デザインガイドラインとコンポーネントのセットです。これには以下が含まれます：

  • タイポグラフィ、カラー、スペーシングのスタイル。これらはCSS変数として定義され、 実行時にカスタマイズ可能です。
  • ボタン、入力欄、カードなどの基本的なコンポーネント。
  • フォーム、モーダル、テーブルなどの複合コンポーネント。
  • ログインフォームやユーザープロファイルページなどのビジネスロジックコンポーネント。

一般的に、デザインシステムのコンポーネントはフレームワークによって完全に管理され、すべての状態は フレームワーク内のブロックによって管理されます。これにより、これらのコンポーネントも簡単に 入れ替えすることができます。換言すると、MVCアーキテクチャにおいて、デザインシステムはViewであり、 ブロックはControllerです。（ちなみにモデルは、フロントエンドSDKのAPIクライアントによって処理され、 ブロックに注入されます。詳細は以下を参照してください。）

フロントエンドSDK​

フロントエンドSDKは、フロントエンド技術に依存せずにアプリケーションを構築するためにBasalが 提供するユーティリティとクラスのセットです。Reactに特化したフレームワークとは異なり、SDKは Nodeblocksサービスと通信する任意の技術やスタックで使用できるように設計されています。

これは、任意のJavaScriptアプリケーションにインストールして使用できる NPMパッケージとして提供されます：@basaldev/blocks-frontend-sdk。

APIクライアントは、Nodeblocksが提供するバックエンドサービスとの通信を処理するクラスの セットです。これらはリクエストを行うためのシンプルなインターフェースを提供し、認証や エラーハンドリングなどを処理します。これらのクライアントにはセッション管理クラスが注入され、 基盤となるセッションロジックを置き換えることができます。

ファイルアップロード処理は、主にGoogle Cloud Storageへのファイルのアップロードおよび ダウンロードを処理するクラスの集まりです。

セッション管理は、クッキーやローカルストレージを含むユーザーセッションを処理するクラスの セットです。これらはAPIクライアントによって使用され、認証トークンやその他の セッションデータを管理します。

バックエンド​

通常のPapplicaアプリケーションのバックエンドは、アプリケーションのビジネスロジックと データアクセスを提供するNode.jsマイクロサービスのセットです。これらのサービスはNodeblocksを 使用して構築されており、ユーザー認証や製品管理などの一般的なユースケースに対応する既製の ライブラリを提供します。

これらは、Node.jsアプリケーションにインストールして使用できるNPMパッケージとして 提供されます：@basaldev/blocks-xxx-service。

詳細については、バックエンドSDKおよび Nodeblocksが提供するマイクロサービスのリストを 参照してください。

デプロイ​

Papplicaアプリケーションのバックエンドサービスのデプロイは、Nodeblocks Cloudによって 処理されます。これには、Node.jsアプリケーションのデプロイ、スケーリング、およびモニタリング のためのツールとサービスのセットが含まれます。詳細については、 Nodeblocks Cloudのドキュメントを ご覧ください。

Papplicaアプリケーションのフロントエンドは、通常、CDNや静的ファイルサーバー （Google Cloud Storage、AWS S3など）にデプロイされます。

データベース​

Papplicaアプリケーションのデータベースは、通常、MongoDBのようなNoSQLデータベースです。 Papplicaでは、完全に管理されたMongoDBデータベースを提供し、自動スケーリングや バックアップを行うMongoDB Atlasを推奨しています。 このサービスは、テキスト検索、地理空間クエリ、その他の高度な機能も提供しており、 Nodeblocksサービスがそれらを活用できます。

外部サービス​

アプリケーションによっては、支払いゲートウェイ、アップロードバケット、メールサービスなどの他の 外部サービスが必要になる場合があります。これらのサービスは、Nodeblocksが提供する バックエンドSDKと、バックエンドおよびフロントエンドサービスのカスタマイズを 使用してアプリケーションに統合できます。

たとえば、Geekleの支払いシステムはStripeと統合されており、 サブスクリプションや支払いの処理、支払いが失敗した場合のユーザーのロックアウト 処理などにカスタマイズされたロジックを使用しています。

モニタリング​

Papplicaアプリケーションのモニタリングは、以下のようなツールやサービスの組み合わせを 使用して実現できます：

  • Google Cloud Monitoring: アプリケーションのパフォーマンス（応答時間、エラーレートなど） のモニタリング用。
  • Sentry: アプリケーションのエラーや例外をモニタリングし、問題が発生したときにアラートや 通知を提供します。 これらは、Papplicaのプロトタイプで必要に応じてカスタマイズされたコードを使用して実装されており、 サンプルとして使用することも、必要に応じて削除することもできます。

CI/CDパイプライン​

PapplicaアプリケーションのCI/CDパイプラインは、Github Actionsによって提供されており、 アプリケーションのビルド、テスト、デプロイプロセスを自動化します。これには、テストの実行、 アプリケーションのビルド、および環境へのデプロイが含まれます。

警告

現在の時点では、Nodeblocks Cloudを介してデプロイされたバックエンドアプリケーションの CI/CDはサポートされていません。これは将来的に計画されている機能です。