Amplifyを用いた新規プロダクト開発

エビリーの新規プロダクト開発を担当している中塩です。
現在、新規プロダクト開発チームではAWSのAmplifyを採用して開発を進めており、サービス立ち上げに有用なツールであると感じているため、今回はそのご紹介ができればと思います。

Amplifyとは

https://docs.amplify.aws/
Amplifyは、モバイルアプリやウェブアプリを構築するための開発プラットフォームで、端的に言うと既存のAWSサービスを用いてイチから自分で構築するよりもバックエンド・インフラ構築にかかる時間的なコストが少なく、素早くスタートできるサービスです。
デプロイやホスティング、開発に必要なインフラ構築など、アプリケーションを簡単に構築できるようにするツールと一連の機能が提供されており、大きく4つの主要機能で構成されています。

Amplify CLI

https://docs.amplify.aws/cli/
Amplify CLIは、各種AWSサービスを簡単に利用できるCLIツール（コマンドラインインターフェイス）です。
バックエンドの構築や管理のほか、AWSサービスとの連携に必要な設定ファイルやソースコードを自動で生成してくれます。

$ amplify add api
? Select from one of the below mentioned services
❯ GraphQL 
  REST 
? Choose the default authorization type for the API
❯ API key 
  Amazon Cognito User Pool 
  IAM 
  OpenID Connect 
  Lambda 

上記のように対話形式のコマンドから詳細なパラメータを意識することなく、AppSync・DynamoDBやLambdaなどの各AWSサービスを構築することが可能となっています。

Amplify Hosting

https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html
Amplify Hostingは、Amplify Consoleからウェブアプリを公開するための環境を簡単にセットアップできるサービスです。
GitHubなど任意のリポジトリを紐付けておくことにより、Amplify ConsoleがCI/CD環境を構築し、デプロイ環境の構築からホスティングまで自動で実行してくれます。
また、AmplifyはE2EテスティングフレームワークであるCypressをサポートしており、Amplify Consoleと統合することでCI/CD環境にE2Eテストを組み込むこともできます。

Amplify Libraries

https://docs.amplify.aws/lib/q/platform/js/
Amplify Librariesは、モバイルアプリやウェブアプリとAWSバックエンドを統合するためのクライアントライブラリです。

import { API, graphqlOperation } from 'aws-amplify';
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations'; 
const todo = { name: “first todo", description: “My first todo” }; 
await API.graphql(graphqlOperation(createTodo, {input: todo}));

APIやAuthentication、Storageといった、カテゴリごとにAPIが提供されており、AWS SDKを使用した各サービス毎のAPIを呼び出す必要がなく、直感的なインターフェースを⽤いて実装できるようになっています。
また、ログイン等の機能を備えたUIコンポーネントもAmplifyからいくつか提供されています。
https://docs.amplify.aws/ui/

Amplify Studio

https://docs.amplify.aws/console/

Amplify Studioは、AWS上に最小限のコーディングでフロントエンド開発ができるビジュアルインターフェイスで、これまでのAWS Amplify Admin UIと統合し、バックエンド環境もUI上で設定・管理できるサービスとなっています。
Figmaと連携することで、AWSより提供されているAWS Amplify UI Kitをもとに作成されたデザインからReact UIコンポーネントのコードを出力することができ、コンポーネントとモデリングしてあるデータをUI上でバインドできる機能も提供されています。

導入してみて

現在、GitLab-flowをもとに開発を運用しているのですが、ブランチモデルに対応した環境を手軽に作成することができ、実際に以下の図のようなアプリ環境を構築することができました。

ホスティング

Amplify Consoleから、GitHubのリポジトリをAmplifyと接続しており、前述の通りデプロイ環境構築からホスティングまで自動で行なってくれるため、ソースコードをPushしたタイミングで自動的にアプリケーションがデプロイされる仕組みを数クリックで作成することができています。
上の図では各ブランチとバックエンド環境を1:1で紐付けていますが、複数のブランチに同じバックエンド環境を紐づけることも可能です。
また、Amplify ConsoleにはPreview機能という、プルリクエストが作られるとそのブランチをビルド・デプロイして動作確認できる環境を自動的に作ってくれる機能があり、設定しておくことでレビュー時にPreview環境で動作をチェックすることもできます。

バックエンド構築

バックエンドは、Amplify CLIからAuth・API・Function・Storageのカテゴリを追加しています。
こちらも先ほどご紹介した通り、コマンドラインから数回コマンドを入力するだけで各AWSサービスを構築し、Amplifyで管理することができるようになっています。
そのため構築までにかかるコストが少なく、スキーマやLambda関数のロジック等のアプリケーション実装に集中することができます。
staging環境のバックエンドはAmplify CLIで直接更新しているのですが、pre-prod環境のバックエンドはデグレを防止するために、Amplify CLI側で操作を行わずAmplify Console経由の操作のみを行うようにしており、リモートブランチへPushした際に対応する環境のバックエンドが構築されるので、バックエンドのCI/CDもできるようになっています。

上の図では全ての環境を同一のAWSアカウント内に構築していますが、開発環境と本番環境でAWSアカウントを分離して構築することも容易にできるようになっています。
現在はまだプロジェクトを外部公開していないため実施していないですが、製品版として本番運用する際はコスト管理や運用面から採用する方針で検討しています。

まとめ

AWS Amplifyは、認証機能をはじめとした「ユーザーメリットに直結しないけれど、サービスにとっては重要な要素」を簡単に実装できる仕組みが備わっています。
そのため、ユーザー価値に直結する本来の開発作業に注力することができ、プロダクトを素早くリリースすることができます。
実際にいま進行中の映像制作向け新規プロダクト開発においては、Amplifyを導入し素早く構築・提供してPoCを行うことができ、現在はその結果を踏まえた機能改修に取り組めています。
また、今回ご紹介できなかったですが、リアルタイム通信やユーザーエンゲージメントの可視化などのユースケースに応じたバックエンドの仕組みもApmlifyを用いて簡単に構築することができます。
一方で、制約事項や詳細な設定ができない等のデメリットもあり、Amplifyの自動生成するファイルへ手を加えることができず個別に対応する必要が生じるなど、ユースケースから外れた凝ったことを実現しようと思うと辛い部分やメリットを享受できない場合があります。

Amplifyが適さないケースもあるかとは思いますが、総じて現段階ではサービス立ち上げに有用なツールであると感じています。
将来的にリプレースの選択も可能であるため、プロダクトが成長してきて機能要件が複雑になってきたタイミングであらためて検討できればと思っています。

今回の記事で、参考になる情報が少しでもあれば幸いです。