AWS Amplify

AWS Amplifyを分かりやすく

AWS Amplifyって聞いたことありますか？AWS AmplifyはAmazon Web Services（AWS）が提供する開発プラットフォームで、主にフロントエンドやモバイル開発者向けに作られています。これが何を意味するのか、少し詳しく見ていきましょう。

AWS Amplifyを使うと、Webアプリやモバイルアプリのバックエンド機能を簡単に構築できます。さらに、それらの機能をフロントエンドとシームレスに統合できるんですよ。認証、API、ストレージ、機能強化、AIやMLなどの各種サービスを提供します。

このAWS Amplifyを使うと、Next.jsやJamstack、TypeScriptなどと合わせて、よりパワフルなWebアプリケーションを作ることができます。一体ナンノコッチャ？って思いますよね？ここで一つ例え話を使って詳しく説明してみます。

AWS Amplifyを思い浮かべるとき、料理が好きな人なら「キッチン」を思い浮かべるといいですね。あなたがシェフ（開発者）だと思ってみてください。キッチン（AWS Amplify）には、必要な調理器具（ツールやサービス）が全て揃っています。鍋やフライパン（APIやデータベースなどのバックエンドサービス）、ナイフやボウル（フロントエンドツール）など、あらゆるものが手元にあります。

さらに、あなたが料理（アプリケーション）を作る際に必要な食材（データ）もストックしてあります。また、レシピ（ガイドラインやベストプラクティス）を参照しながら、自分だけの美味しい料理（素晴らしいアプリケーション）を作り上げることができるんです。

そう、AWS Amplifyはまさに開発者のための完全なキッチンなんです。それぞれのツールがうまく連携して、調理（開発）のプロセスをスムーズに進めてくれるんですよ。

なので、AWS Amplifyを使うことで、Next.jsやJamstack、TypeScriptなどと合わせて、より効率的に、よりパワフルなアプリケーションを作ることが可能になるんです。これは結構すごいことだと思いませんか？

ここまでをまとめると、AWS Amplifyは、Amazon Web Services (AWS) が提供する開発フレームワークとウェブホスティングサービスを組み合わせたもので、フロントエンドがスケーラブルなフルスタックアプリケーションを構築できるようなプラットフォームです。GitHubのリポジトリと連携し、Next.js をホスティングすることができるというわけです。また、CI/CDパイプラインを構築することもできます。

フロントエンドのウェブおよびモバイル開発者がアプリケーションを迅速に構築することを支援します。これには、認証、API (GraphQL + REST)、ストレージ、および分析などの機能が含まれています。

Next.js を デプロイする場合は次のようなコマンドを実行します。

npx create-next-app@latest nextjs-amplify

AWS Amplifyの歴史的変遷

AWS Amplifyは絶えず進化しています。特に2023年には、AWS Amplify Flutterがウェブとデスクトップのサポートを一般公開し、開発者がFlutterを使用して6つのプラットフォーム（iOS、Android、ウェブ、MacOS、Linux、Windows）をターゲットにできるようになりました。これはAmplify FlutterライブラリがDartで完全に再記述された結果で、Flutter開発者は同じコードベースとライブラリをすべてのターゲットプラットフォームで使用できるようになりました。

AWS AmplifyとJamstackの関係

AWS Amplifyは、Jamstackアーキテクチャの構築を簡単にします。JamstackはJavaScript、API、Markupの略で、ウェブ開発の新しい方法を提唱しています。Amplifyは、Jamstackアプリケーションに必要なバックエンドサービスを提供し、フロントエンドとバックエンドの橋渡し役を果たします。

AWS Amplifyのメリット

クロスプラットフォームのサポート

Amplifyは、ウェブおよびモバイルプラットフォームの開発を支援します。具体的には、JavaScript、React、Angular、Vue、Next.jsなどのウェブプラットフォームと、Android、iOS、React Native、Ionic、Flutterなどのモバイルプラットフォームをサポートしています。

フルスタック開発の簡素化

Amplifyは、フロントエンド開発者がバックエンドサービスを構築することなく、フルスタックアプリケーションを構築できるようにします。Amplifyは、認証、API、ストレージ、および分析などの機能を提供します。

AWS Amplify の料金

AWS Amplifyの料金体系は「使った分だけ課金される」形になっています。具体的には以下のようになります：

1. Amplifyのツール

Amplify Studio、Amplify CLI、Amplify Librariesを利用するための料金は基本的に発生しません。ただし、これらのツールを使ってAWSのバックエンドリソース（API Gateway、AppSync、CloudFront、Cognito、DynamoDBなど）をデプロイした場合は、それらのリソース利用分に対する課金が発生します。これらのリソースは、無料枠内であれば無償で使用可能で、それを超えた部分は従量課金となります。

2. Amplify StudioとAmplify UI Components

これらのツールは無料で利用することができます。

3. アプリのホスティング

アプリのビルドとデプロイ、CDNへのデータストレージ、データ転送、サーバーサイドレンダリング（SSR）に関するリクエスト数とリクエスト時間については、12ヶ月間は特定の利用範囲内で無料です。それを超えた場合、または12ヶ月を過ぎた後は従量課金となります。

具体的な料金の例としては次のようなものがあります：

例1

スタートアップチームが5人の開発者で、毎日2回コードをコミットし、日々300人のアクティブユーザーがいるアプリを持っている場合、月額料金は約$8.08です。

例2

毎日10,000人のアクティブユーザーがいて、月に2回更新されるウェブアプリの場合、月額料金は約$65.98です。

これらはあくまで一例であり、実際の利用状況により料金は変動します。具体的な料金はAWSの公式ウェブサイトで確認するか、AWSの料金見積もりツールを使用することをおすすめします。

以下にAWS Amplifyの主要な機能とそれに関連する料金を表にまとめてみました。

また、具体的な料金の例としては以下のようになります。

これらはあくまで一例であり、実際の利用状況により料金は変動します。具体的な料金はAWSの公式ウェブサイトで確認するか、AWSの料金見積もりツールを使用することをおすすめします。

AWS Amplifyを実装

では、Next.jsとTypeScriptを使ってAWS Amplifyを実装する例を見てみましょう。この例では、AmplifyのAuthモジュールを使用してユーザー認証機能を作成します。

まず、必要なパッケージをインストールします。

npm install aws-amplify @aws-amplify/ui-react

次に、Amplifyの設定を行います。aws-exports.jsはAmplify CLIによって生成されるファイルで、プロジェクトのAmplifyリソースに関する情報が含まれています。

import Amplify from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);

そして、認証コンポーネントを作成します。Amplify UI ReactライブラリのwithAuthenticator高階コンポーネントを使用します。

import { withAuthenticator } from '@aws-amplify/ui-react'

type Props = {
  name: string
}

const Hello = ({ name }: Props) => {
  return <h1>Hello {name}</h1>
}

export default withAuthenticator(Hello)

これにより、Helloコンポーネントは認証が必要なコンポーネントとなり、未認証のユーザーはログインまたはサインアップ画面にリダイレクトされます。認証後、ユーザーはHelloコンポーネントを表示することができます。

AWS Amplifyを学ぶ

AWS Amplifyについて学びたい方は、以下のリソースを参照してください。

公式ドキュメンテーション

AWS Amplifyの公式ドキュメンテーションは、Amplifyについて詳しく学ぶための最初のリソースです。SDK、ライブラリ、ツール、そしてドキュメンテーションが包括的に提供されています。

オンラインコース

LinkedInのLearning AWS Amplifyコースでは、AWS Amplifyについて深く学ぶことができます。

ワークショップ

AWSのワークショップでは、実践的な学習を通じてAWS Amplifyを体験することができます。

コミュニティリソース

DEV CommunityのA beginners guide to AWS Amplify Studioでは、Amplify Studioの使い方について学ぶことができます。