Amazon Web Services ブログ

新機能 – AWS Amplify Admin UI: アプリケーションのバックエンド開発を支援し、クラウドの経験を必要としない管理ツール

この記事は、New AWS Amplify Admin UI Helps You Develop App Backends, No Cloud Experience Requiredを翻訳したものです。

2018年にAWS Amplifyをリリースしてから、ウェブのフロントエンドとモバイルアプリケーションの開発者の開発とクラウド環境へのデプロイを支援してきました。時代の最先端を行き、顧客にイノベーションを提供するためにもプロダクトは機能を素早く届ける必要があります。しかし、クラウド、AWSの基本的な操作に慣れていない場合は、開発者・非開発者に関わらず学習やトレーニングが必要となります。この学習コストは、設計や実装、意思判断などプロセス全体の速度の低下を招きます。

本日、AWS AmplifyはチームメンバーがAWSアカウントを必要とせずにAWSの利用を可能とする新機能Admin UIをリリースしました（AWSアカウントは、最初のデプロイでのみ必要となります）。

Admin UIは、データベーステーブルのモデリング、認可認証機能の追加、アプリケーションのコンテンツ・管理者・管理者グループの管理を行うシンプルで強力なツールを提供します。また、アプリケーションのユーザーや、ユーザーによって作成されたコンテンツの管理を行う機能も提供します。Admin UIは、バックエンドやインフラストラクチャではなくデータモデルに焦点を当てています。全てのバックエンドのリソースは、チームのリポジトリで管理可能なInfrastructure as Code（IaC）のテンプレートを生成します。また、このリソースはAWS Amplifyの継続的デプロイのワークフローと統合されており、異なる環境（environment）ごとに管理が可能となっています。

新機能: AWS Amplify Admin UIを使った例のご紹介

あなたは、地元にあるレストランのウェブサイトを開発しているフロントエンド開発者であると想像してみてください。レストランのオーナーは、日替わりメニューを掲載できるようなウェブサイトで、毎日ウェブサイト上のコンテンツを簡単に更新したいと考えています。

この要求を満たすシステムの実装方法は多くあります。例えば、サーバーを構築し、CMSをインストールし、レストランのオーナーが日替わりメニューの更新を行うための機能を実装することができます。しかし、この要求を満たすためだけにサーバーを構築するのは、過剰に設備投資を行うことになります。他の実装方法として、サーバーレスのサービスを使用して自分でCMSを構築することもできますが、開発が複雑になり、より多くの時間が開発をするのに必要となります。

AWS Amplifyの新機能Admin UIを活用することで、既存のAWSのマネージドサービスを活用しながらバックエンドを素早く構築することができます。また、アプリケーションのユーザーとコンテンツの管理を行う機能も提供します。

Admin UIを利用するために、最初にAWS Console内のAWS Amplifyの管理画面にてアプリケーションのバックエンド（backend）を作成してください。これにより、AWS Amplifyはstagingと呼ばれるバックエンドの環境（environment）を作成します。バックエンドの作成が完了したら、早速Admin UIを開いてみましょう。AWSの利用経験がなく、AWSアカウントを持っていない開発者を招待したい場合は、この段階でAdmin UIへのアクセス権限を付与することができます。今回の例では、あなた一人で全ての開発を行う想定とし、管理者の追加は行わないこととします。

Amplify Admin UIを開く

Admin UIでは、アプリケーションの開発者がバックエンドを構成するために必要な開発ツールと、コンテンツの管理者がアプリケーションのコンテンツを管理するための機能が含まれています。

Admin UIのサイドバー（下記の画像参照）にて、アプリケーションの設定を行うための様々なオプションを確認することができます。

レストランのウェブサイト構築を行う最初のステップとして、日替わりメニューのためのデータモデルを作成してみましょう。次の3ステップを実行してみましょう

  1. Dataタブに移動
  2. Menuという名前でデータモデルを作成
  3. 必要なデータ項目を追加して保存とデプロイ

データモデルを保存とデプロイを行うと、メニュー項目を保存するAmazon DynamoDBのテーブルやGraphQLのAPIを提供するAWS AppSyncなどのリソースがAWS上に自動で作成されます。 デプロイの完了には数分程度かかります。

データモデリング

モデルがデプロイされたら、次にウェブサイトのフロントエンドを構築してみましょう。今回は、AWS AmplifyがサポートしているReactを使ってみますが、他のフレームワークもサポートされています。

最初にAWS Amplify CLIをインストールします:

npm install -g @aws-amplify/cli

次に新しいReactアプリケーションの開発環境を構築します:

npx create-react-app react-amplified
cd react-amplified

Reactアプリケーションの開発環境が整ったら、次にAWS Amplifyの設定を行いましょう。次の2つのステップを実行してみましょう。

  1. Admin UIに戻り、Local setup instructionsを選択
  2. アプリケーションのルートディレクトリで、表示されているamplifyコマンドを実行

前述のステップ（2）にあるamplifyコマンドを実行すると、ブラウザが開きAdmin UIでログインを行うか聞かれます。Yesを選択することで、ローカルから直接バックエンドを更新するためのアクセス権限がAWS Amplify CLIに付与されます。AWS Amplify CLIは、ローカル環境に関するいくつかの質問を表示した後に、バックエンドをローカルで変更する予定があるかどうかを確認します。今回はYesを選択します。

このプロセスを完了すると、開発を行うウェブアプリケーションのディレクトリで下記の変更が発生します。

  • 新しいディレクトリ（amplifyとsrc/models）の生成
  • 新しいファイル（aws-exports.js）の生成

これらのファイルとディレクトリには、AWS Amplifyアプリケーションに関する設定項目が記述されています。

次にアプリケーションの開発を行います。作成したMenuのデータモデルに接続するために、AWS AmplifyのDataStoreを利用します。DataStoreを使うことで、デプロイされたデータベースへの接続、UIからデータのCRUD・並べ替え・フィルタリングの操作が簡単に行えます。 Admin UIのページ内では、モデルの作成、更新、削除、その他クエリに関する実装例を確認することができます。

pull env

ウェブサイトの実装が完了したら、次はコンテンツの追加です。レストランのメニュー項目を管理するのはレストランのオーナーです。オーナーにメニュー項目の操作を行ってもらうためには、このアプリケーションのAdmin UIにアクセスするための権限が必要です。

レストランのオーナーのために、Admin UIのアカウントを正しい権限で行ってみましょう。作成したアプリケーションのAWS Amplify Consoleに移動し、Admin UI managementのタブからInvite usersを選択してみましょう。

Admin UIのアカウントを作成する際に、権限の詳細を設定することができます。Full accessを選択すると、対象のアカウントはバックエンドの設定や管理を行うことが出来ます。Manage onlyを選択すると、対象のアカウントはコンテンツの管理を行うことが出来ます。今回はコンテンツの管理を行うレストランのオーナーのためにアカウントを作成するので、Manage onlyを選択してSend inviteを押してみましょう。

ユーザーを招待する

Send inviteを押すと、レストランのオーナーにAdmin UIにアクセスするためのリンク、ユーザー名、パスワードがメールで送られます。メニューに項目を追加するために、下記の3つのステップを行ってみましょう。

  1. Contentタブに移動
  2. メニューに項目を追加
  3. 同ページ内で追加した項目の確認

コンテンツ

この画面から、レストランのオーナーはメニューに項目を追加、削除、編集をいつでも行うことが出来ます。また、ここで変更した項目は保存後すぐにウェブサイトに反映されます。

Admin UIのユースケースは、ブログ、Eコマース、予定管理のアプリケーションなど、他にも様々あります。ドメイン固有のデータモデルに焦点を当てることで、アプリケーションの開発者は、クラウドインフラストラクチャーの構築や、その接続に時間を費やす代わりに複雑で便利な機能の構築に集中することができます。AWS Amplifyは、フロントエンドやモバイルアプリケーションの開発者に、開発の高速化を行うシンプルな方法を提供しています。また、クラウドに慣れていない開発者や、チーム全員にAWSアクセスを必ずしも付与する必要がない場合でも、全ての管理機能が利用可能です。

利用可能なリージョン

AWS Amplify Admin UIは、次のリージョンで利用可能です: US East (N. Virginia), US East (Ohio), US West (Oregon), Asia Pacific (Mumbai), Asia Pacific (Seoul), Asia Pacific (Singapore), Asia Pacific (Sydney), Asia Pacific (Tokyo), Canada (Central), Europe (Frankfurt), Europe (Ireland), and Europe (London)

詳細については、Amplifyのサービスページを御覧ください。サンドボックスにてAWSアカウントなしでデータモデルの構築を開始することができます。

– Marcia Villalba, Senior Developer Advocate

翻訳はDeveloper Relations Engineer（Mobile/Web）のDaijiro Wachiが担当し、ISV/SaaS Solutions ArchitectのKoya KimuraとStartup Solutions ArchitectのDaisuke Satoが監訳しました。