こんにちは、テクノロジー部の山﨑です。
世界中で広く使われているクラウドコンピューティングサービス「AWS」。アプリ開発もサポートしていますがそのサービスは多種多様であるがゆえに、どのサービスを使えばいいかわからない、AWSでアプリ開発を行うメリットがわからない、という方は多くいらっしゃるのではないでしょうか？
本記事では、AWSでのアプリ開発で欠かせない「AWS Amplify」について解説します。
目次
AWS Amplifyとは？
AWS Amplifyとは、AWS上でWeb・モバイルアプリを高速でリリースするためのフルスタックの開発フレームワークです。
静的なWebサイトやアプリケーション、バックエンドリソースの構築、データベースやAPIの設定等を簡素化することで、開発者が迅速にアプリケーション開発を進められるようにサポートしています。
また、AWS Amplifyにはさまざまな機能があり、スケールの拡大がしやすいなど、柔軟な対応ができることも魅力のひとつです。
AWS Amplifyでなにができる？主要コンポーネントの紹介
AWS Amplifyでどんなことができるのかを、主要なコンポーネントとともにご紹介します。
- 注意：AWS Amplifyは常に進化し、新機能が追加されています。この記事の情報は執筆時点のものですが、最新の機能や変更点についてはAWS Amplifyの公式ドキュメントを参照することをおすすめします。
バックエンドの構築の簡素化「Amplify CLI」
AWS Amplifyではさまざまなバックエンドの機能をサポートし、開発者が複雑な設定や管理に煩わされることなく、簡単に構築できるように設計されています。これを実現するのが「Amplify CLI」です。
Amplify CLIは、AWSでサーバーレスなバックエンドの構築やプロジェクトの設定・管理をするためのコマンドラインインターフェースツールです。CUI（Command-line User Interface）ベースであるため、インフラの知識がなくてもコードを書くようにバックエンドを構築することができます。
Amplify CLIを使用することで、APIの作成から設定までの一貫したサポート、Amazon DynamoDBなどのデータベースサービスやAWS S3などのストレージサービスの統合、ファイルのアップロードやデータの保存といったバックエンドリソースの管理が、数回のコマンド入力で迅速かつ容易に実行できます。
- Amplify CLIでできること
-
- APIの作成と設定：GraphQLやRESTful APIの一貫した作成から設定までをサポート
- データベースとストレージの統合：DynamoDBやS3などのAWSサービスの簡易セットアップと管理
- リソース管理：バックエンドリソースの設定、ファイルの操作、データの保存などをコマンドラインから容易に実行
フロントエンド開発の効率化「Amplify Libraries」
AWS Amplifyで、フロントエンドの統合もシンプルかつ簡単に実現することができます。これを可能にするのが「Amplify Libraries」です。
Amplify Librariesは、フロントエンドおよびモバイルアプリケーション開発向けのツールセットです。アプリケーションを構築するためのライブラリ、UIコンポーネントといったさまざまなフレームワークやプラットフォームを提供しており、AWSのバックエンドと連携するための処理を数行で実装できるようになります。
- Amplify Librariesでできること
-
- 認証機能の実装：ユーザーのサインアップ、サインイン、アクセス管理を簡単に実装
- データの操作：GraphQLやREST APIを通じたデータの取得、保存、更新を効率的に実行
- オフラインデータ同期：「Amplify DataStore」を使用してオフライン対応のアプリケーションを構築
- UI コンポーネント：事前に構築されたUIコンポーネントを使用して、開発時間を短縮
Amplify UIコンポーネントライブラリを利用すれば、ユーザー認証やデータ表示機能をわずか数行のコードで組み込むことが可能です。
他にもオフラインでも動作するデータ同期機能を実装できるAmplify DataStoreやリアルタイムでデータの表示をしたり、ユーザーからの入力をサーバーに送信することが容易になるAmplify APIなどのサービスが充実しているため、フロントエンドの統合も格段に効率的になるでしょう。
継続的デプロイメントとホスティングの簡素化「Amplify Hosting」
AWS Amplifyは、継続的デプロイメント（CI/CD）とホスティング※のプロセスを統合し、開発から運用までの一連の作業を大幅に簡素化します。これを実現するのが「Amplify Hosting」です。
※継続的デプロイメント（CI/CD）とは、開発者がコードを変更するたびに、自動的にテスト、ビルド、そしてデプロイを行うプロセスのことで、ホスティングとは、Webサイトやアプリケーションをインターネット上で公開し、ユーザーがアクセスできるようにする設定のことです。
Amplify Hostingは、これらのCI/CDとホスティングのプロセスを統合し、Webアプリケーションや静的サイトのホスティングを簡単に実現できるサービスです。
- Amplify Hostingでできること
-
- 継続的デプロイメント（CI/CD）：Gitリポジトリと連携し、コードプッシュ時に自動ビルド、テスト、デプロイを実行
- フルスタックアプリケーションのホスティング：静的ウェブサイト、シングルページアプリケーション（SPA）、バックエンドAPIを含む複雑なアプリケーションまでホスティング可能
- パフォーマンスとセキュリティの最適化：CDNによる高速配信、カスタムドメイン設定、HTTPS自動導入
- 開発サポート：プレビュー環境の自動生成、ブランチごとのデプロイ環境提供によるチーム開発の効率化
Amplify Hostingを使用することで、Gitリポジトリと連携し、コードがプッシュされると自動的にビルドとデプロイが行われます。これにより、コードの変更を迅速に本番環境に反映させることができます。静的サイトだけでなく、バックエンドAPIなどの複雑なフルスタックアプリケーションもホスティングすることが可能で、複数のサービスを統合して一貫した開発を実現できます。
また、カスタムドメインの設定やHTTPSの導入、CDN（Content Delivery Network）を活用した高速な読み込みなどが可能なため、ユーザーに優れた体験を提供することができます。自動ビルド、テスト、デプロイのパイプラインなど高度なCI/CD機能も提供されており、開発からデプロイまでの流れがスムーズかつ効率的に行えます。
ビジュアル開発環境「Amplify Studio」
「Amplify Studio」は、開発者がコードをほとんど書くことなくフルスタックのアプリケーションを迅速に構築できるツールです。
- Amplify Studioでできること
-
- ビジュアルデータモデリング：データモデルをビジュアルで設計し、バックエンドAPIを自動生成
- 認証とアクセス制御：ユーザー認証とアクセス制御を視覚的に設定
- UIコンポーネント設計：ドラッグ＆ドロップでUIコンポーネントを作成し、Reactコードを生成
- Figmaとの統合：FigmaデザインをReactコードに変換し、アプリケーションに直接統合
- コンテンツ管理：アプリケーションのコンテンツを視覚的に管理・更新
Amplify Studioを使用することで、開発者はバックエンドの構築からフロントエンドのデザイン、そしてコンテンツ管理まで、アプリケーション開発の全過程を視覚的に行うことができます。開発プロセスが大幅に簡素化され、開発速度が向上します。
また、Amplify StudioはAmplify CLIと完全に互換性があり、生成されたコードは標準的なAWS CDKとAmplify CLIコマンドを使用して管理できます。必要に応じてコードレベルでの詳細な調整も可能です。
AWS Amplifyのメリット
開発スピードの向上
AWS Amplifyには開発スピードを向上させるためのツールが多く存在しています。
たとえばAmplify CLIを活用すると、コマンドラインからAPIやデータベースなどのバックエンドリソースを簡単にセットアップすることができます。
また、Amplify Librariesを使用することでフロントエンドの開発も迅速に行うことができます。事前に構築されたライブラリやコンポーネントを利用することで、開発者がコーディングに費やす時間を大幅に削減することができます。
他にも、UIをドラッグ＆ドロップするだけで簡単に実装できるAmplify Studioなど、開発を効率化できるものがそろっています。
スケーラビリティとコスト効率
AWS AmplifyはAWSのインフラを基盤としているため、トラフィックやデータ量の増減に応じてリソースを自動的にスケーリングすることができます。アプリケーションが成長し、トラフィックがピークに達してもパフォーマンスが維持されるため、リソースの過不足を心配する必要がありません。
また、従量課金制を採用しているため、使用したリソースに応じて料金が発生する仕組みです。初期投資を抑えつつ、コストを最適化できるのでコスト効率という観点でも優れていると言えるでしょう。
セキュリティと管理の簡略化
セキュリティやその管理に関してもAWS Amplifyは優れています。AWSの既存のセキュリティサービスと緊密に統合されており、IAMポリシーやセキュリティグループなどを活用して、堅牢なセキュリティ体制を維持できます。
とくにAmplify Authを使用することで、ユーザー認証やアクセス制御の設定を簡単に実装することができ、セキュアなアプリケーションの開発をすることが可能です。
さらに、Amplifyのコンソールを通じて、アプリケーションの各コンポーネントのセキュリティ設定を一元管理できるため、セキュリティ管理の複雑さを軽減しつつ、一貫したセキュリティポリシーを適用することが可能です。
AWS Amplifyの始め方
ここでは実際にコマンドを使いながら、Amplifyプロジェクトの作成からWebアプリをデプロイするまでの流れを簡単に説明します。
進めるにあたってAWSのアカウントを作成する必要があります。また、実行する環境やAWS Amplifyのバージョンによって表示されるコマンドに差異がありますのでご注意ください。
環境設定とインストール
まずは環境を確認します。ターミナル/コマンドプロンプトで以下のコマンドを実行して、Node.jsのバージョンが12.x以降およびnpmのバージョンが6.x以降であることを確認しましょう。
node -v
12.1.1npm -v
6.14.6
確認できたら、以下のコマンドでAmplify CLIをインストールします。
npm install -g @aws-amplify/cli
インストールが完了したら、以下のコマンドでAmplify CLIの設定を行いましょう。
amplify configure
実行するとAWSアカウントにログインするためのブラウザウィンドウが開かれます。ログインが完了したらコンソールに戻り、エンターキーを押してください。
ログインが正常に完了しているとAmplifyで使用するリージョンを聞かれます。使用するリージョンを任意で設定してください。
Specify the AWS Region? region: ap-northeast-1 #任意
次に、IAMユーザーのユーザー名を聞かれます。作成していない場合、入力せず実行すればIAMユーザー作成画面に移ります（割愛）。
Specify the username of the new IAM user:? user name: yamazaki #任意
次に、指定したユーザーに対する認証情報を入力するように求められます。アクセスキーIDとシークレットアクセスキーを入力しましょう。
Enter the access key of the newly created user? accessKeyId: #指定したユーザーのアクセスキーID? secretAccessKey: #指定したユーザーのシークレットアクセスキー
次に、プロファイル情報の名前の入力を求められますが、任意の名前で問題ありません。
This would update/create the AWS Profile in your local machine? Profile Name: (default)
環境設定は以上で終了です。
新規プロジェクトの作成
今回は、Reactでアプリケーションを実装していきます。
以下のコマンドでReactアプリケーションを作成しましょう。
npx create-react-app amplify-appcd amplify-app
次にAmplifyのプロジェクトを立ち上げます。
以下のコマンドを実行すると、プロジェクトが初期化されます。
amplify init
amplify initを実行すると、アプリケーションに関する必要な情報が聞かれるので、そのプロジェクトに沿った入力をします。
? Enter a name for the project amplify-app? Enter a name for the environment dev? Choose your default editor: Visual Studio Code? Choose the type of app that you're building javascriptPlease tell us about your project? What javascript framework are you using react? Source Directory Path: src? Distribution Directory Path: build? Build Command: npm run build? Start Command: npm startUsing default provider awscloudformationSelect the authentication method you want to use: AWS profilePlease choose the profile you want to use amplify最後のプロンプトに答えると、必要なインフラストラクチャが作成され、プロジェクトの初期化および作成の完了です。
AWSコンソール上で「AWS Amplify」と検索するとAmplifyプロジェクトの表示と管理が可能になります。
デプロイとホスティング
Amplifyプロジェクトにホスティングの設定を追加し、S3バケットとCloudFrontを使用して公開しましょう。以下のコマンドを「新規プロジェクトの作成」で作成したamplify-appディレクトリから実行してください。
amplify add hosting
実行するとプラグインモジュールの選択を求められます。ここではAmazon CloudFrontとS3を使用したホスティングを選択します。
? Select the plugin module to execute Amazon CloudFront and S3
次に環境の設定を行います。Amazon S3とCloudFrontを使用してHTTPSでプロダクション環境のホスティングを設定します。
? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
次に、以下のコマンドにS3バケットの名前を入力します。既存のバケットの名前を入力しても、新しくバケットの名前を入力しても、何も入力しなくても問題ありません。何も入力しない場合、デフォルトでユニークなバケットを作成してくれます。
? hosting bucket name：#バケットの名前を入力
設定が完了したら以下のコマンドを実行し、アプリケーションをビルドデプロイします。
amplify publish実行すると最後の行にURLが表示されます。そのURLにアクセスできるようになっていればデプロイ成功です。
まとめ
今回はAWS Amplifyの概要から始め方まで簡単に解説しました。
AWS AmplifyはモバイルアプリやWebアプリ開発を迅速化するためのフルスタックの開発フレームワークです。使いこなすことができれば、アプリケーションの開発により集中することができ、パフォーマンスの向上に繋げることができるでしょう。
これからAWSで開発を進めていきたいとお考えの方はぜひ、この記事を参考にAWS Amplifyの理解を深めていただけると幸いです。
