小西秀和です。
この記事を書こうと思ったきっかけは、タイトルの通りAWS Amplifyの登場です。
AWS CLI、AWS CloudFormation、AWS Serverless Application Model(AWS SAM)、AWS Cloud Development Kit(AWS CDK)といったAWSインフラストラクチャをプログラマブルに操作するサービスが登場してきましたが、AWS Amplifyはこれまでとは違う新たなアプローチになっています。
今までAWS CLIは使っていたけど結局色々あってAWS CloudFormationはあまり使ってこなかったというケースでもAWS Amplifyがユースケースにマッチする可能性があるかもしれません。
今回はAWSのサーバーレスな静的ウェブサイトホスティングを題材にAWS Amplifyの特徴と簡単な使い方について書こうと思います。
ここで扱うAWSのサーバーレスな静的ウェブサイトホスティングとはAmazon S3とAmazon CloudFrontを使用したシンプルなデザインパターンです。
そのシンプルさの一方でAmazon S3とAmazon CloudFrontそれぞれの可用性・耐久性・俊敏性やサービス機能の豊富さによって非常に強力な静的ウェブサイトホスティング環境が構築でき、そしてシンプルだからこそAWSインフラストラクチャのデプロイツールの入門にも丁度いい題材ではないかと思います。
それではAWS Amplifyの概要から見ていきたいと思います。
AWS Amplifyとは
AWS AmplifyとはAWSサービスを使用したウェブ・モバイルの迅速な開発を支援するツールとサービスのセットです。AWS Amplifyではサービスを、ホスティング、認証、ストレージというようにカテゴリと呼ばれる機能単位で追加して使用します。
そのため、一言でAWS Amplifyを使っているといっても幅広い意味合いになるので、話をしたり、聞いたりするときもAWS Amplifyのツールとカテゴリ(機能)の構成概要を把握しておくとどの部分の話をしているかイメージしやすいと思います。
AWS Amplifyは本記事執筆時点で次のようなツールで構成されています。
- Amplify Framework
- Amplify Libraries：JavaScript、iOS、Androidなどから容易にAWSリソースで構成されたバックエンドにアクセスできるライブラリを提供する
- Amplify UI Components：React、React Native、Next.js、Angular、Ionic、VueといったJavaScriptフレームワークからAWSリソースで構成されたバックエンドにアクセスできる認証、チャットボット、ストレージアクセスなどあらかじめ用意されたUIツールキットを提供する
- Amplify CLI：コマンドラインからインタラクティブ(対話形式)にAWS CloudFormationテンプレートを作成してバックエンドを構成する
- Amplify Console：AWSマネジメントコンソールからアクセスでき、フロントエンドのホスティング、バックエンドの作成・削除とAmplify Admin UIへのアクセスを提供し、フロントエンドとバックエンドのCI/CD環境を作成する
- Amplify Admin UI：AWSマネジメントコンソールとは異なるビジュアルインタフェースでAWSアカウントを持たない開発者も招待するなどしてバックエンドを構成する
Amplify FrameworkとはLibraries、UI Components、CLIを含むオープンソースソフトウェア(OSS)のクライアントフレームワークです。
特筆すべきはAmplify CLIでインタラクティブに構成したリソース情報がAWS CloudFormationテンプレートとして作成、実行、管理される点でしょう。
AWS Amplifyはカテゴリ(機能)としてアーキテクチャをモデル化することでAWS CloudFormationテンプレートを簡単な対話形式の入力から自動生成してAWSリソースをデプロイするようになっています。
そして、ここで生成されたAWS CloudFormationテンプレートは必要に応じて後から修正することもできます。
AWS Amplifyではこれらのツールを使用してフロントエンドアプリケーションのホスティングとバックエンドが使用する後述のカテゴリ(機能)を構成し、アプリケーションがバックエンドにアクセスする手段を提供します。
フロントエンドのホスティングでは主にAmplify Console、Amplify CLIでアプリケーションの静的ウェブサイトホスティングを構成し、バックエンドは主にAmplify Admin UI、Amplify CLIを使用して構成します。そして、Amplify LibrariesとAmplify UI Componentsを使用してフロントエンドアプリケーションをバックエンドに接続します。
Amplify Frameworkで用意されているカテゴリ(機能)には次のようなものがあります。
■Amplify CLIのコマンドオプションに現在あるカテゴリと関連するAWSサービスの例
- hosting(静的ウェブサイトホスティング)：Managed Hosting、Amazon S3＋Amazon CloudFront
- notifications(プッシュ通知)：Amazon Pinpoint
- analytics(分析)：Amazon Pinpoint、Amazon Kinesis、Amazon Personalize
- api(GraphQL API/REST API)：AWS AppSync、Amazon API Gateway
- auth(認証)：Amazon Cognito
- function(関数)：AWS Lambda
- interactions(対話型インターフェイス)：Amazon Lex
- predictions(AI/ML予測)：Amazon Rekognition、Amazon Polly、Amazon Comprehend、Amazon Translate、Amazon Transcribe、Amazon Textract
- storage(ストレージ)：Amazon S3、DynamoDB
- xr(AR/VR)：Amazon Sumerian
■上記以外でAmplify Librariesとして使用できるカテゴリの例
- PubSub：AWS IoT、MQTT over WebSockets
- DataStore：Amplify DataStore
AWS AppSyncとの同期やバージョン管理もできるウェブ・モバイルアプリ向けのスタンドアロンローカルデータストア
ここまで現状のAWS Amplifyの概要についてまとめてみましたが、AWS Amplifyはアップデートが頻繁にあるため、最新のツールとカテゴリ(機能)についてはAmplify Framework Documentationで確認することをおすすめします。
静的ウェブサイトホスティングに使用するAWS Amplifyのツール
前置きが長くなりましたが、前述のAWS Amplifyのツールのうち、今回テーマとしている静的ウェブサイトホスティングを提供するものはAmplify ConsoleとAmplify CLIです。
Amplify ConsoleとAmplify CLIは両方ともAWSマネジメントコンソールからは見えないAWSが管理するAmazon S3とAmazon CloudFrontで構成されるホスティング環境をデプロイできます(ここではManaged Hostingと呼ぶことにします)。
Amplify ConsoleではManaged Hostingに加えて、AWSマネジメントコンソールとは異なるAdmin UIというビジュアルインタフェースに遷移し、AWSアカウントを持たない開発者も招待するなどしてバックエンド環境を構築できます。
一方でAmplify CLIはインタラクティブにAWS CloudFormationテンプレートを作成して実行するツールで、通常のAmazon S3とAmazon CloudFrontによる静的ウェブサイトホスティングも構成できるようになっています。
Amplify ConsoleとAmplify CLIの静的ウェブサイトホスティングに関する機能について表で整理します。
■Amplify ConsoleとAmplify CLIの静的ウェブサイトホスティングに関する機能分類
この表の黄色とピンク色の背景部分が静的ウェブサイトホスティングに関する機能になります。
| ツール | 分類 | 概要 |
|---|---|---|
| Amplify Console | Admin UIで扱えるカテゴリ(機能) | Amplify ConsoleからAdmin UIに遷移することで、バックエンドとして認証(Amazon Cognito)などをデプロイするGUIを提供 ※本記事執筆時点で認証(Amazon Cognito)とデータモデリング以外はAmplify CLIのコマンドの案内表示のみ |
| Hosting (Managed Hosting) | AWS管理のホスティング環境をAWSマネジメントコンソールからデプロイ | |
| Amplify CLI | AWS管理のホスティング環境をAmplify CLIと一部Amplify Consoleの呼び出しをしてデプロイ | |
| Hosting (S3＋CloudFront) | 通常のAmazon S3とAmazon CloudFrontによるホスティング環境をAmplify CLIでデプロイ | |
| その他、Amplify CLIで扱えるカテゴリ(機能) | バックエンドとして前述の「■Amplify CLIのコマンドオプションに現在あるカテゴリと関連するAWSサービスの例」で紹介したカテゴリ(機能)をAmplify CLIでデプロイ |
Amplify Consoleによる静的ウェブサイトホスティングの概要
Amplify Consoleでは静的コンテンツ(HTML、CSS、JavaScript、画像・動画など)によるフロントエンドとサーバーレスアプリケーションによるバックエンドで構成されたシングルページアプリケーション(SPA)を迅速にビルドしてリリースするCI/CD環境を容易に作成できます。
Amplify Consoleは初期構築時にGitHub、BitBucket、GitLab、AWS CodeCommitなどのリポジトリとリリース用ブランチを設定しておくことで、リポジトリのリリース用ブランチへのプッシュを自動的に検知してソースコードをデプロイします。
また、これらのGitプロバイダーを使用せずにローカル、Amazon S3、URLなどからデプロイすることもできます。
さらに、テスト環境の分離、独自ドメインの関連付け、ベーシック認証、リライトとリダイレクトの設定、カスタムヘッダー設定などのオプション機能もあります。
Amplify ConsoleでManaged Hostingとして作成するAWS管理のAmazon S3＋Amazon CloudFrontに加えて、Amplify Admin UIやAmplify CLIを使用してAWS AppSync、Amazon DynamoDB、Amazon Cognitoなどによるバックエンドを構築することもできます。
このようにAmplify Consoleを使用して構築するSPAのアーキテクチャ例は次のようになります。
■Amplify(Console、CLI、Admin UI)によるアーキテクチャ例とエンドユーザーアクセス
前述の表「■Amplify ConsoleとAmplify CLIの静的ウェブサイトホスティングに関する機能分類」でも記載しましたがAmplify Consoleで作成されるAWS管理のAmazon S3＋Amazon CloudFrontの環境は後述のAmplify CLIのamplify add hostingコマンドで「Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)」を選択して作成されるものと同様のManaged Hosting環境になります。
Amplify ConsoleはAmazon S3とAmazon CloudFrontの設定を個別にすることもなく静的ウェブサイトがリリースできるので非常に便利ですが、制限事項としてAmplify Console(およびAmplify CLIのhostingオプションで「Hosting with Amplify Console」を選択)で作成されたManaged HostingのAmazon S3とAmazon CloudFrontはAWSが管理するリソースとなり、AWSマネジメントコンソールやAWS CLIなどから個別に参照、編集、削除することはできません。例えば、通常のAmazon S3のクロスリージョンレプリケーションやAmazon CloudFrontのオリジングループを設定してマルチリージョン構成にするといった変更を自由にすることはできない点に注意が必要です。
もし、Managed Hostingの構成では要件を満たさない場合は後述のAmplify CLIを使用して通常のAmazon S3とAmazon CloudFrontをデプロイして生成されたAWS CloudFormationテンプレートを修正するなどして対処することができます。
また、Amplify Consoleではカスタムドメインの関連付けも簡単にできるため、少し説明しておきます。
Amplify Consoleではカスタムドメイン設定をAmazon Route 53で管理しているドメインから選択して実行すると、
AWSに管理されたAWS Certificate Managerで対象ドメインのSSL証明書を発行(AWSマネジメントコンソールやAWS CLIなどから個別に参照、編集、削除することはできない)し、
Managed HostingのAmazon CloudFrontにSSL証明書を関連付けてAmazon Route 53の対象ドメインのホストゾーンにレコードとして追加する、
といった一連の設定を自動的にしてくれます。
Amazon Route 53の他にも手動手順は必要ですが、GoDaddy、Google Domainsで管理しているドメインも使用できるようです。
Amplify CLIによる静的ウェブサイトホスティングの概要
Amplify CLIは前述の「■Amplify CLIのコマンドオプションに現在あるカテゴリと関連するAWSサービスの例」のようなホスティング(Managed Hosting、Amazon S3＋Amazon CloudFront)、認証(Amazon Cognito)、ストレージ(Amazon S3、Amazon DynamoDB)、関数(AWS Lambda)といったカテゴリ(機能)をインタラクティブにAWS CloudFormationテンプレートを生成してバックエンドとしてデプロイします。
Amplify CLIは基本的にOSにAmplify CLIパッケージをインストールしてCUIでコマンドを実行して操作します。Amplify CLIのコマンドはamplify ＜コマンド＞ ＜サブコマンド＞のような形式で使用し、コマンドの種類には次のようなものがあります。
■Amplify CLIのコマンド一覧
| コマンド | 説明 |
|---|---|
| amplify configure | AWSを操作するIAMユーザーの認証情報、デフォルトのリージョンを設定し、Amplify CLIで使用するIAMユーザープロファイルを指定する。 |
| amplify init | プロジェクトを初期化してAWS CloudFormationテンプレートを作成し、デプロイするリソースをAWSクラウド上にセットアップする。 |
| amplify push | ローカルの修正内容を反映したAWS CloudFormationテンプレートでAWSリソースをプロビジョニングする。 |
| amplify pull | バックエンド環境の変更をAWSクラウドから取得して、環境定義に基づいてローカル環境を更新する。 |
| amplify publish | 前述の「amplify push」コマンドを実行し、フロントエンドのアプリとホスティング環境をビルド・デプロイする。 |
| amplify serve | 前述の「amplify push」コマンドを実行し、プロジェクトのstartコマンドを実行してフロントエンドのアプリをテストする。 |
| amplify status | 作成、更新、削除といったプロジェクトのAWSクラウドにプッシュされていないローカルリソースの状態を表示する。 |
| amplify delete | プロジェクトに関連付けられているすべてのリソースをクラウドから削除する。 |
| amplify ＜カテゴリ＞ add | 指定したAmplifyのカテゴリをローカル環境のバックエンドに追加する。 |
| amplify ＜カテゴリ＞ update | 指定したAmplifyのカテゴリについてローカル環境のバックエンドを更新する。 |
| amplify ＜カテゴリ＞ push | 指定したAmplifyのカテゴリについてローカルの修正内容を反映したAWS CloudFormationテンプレートでAWSリソースをプロビジョニングする。 |
| amplify ＜カテゴリ＞ remove | 指定したAmplifyのカテゴリをローカル環境のバックエンドから削除する。 |
| amplify ＜カテゴリ＞ | 指定したAmplifyのカテゴリのサブコマンドを表示する。 |
| amplify mock | ローカル環境でカテゴリをテストするモックサーバーを実行する。 |
| amplify codegen | GraphQLステートメント(クエリ、ミューテーション、サブスクリプション)と型を自動生成する。 |
| amplify env | プロジェクトの環境設定の表示や管理をする。 |
| amplify console | Amplify ConsoleまたはAmplify Admin UIを開く。 |
| amplify logout | 特定のアプリに関連づいているAmplify Admin UIなどの認証情報をローカルから削除し、ログアウトする。 |
| amplify upgrade | 最新バージョンのAmplify CLIをダウンロードしてインストールする。 |
| amplify uninstal | プロジェクトは削除せずにAmplifyの構成ファイルの削除とAmplify CLIのアンインストールをする。 |
※＜カテゴリ＞には「■Amplify CLIのコマンドオプションに現在あるカテゴリと関連するAWSサービスの例」で紹介した
notifications, analytics, api, auth, function, hosting, interactions, predictions, storage, xr
といったカテゴリのうち一つを入力します。
Amplify CLIによる静的ウェブサイトホスティングでは「hosting」カテゴリを使用します。
Amplify CLIのamplify add hostingコマンドで「Hosting with Amplify Console」を選択して作成したManaged Hosting(AWS管理のAmazon S3とAmazon CloudFront)は前述のAmplify Consoleと同様にAmazon S3、Amazon CloudFrontの個別サービスレベルで設定変更することができません。
一方でAmplify CLIのamplify add hostingコマンドで「Amazon CloudFront and S3」を選択して作成したものは通常のAmazon CloudFrontとAmazon S3と同様にAmplify CLIで生成されたAWS CloudFormationテンプレートを修正することで設定変更ができます。
■Amplify CLIのamplify add hostingコマンドで構築できるホスティング環境
参考：
Amplify Documentation - AWS Amplify Documentation
Welcome to AWS Amplify Hosting - AWS Amplify Hosting
Tech Blog with related articles referenced
まとめ
今回はAWS Amplifyのツールとカテゴリ(機能)の概要と静的ウェブサイトホスティングに関連するツールとしてAmplify ConsoleとAmplify CLIの特徴をまとめてみました。
AWS Amplifyはカテゴリ(機能)というモデル化されたアーキテクチャを用いることで、少ない設定で迅速にAWSインフラストラクチャをデプロイできます。
特にAmplify CLIでは少ない入力項目からAWS CloudFormationテンプレートが生成され、典型的なアーキテクチャでAWSリソースが構築されるため、今までAWS CloudFormationを使用してこなかった場合でもサーバーレスに関する導入についてはハードルが下がったのではないかと思います。
このようにモデル化されたアーキテクチャをコードとして構成管理する手法を「Architecture as Code(AaC)」といいます。
(AaCについては「Architecture as Codeってなぁに？ 〜Infrastructure as Codeを超えて〜」の記事で体系的に説明されています。)
一方でAWS Amplifyも万能ではなく複雑なアーキテクチャを採用する場合やAWSサービス、リソース毎に細かい設定をする場合など独自要素が強いパターンには向いていないでしょう。
今までもこれからもそうですがAWSサービスの特徴を捉えて要件やユースケースに合わせて構成管理手法を採用していくというスタイルには変化はないと思います。
次回はAmplify Console、Amplify CLIを使用した静的ウェブサイトの構築例を紹介する予定です。
- [English Edition] AWS Amplify Features Focusing on Static Website Hosting - Relationship and Differences between AWS Amplify Hosting and AWS Amplify CLI
