モノレポのセットアップ

一部のチームはモノレポアプローチ、または共有ライブラリとコンポーネントのデプロイプロセスを簡素化するために複数のパッケージやコンポーネントを含む単一のリポジトリを選択します。モノレポなしでは、各パッケージを個別にデプロイし、パッケージのバージョンとパッケージ間の依存関係を追跡し、バージョンの互換性を確保する必要があります。これはパッケージの数が増えるにつれて、指数関数的に複雑になる可能性があります。モノレポを使用すると、すべてのパッケージと依存関係が単一のリポジトリ内に含まれます。

Amplify Gen 2は、NxやYarn workspacesなどのモノレポツールを使用したフルスタックビルドのモノレポワークフローをサポートしています。Gen 2でビルドする場合、共有ワークスペースにamplify/フォルダを作成することをお勧めします。このガイドでは以下の例を使用します。

├── apps/
│   ├── admin-dashboard/
│   │   ├── next.config.mjs
│   │   └── package.json
│   └── marketing-site/
│       ├── astro.config.mjs
│       └── package.json
├── packages/
│   └── my-shared-backend/
│       ├── amplify/
│       │   ├── auth/
│       │   │   └── resource.ts
│       │   ├── data/
│       │   │   └── resource.ts
│       │   └── backend.ts
│       |── package.json
        └── tsconfig.json
└── package.json

モノレポには若干異なるセットアップが必要です。3つのAmplifyアプリをデプロイします。

1. my-shared-backend
2. admin-dashboard
3. marketing-site

バックエンドアプリのデプロイ

最初のアプリmy-shared-backendは、バックエンドの変更を更新する唯一のアプリになります。他のアプリは、共有バックエンドを指すフロントエンドビルドのみを実行します。

1. まず、共有バックエンドAmplifyアプリをデプロイします。Gen 2では、バックエンドのみのCI/CDアプリをセットアップできるようになりました。Amplifyコンソールに移動して、新しいアプリを作成を選択します。

2. リポジトリを接続したら、モノレポプロジェクトを選択します。My app is a monorepoというチェックボックスをオンにして、amplifyバックエンドへのパスを入力します。

3. ビルド設定は自動的に検出されます。保存してデプロイします。

フロントエンドアプリのデプロイ

1. フロントエンドアプリの場合は、フロントエンドプロジェクトをAmplifyコンソールで個別に接続し、ビルドコマンドを次のように更新してください。

npx ampx generate outputs --branch main --app-id BACKEND-APP-ID

• バックエンドアプリケーションのApp IDを探すには、Amplifyコンソールに移動して、backend-appを選択します。概要ページでは、App IDはプロジェクト名の下に表示されます。

npx ampx generate outputs --branch main --app-id BACKEND-APP-ID

スキーマ型定義の共有

Amplify Dataを使用している場合、amplify/data/resource.tsファイルを指すtsconfig.jsonファイルにpathsエントリを追加して、フロントエンドアプリからスキーマ型定義に簡単にアクセスできるようにすることをお勧めします。

{
  "compilerOptions": {
    "paths": {
      "@/data-schema": ["./packages/my-shared-backend/amplify/data/resource"]
    }
  }
}

このパスからフロントエンドコードにSchema型をインポートすれば、APIコールのコード補完と強力な型付けが得られます。

import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/data-schema";

const client = generateClient<Schema>();

const createTodo = async () => {
  await client.models.Todo.create({
    content: window.prompt("Todo content?"),
    isDone: false,
  });
}