AWS Amplify の次世代フルスタック開発体験の紹介

AWS Amplify は、フロントエンド開発者が既存の TypeScript や JavaScript のスキルでフルスタックアプリを素早く構築しデプロイできるようにする、新しいコードファーストの開発者エクスペリエンスのパブリックプレビューを発表しました。このツールの第一世代は、CLI/コンソールベースのインタラクティブなワークフローを使用してバックエンドを作成する、ツールファーストのエクスペリエンスを提供していました。第 2 世代ではコードファーストの開発者体験に移行し、開発者はデータモデル、ビジネスロジック、認証ルールなどのアプリ要件を TypeScript で簡潔に表現できるようになります。必要なクラウドインフラは、宣言されたアプリコードに基づいて自動的にデプロイされるため、開発者は AWS サービスを明示的に設定する必要がありません。

このコードファーストのアプローチへのシフトは、開発者コミュニティからのフィードバックを収集した結果です。本記事では、このフィードバックを共有し、より柔軟な盛業、より速いイテレーション、より良いチームワークフローを提供する、アプリのバックエンドを構築するためのコードファーストな開発者体験 (Gen 2) を提供するために、どのように触発されたかを掘り下げます。

もしあなたが実践的に学びたい場合は、クイックスタートガイドで始めてから、本記事に戻ってきてください。

AWS Amplify の進化

第 2 世代を紹介する前に、私たちがどのようにしてここまで来たかを説明します。

2017 年 11 月（豆知識：Amplify は 6 年前の今日 (2017 年 11 月 21 日) が誕生日で、6 歳になりました！）、私たちは AWS Amplify を立ち上げました。当初はオープンソースの JavaScript ライブラリで、クラウドに接続されたモバイルアプリやウェブアプリを簡単に開発できるようにしました。
2018 年 8 月には、開発者がアプリのバックエンドを構築し、ウェブアプリやモバイルアプリに統合するためのコマンドラインツールである Amplify CLI を発表しました。
2020 年 12 月には、開発者がバックエンドを構築するためのビジュアルインターフェースを提供する Amplify Studio (旧称 Admin UI) を発表しました。そして、2021 年 12 月には、Figma-to-React 機能とフォーム生成機能によって、Amplify Studio の体験に UI 構築を追加しました。

スタートアップから大企業に至るまで、何十万ものお客様が、Web およびモバイルアプリの構築、デプロイ、ホスティングに Amplify を利用してきました。これらの企業は、Web およびモバイルアプリケーションの構築、デプロイ、ホスティングにおけるフルスタック開発の取り組みを大幅に加速させています。

お客様からのフィードバック

私たちは X (旧: Twitter), GitHub, Discord チャンネルを通じて、1:1 またはオンラインで多くのお客様からフィードバックをいただきました。

お客様からは、Amplify CLI と Studio の抽象化された機能が、インチキをしているような感覚で、とても速く実行できるところが気に入っていると言っていただいています。これは通常、根底にある「マジック」をより深く掘り下げることへの強い関心と結びついています。お客様は、amplify add auth やビジュアルデータモデリングのような直感的な CLI コマンドから、コードリポジトリ内の AWS CloudFormation JSON や設定ファイルの生成への移行について、より深い理解を求めています。これは、バックエンドを変更して、Amplify が現在サポートしていない機能を実装しようとするときに、特に重要になります。
ローカルで開発している間、お客様は変更を検証するためのより速いフィードバックループを求めています。お客様はまた、チームメンバーの環境に干渉するリスクなしに、アプリケーションスタックについてイテレーションを回すことができることを望んでいます。
お客様は、Amplify CLI のビルトイン環境機能と、Amplify CI/CD ワークフローとの密接な統合が、Amplify を選んだ理由だと言っています。お客様は、本番環境へのロールアウトを簡素化し、トランクベースのワークフローを採用するためのワークフローの改善を望んでいます。
お客様の多くは AWS 初学者であり、一貫してフルスタックアプリケーション開発のために Amplify が提供している機能をどれほど評価しているかを私たちに共有しています。お客様はアプリケーション開発を始めるときに、様々な Amplify ツール (例えば、Amplify Console, Hosting, Studio、CLI) が、フルスタックアプリケーションの構築とデプロイのニーズを達成するためにどのように組み合わされているかを理解するのに時間がかかると言っています。

ソリューション

このフィードバックをまとめると、ローカルでの開発体験からチームコラボレーションまで、エンドツーエンドの開発者体験を再構築する必要があることがわかりました。私たちの目標は、開発者がゼロから始めてデプロイされたアプリケーションを素早くできるようにすること、MVP から本番環境に移行する際に複雑な機能セットをサポートすること、幅広いチームワークフローをサポートすることなど、既存の Amplify ツールの強みを維持することでした。さらに、お客様は次のようなことを望んでいます。

バックエンドの生成方法の透明性を高め、ローカル開発時に実装のカスタマイズや問題のデバッグを行いたい。
より素早くイテレーションを回し、ローカル開発中にチームメンバーの環境に干渉することなく変更を検証したい。
下位環境から上位環境へコード変更をマージする際、本番ロールアウトを確実に行いたい。また、チームの運用方法を反映したデプロイメント・ワークフローにより、チームの希望に基づいてコードを柔軟に整理したい。
Amplify と AWS にオンボーディングする新規開発者が、すでに使い慣れたツール (TypeScript と Git) を使って作業を進められるよう、コンセプト数を削減したい。デプロイされたクラウドリソースをビルトインで管理したい。

これらのリクエストに応えるため、ローカル開発とチームコラボレーションを改善する多くの新機能を導入します。

1. CDK L3 コンストラクトでレイヤー化された TypeScript ファーストの Data と Auth 用の @aws-amplify/backend ライブラリ

AWS Cloud Development Kit (AWS CDK) を使って構築された新しいライブラリを発表します。TypeScript によって、開発者はバックエンドを記述する際に、コード補完、インテリセンス、インラインドキュメントを見ることができます。特にデータに関しては、Gen 1 の schema.graphql データモデリングエクスペリエンスの完全に型付けされたバージョンを導入しました。強力な型付けにより、開発者はデータモデルを構築する際に検証エラーをキャッチすることができます。バックエンドのコードに変更があった場合、即座に同じ場所にあるフロントエンドのコードに型エラーが反映されます。

2. ファイルベースの規約

TypeScript ライブラリとファイルベースの規約を組み合わせることで、開発者はプロジェクト構造に最小限のフットプリントでフルスタックアプリの構築を開始できます。ファイルベースの規約は、開発者がバックエンドを記述する際の透明性と予測可能性を提供します。ユースケースごとにリソースを個別のファイルにグループ化することで、開発者は共通のリソース定義がどこにあるかを正確に把握することができます。

3. 開発者ごとのクラウドサンドボックス環境

チーム内のすべての開発者は、作業するアプリごとに自分の開発者サンドボックス環境を得ることができます。サンドボックスはマシン上でローカルに実行され (localhost サーバーに似ています)、Amplify プロジェクトの変更を監視することが出来ます。保存されたコード変更はすべて自動的に同期され、ローカル環境からクラウドにデプロイされる。サンドボックスのデプロイは、より速い反復のために最適化されています。私たちは、一般的な変更（データベーススキーマ、リゾルバコード、関数コードなど）のデプロイ時間を数分から数秒に短縮しました。

4. 統合管理コンソール

Amplify Gen2 コンソールは、Amplify Studio と Amplify Hosting の開発者体験を統合し、お客様がビルド、ホスティング設定 (カスタムドメインなど)、デプロイ済みリソース（データブラウザやユーザー管理など）、環境変数やシークレットを管理するための単一の場所を提供します。

5. フルスタックの Git ブランチ

Amplify はフルスタックのブランチデプロイメントを提供し、フィーチャーブランチからのインフラストラクチャやアプリケーションコードの変更を自動的にデプロイできるようになりました。すべてのチーム環境が Git ブランチと 1 対 1 でマッピングされるため、Amplify でブランチをデプロイする際に開発者が学ぶ必要のある概念数が減ります。

6. AWS CDK によるバックエンドの拡張

私たちのバックエンド構築の経験全体が AWS Cloud Development Kit (AWS CDK) L3コンストラクトにレイヤー化されているため、AWS サービスを利用したいお客様は、プロジェクト内で AWS CDK L1 または L2 コードをインラインで記述するだけで利用することができます。例えば、Amazon Location Service をバックエンドに追加したいお客様は、custom/geo/resource.ts ファイルを追加し、CDK コードをインラインで使用することができます。

7. データに対するフォームの生成

開発者は、ターミナルで 1 つのコマンド (amplify generate forms) を実行するだけで、データモデルに対してReact フォームを生成することが出来ます。フォームは完全にカスタマイズ可能で、ライフサイクル管理ができ、コード内のカスタム検証ロジックをサポートします。

8. モノレポとマルチレポのサポート

Amplify の CI/CD は、Nx やYarn Workspaces のようなツールを含め、モノレポでコードを管理するチームとうまく機能します。また、バックエンドのみの CI/CD もサポートしており、フロントエンドとバックエンドのチームが別々にリポジトリを管理することができます。

9. カスタムパイプライン

Gen 2 はカスタムデプロイメントパイプラインを統合する機能を提供し、GitHub Actions, AWS CodePipeline、または Amazon CodeCatalyst を使用して、リージョンまたは AWS アカウント間でフルスタックアプリをデプロイできます。これにより、トランクベースのデプロイメントをステージやマルチアカウントで設定できるようになります。カスタムパイプラインの詳細については、ドキュメントを参照してください。

10. シークレットの一元管理

Gen 2 は、すべてのフルスタックブランチに対して、シークレットと環境変数の集中管理を提供します。シークレットを使うことで、ソーシャルサインインキー、関数環境変数、関数シークレット、その他アプリケーションに必要な機密データのような環境固有の値を、環境間で安全に設定することができます。Amplify コンソールでシークレットを設定し、次の例のようにコードで使用することができます。

Next Step

第 1 世代から第 2 世代への移行をお考えのお客様には、第 1 世代から第 2 世代へ手動で移行する方法を説明した移行ガイドをパブリックプレビュー中に提供する予定です。一般提供が開始され次第、移行を加速させるツールを提供する予定です。

Amplify Gen 2 のビジョンは、開発者からのフィードバックに直接触発されたものです。バックエンドのコードの透明性と制御性を高めたいという要望がありましたので、TypeScript ファーストのアプローチでそれを実現しました。より迅速なフィードバックループを求めていたので、保存のたびにコード変更を同期するクラウドサンドボックスデプロイメントを構築しました。チームのために柔軟なデプロイメントワークフローが必要だったので、Amplify はフルスタックの Git ブランチとカスタムパイプラインサポートを提供しました。そして、すべてを一元管理する場所をご希望でしたが、新しい統合コンソールがそれを提供します。

一般提供に向けて、皆様からのフィードバックをお待ちしています。今後注力する分野としては、ストレージや機能などの追加ユースケースをカバーするためのバックエンド機能の拡張、ローカルサンドボックスエクスペリエンスの改善、Gen 1 のお客様向けの移行ツールの構築などがあります。

Amplify Gen 2 を使い始めるには、クイックスタートチュートリアルをお試しください。

本記事は「Introducing the Next Generation of AWS Amplify’s Fullstack Development Experience」を翻訳したものです。

Amazon Web Services ブログ