AWS入門ブログリレー2024〜AWS Amplify編〜

こんにちは、つくぼし(tsukuboshi0755)です！

当エントリは弊社AWS事業本部による『AWS入門ブログリレー 2024』の58日目のエントリです。

このブログリレーの企画は、普段AWSサービスについて最新のネタ・深い/細かいテーマを主に書き連ねてきたメンバーの手によって、 今一度初心に返って、基本的な部分を見つめ直してみよう、解説してみようというコンセプトが含まれています。

AWSをこれから学ぼう！という方にとっては文字通りの入門記事として、またすでにAWSを活用されている方にとってもAWSサービスの再発見や2024年のサービスアップデートのキャッチアップの場となればと考えておりますので、ぜひ最後までお付合い頂ければ幸いです。

では、さっそくいってみましょう。今回のテーマは『AWS Amplify』です。

基本情報

AWS Amplifyについて、まず初めに知っておくべき基本情報を説明します。

概要

AWS Amplifyは、ウェブアプリケーションやモバイルアプリを構築するためのフルスタック開発プラットフォームです。

AWS Amplifyを利用する事で、以下のようなメリットを得られます。

• バックエンド開発が簡素化され、人気のあるフロントエンドフレームワークを用いるだけで、フルスタックアプリケーションの構築と展開を迅速に行う事が可能
• グローバルエッジネットワークから提供される可用性、信頼性、低レイテンシーにより、トラフィックの増加に応じてアプリケーションが自動スケールされる
• CI/CDのプロセスが自動化され、開発者がコードの変更を簡単にデプロイ可能

2024/6/3現在、Amplifyは以下のフレームワークに対応しています。

• React
• Next.js
• Angular
• Vue
• JavaScript
• React Native
• Flutter
• Android
• Swift

Webアプリケーションやモバイルアプリで一般的に良く使われるフレームワークはほぼカバーしている印象です。

Gen1とGen2

Amplifyには、サービス開始当初から提供されているGen1と、2024/5/7よりGAとなったGen2があります。

Gen1からGen2へのアップデートにより、主に以下のような機能が追加されました。

• TypeScriptが標準となり、型安全なコードを書く事が可能
• 開発者毎にサンドボックス環境を用意できるようになり、より柔軟な検証やテストが可能
• バックエンドのデプロイ方法がCLIからCDK(L3 Construct)に変更となり、コードを変更する事でAWSリソースのカスタマイズや追加が容易に

下記の公式ドキュメントでもGen2の機能について詳しく説明されていますので、合わせてご参照ください。

今回はGen2に絞って紹介します。

料金体系

Amplifyの料金体系は、以下の公式ページをご参照ください。

アクティブユーザー数にもよりますが、関連サービスの無料枠も多く存在し、初めて利用する方でも気軽に開始できるような料金体系となっている印象です。

バックエンド機能

Amplifyにはaws-amplify/amplify-backendモジュールがデフォルトで組み込まれており、フロントエンドアプリケーションに必要なバックエンド機能を簡単に追加できます。

以下では、Amplifyで提供される主なバックエンド機能について説明します。

認証

Amazon Cognitoと連携され、アプリケーションに認証機能を追加できます。

ログイン、サインアップ、パスワードのリセット、MFAなどの一般的な認証フローを実装可能です。

また、Apple、Facebook、Google、Amazonなどの他のOpenIDプロバイダーとのフェデレーションを含むユーザー情報を用いたアクセス管理も充実しています。

認証機能の詳細については、以下も合わせてご参照ください。

データ

AWS AppSyncと連携され、アプリケーションにデータストア機能を追加できます。

データストレージ、同期、リアルタイムといった強力なデータストア機能をアプリに容易に組み込めます。

またGraphQL APIもサポートされており、データのクエリを効率的に行えます。

データ機能の詳細については、以下も合わせてご参照ください。

ストレージ

Amazon S3と連携され、アプリケーションにストレージ機能を追加できます。

ファイルのアップロード、ダウンロード、一覧表示などの一般的なストレージ操作を、簡単なAPIで実装できます。

ファイルストレージの管理機能を、シームレスな形でアプリケーションに統合する事が可能です。

ストレージ機能の詳細については、以下も合わせてご参照ください。

関数

AWS Lambdaと連携され、アプリケーションに関数機能を追加できます。

特定の処理を実施する関数を簡単に作成し、アプリに容易に組み込めます。

関数の使い道としては、他のリソースからのイベントへの応答や、認証フローなどのイベント間でのロジック実行、及び単独のジョブとしての使用等が挙げられます。

関数機能の詳細については、以下も合わせてご参照ください。

フロントエンド機能

Amplifyでは、フロントエンドアプリケーションの開発をサポートするための機能もいくつか提供されています。

以下ではAmplifyで提供される主なフロントエンド機能について説明します。

サーバーサイドレンダリング(SSR)

Amplifyは、サーバーサイドレンダリング(SSR)をサポートしています。

特にNext.jsを用いる際に、別途@aws-amplify/adapter-nextjsを導入し、サーバー及びクライアント側のファイルを設定する事で、SSRを利用できます。

SSRを設定する事で、アプリケーションの初期読み込み時間を短縮し、SEOの向上やパフォーマンスの向上を実現できます。

SSRの詳細については、以下も合わせてご参照ください。

UIライブラリ

Amplify専用のUIライブラリとして、aws-amplify/amplify-uiがOSS提供されており、必要に応じて導入する事で以下のようなモダンなUIコンポーネントを簡単に利用できます。

各フロントエンドフレームワーク毎にコンポーネントが提供されており、別途インストールし設定する事でUIを利用できます。

これらのコンポーネントはAmplifyとシームレスに連携されており、複雑なフロントエンドコードを抽象化し、直感的なAPIを提供します。

UIライブラリ用のドキュメントもありますので、合わせてご参照ください。

CI/CD機能

Amplifyでは、CI/CDをサポートするための機能がデフォルトで提供されており、アプリケーションの開発からデプロイまでを自動化する事が可能です。

以下ではAmplifyで提供される主なCI/CD機能について説明します。

ビルドの通知

アプリケーションのビルドの状態変更を、特定のメールアドレスに対して通知できます。

ビルドが成功または失敗した時にイベントを通知できます。

ビルド通知の詳細については、以下も合わせてご参照ください。

ビルドの設定

アプリケーションのビルドプロセスをカスタマイズするための設定ファイルamplify.ymlを使用できます。

このファイルを使用して、ビルドコマンド、環境変数、アーティファクトの指定などを行えます。

ビルド設定の詳細については、以下も合わせてご参照ください。

また、受信ウェブフックを使用して、ビルドをトリガーする事も可能です。

受信ウェブフックの詳細については、以下も合わせてご参照ください。

環境変数及びシークレット

AWS Systems Managerと連携し、環境変数及びシークレットを使用して、アプリケーションの設定を管理できます。

これらの変数を使用する事で、アプリケーションの設定を環境ごとに分離し、セキュリティを向上させる事ができます。

環境変数及びシークレットの詳細については、以下も合わせてご参照ください。

プレビュー

プルリクエストごとにプレビュー用のURLを自動的に生成できます。

これにより、変更内容を本番環境にデプロイする前に、関係者がプレビューを確認する事ができます。

プレビューの詳細については、以下も合わせてご参照ください。

サンドボックス

Gen2から追加された機能として、アプリケーションを迅速に構築、テスト、デプロイするための分離された開発スペースを提供する使い捨てのクラウドサンドボックス環境を使用できます。

npx ampx sandboxコマンドを実行する事で、簡単にサンドボックス環境を作成し、アプリケーションの開発を開始できます。

サンドボックスは検証やテスト用途で使用し、コストを節約するために定期的にリセットする事が推奨されています。

サンドボックスの詳細については、以下も合わせてご参照ください。

ブランチ毎の自動デプロイ

同じくGen2から追加された機能として、Gitリポジトリの各ブランチ毎でのデプロイ環境の分離を、アプリケーションの設定からブランチの自動検出を有効にする事で簡単に実施できるようになりました。

ブランチパターンを定義すると、パターンに該当する各ブランチ毎に自動的にデプロイ環境が作成され、コードの変更を自動的にデプロイする事が可能です。

またブランチの接続の自動解除を有効化すると、リポジトリからブランチを削除したときに、Amplifyからそのブランチが自動的に切断されます。

これらの機能により、メインブランチ以外にリリースブランチ等を作成/削除して、別環境で運用する事が容易にできるようになっています。

ブランチ毎の自動デプロイの詳細については、以下も合わせてご参照ください。

ホスティング機能

Amplifyでは、アプリケーションのホスティング機能がデフォルトで提供されており、柔軟かつセキュアにアプリケーションをデプロイ・運用するための機能が充実しています。

以下ではAmplifyで提供される、CI/CD以外の主なホスティング機能について説明します。

アクセスコントロール

公開準備が整っていないブランチを、Basic認証で保護できます。

特にアプリケーション側で認証機能の実装が整っていない場合、一時的にアクセスを制限する際に有用です。

アクセスコントロールの詳細については、以下も合わせてご参照ください。

カスタムドメイン

Amazon Route 53及びAWS Certificate Managerと連携し、独自ドメインを使用してアプリケーションを公開できます。

SSL/TLSの自動設定や、ルートドメインのサポートなど、独自ドメインの設定に関する機能が充実しています。

カスタムドメインの詳細については、以下も合わせてご参照ください。

カスタムヘッダー

HTTPレスポンス毎に、ヘッダーをカスタマイズするための機能が提供されています。

デフォルトでは空となっているcustomHttp.ymlファイルを編集する事で、独自のレスポンスヘッダーをセキュリティやキャッシュ制御等の用途で使用できます。

カスタムヘッダーの詳細については、以下も合わせてご参照ください。

モニタリング

Amazon CloudWatchと連携され、自動でアプリケーションの性能やエラーを監視する事ができます。

デフォルトでメトリクスやアクセスログ等を収集するとともに、必要に応じてアラームを設定する事も可能です。

モニタリングの詳細については、以下も合わせてご参照ください。

リライトとリダイレクト

特定のURLから別のURLにリダイレクトするためのルールを設定できます。

一般的なウェブサーバーのように、例えばURLの構造を変更したり、古いURLから新しいURLにルーティングするような制御を設定できます。

リライトとリダイレクトの詳細については、以下も合わせてご参照ください。

Amplifyの始め方

これからAmplifyを初めて触るのであれば、以下のクイックスタートチュートリアルから始めるのがオススメです。

クイックスタートチュートリアルを進める事で、Amplifyの基本的な使い方を学びつつ、以下のような基本的なToDoアプリを作成する事ができます。

冒頭で紹介したフロントエンドフレームワークに対応したチュートリアルが各々用意されているため、自身が利用したいフレームワークに合わせて進める事が可能です。

以下のやってみたブログもありますので、まだAmplifyを試した事がない方はぜひこちらも参考にしてみてください。

最後に

以上、『AWS入門ブログリレー 2024』の58日目のエントリ『AWS Amplify』編でした。

次回、6/4は弊社たぬきによる『AWS Elastic Beanstalk』編の予定です！