SaaS製品のための最適なテックスタック構築方法
By Simon Høiberg · 2022-01-31
この動画では、SaaS製品のために考える最適なテックスタックについて解説します。マネージドクラウドインフラストラクチャの使用や既製のUIライブラリの活用など、重要なポイントをご紹介します。
SaaS製品のための最適なテックスタックの構築
- この動画では、SaaS製品のために考える最適なテックスタックについて解説します。
- 最適なテックスタックには、マネージドクラウドインフラストラクチャの使用、デザインをゼロから行う必要のない既製のUIライブラリの使用が含まれます。
- このテックスタックは完全にサーバーレスであり、クラウドファンクションと管理されたデータベースを使用します。
- AWS上でこのテックスタックを構築し、Pulumiというツールを使用してインフラストラクチャを設定します。
- DynamoDBを使用してデータベースを構築し、スキーマレスな構造を活用します。この動画では、実際にセットアップを行う方法も紹介されます。

SaaS製品のための最適なテックスタックの構築
バックエンドのセットアップ
- バックエンドでは、GraphQLを利用するためにAppSyncとCognitoを使います。
- AppSyncは、GraphQLを簡単に利用できるサービスで、サーバーのランニングは不要です。
- Cognitoはユーザー認証を管理しており、複雑な認証処理を簡単に扱うことができます。
- Amplifyは、バックエンドとフロントエンドを連携するためのCLIツールであり、Amplifyホスティングサービスも利用します。
- また、フロントエンドの構築にはReactとNext.jsを使用し、Chakra UIというUIライブラリを採用します。
- バックエンドでは、Apollo Clientを利用してGraphQL APIからデータをリクエストし、Amplifyを使用してユーザー認証を処理します。
- さらに、インフラストラクチャのセットアップにはPulumiを使用し、GitHub Actionsを使用して継続的デプロイを行います。
- 全てのスタックをTypescriptで構築することで、一貫した言語環境を実現し、最初の長期間は無料で利用可能です。

バックエンドのセットアップ
AWSでのサーバーレスアプリケーションのセットアップ
- Pulumiを使用して、AWS上でサーバーレスアプリケーションをセットアップする手順について解説しています。
- まず、Pulumiのウェブサイトにアクセスし、新しいプロジェクトを作成します。
- 次に、DynamoDBテーブルのセットアップやAppSyncの構築、Lambda関数の作成など、AWSリソースの設定手順が詳細に説明されています。
- Pulumiの使い方やAWS上でのサーバーレスアプリケーション構築の手順がわかりやすく解説されています。

AWSでのサーバーレスアプリケーションのセットアップ
バックエンドの設定
- ユーザープール、ユーザープールクライアント、アイデンティティプールの3つのコンポーネントが必要
- ユーザープールでは、パスワードの要件やアカウントの回復方法などの設定を行う
- ユーザープールクライアントも同様の設定を行い、アイデンティティプールでは認証されたユーザーがアクセスを許可されるリソースを定義
- AWSのコマンドを使用してクラウド上にバックエンドをセットアップし、テーブルやスキーマなどが確認可能

バックエンドの設定
AmplifyとApollo Clientの設定
- Eメールで送られてきた確認コードを入力します。
- サインイン後にユーザーがリダイレクトされるホームページがあります。
- Chakra UIを使用しているため、Chakra Templatesのサイトにアクセスします。
- Chakra UIをベースにした素晴らしいテンプレートが用意されています。
- Formsの認証ページに移動し、簡単にページを作成します。
- Amplifyのauthモジュールを使用して認証を行います。
- Apollo ClientをAmplifyと設定するために、Apollo Linkを使用してカスタムfetch関数を作成します。
- これにより、JWTトークンをGraphQLエンドポイントに送信できます。
- 新規サインアップ後に確認コードのEメールが送信されます。
- サインインしてアプリを構築することができます。
- GraphQLフィールドを追加し、リゾルバを設定することができます。
- Paloomiを使用してスタック全体を1時間以内に立ち上 げることができます。
- このテンプレートは実際に使用され、オープンソースで公開されています。
- 他のビデオではマーケティングや財務、テックビジネスについても解説しています。

AmplifyとApollo Clientの設定
Conclusion:
この動画では、SaaS製品のための最適なテックスタック構築に役立つ情報が満載です。テックスタックのセットアップからバックエンドの設定、AWS上でのサーバーレスアプリケーションのセットアップまで、詳細な手順と解説をご覧いただけます。