2025-05-21 投稿

【2025】Amplifyとはナニモノか、最大限わかりやすく解説します【Gen2】

Amplifyってなんですか？と聞かれて「認証とかデータベースとか使うアプリケーションを簡単に作れるやつだよね・・？」くらいの回答しかできませんか？筆者はそうでした。AWSリソースとの関係性にも注目しつつ、曖昧な理解をより明確にしていきましょう。

プロローグ：Amplifyに対するモヤモヤ

今までAmplifyというものについて「なんか認証とかデータベースとかを自動でいいかんじに作ってくれるアプリケーションよね？」といったぼんやりとしたイメージしかありませんでした。

実際に業務で使い始めてからも、AmplifyのソースコードにはLambdaやDynamoDBやReactなど、様々な要素が含まれていました。

フロントを担当するかと思えば、バックエンドやインフラも構築できる。なまじ守備範囲が広く境界線が曖昧で、あれもこれもできるゆえに何がどうなっているのか理解の妨げになっていると感じました。

結局Amplifyってのはナニモンなんじゃ？私はずっとモヤモヤし続けていました。

この記事でスッキリしましょう。

この記事の想定対象者

Amplifyというものについて、なんとなくのイメージしかない
単に「便利なサービス」ではなく、背後で動いているAWSリソースについても理解したい

序章：Amplifyはアプリケーションではなく「デプロイサービス」

誤解を恐れずに書きますと、Amplifyはアプリケーションではありません。

より詳しく言うと、Amplifyの機能を使って作ったアプリケーションはありますが、Amplifyはアプリケーションそのものではありません。

Amplifyは、デプロイ機能を提供するサービスです。

もう少し詳しく言うと、アプリケーションを作るための開発便利機能を提供してれて、継続的デプロイやホスティングも可能なサービスです。

aws-amplifyというNPMパッケージが含まれ、アプリケーションのソースコードに食い込んでくるせいで、アプリケーションとの境界がわかりづらくなっていますが、彼の本業はCI/CDです。

そして内部では他のAWSリソースが動いています。それらはAmazon S3やLambdaのように、それ自体が単体でAWSのサービスとして提供されているものです。

Amplifyの管理画面を見てみる

Amplifyの管理画面を見てみましょう。
Amplifyによって構築されているアプリケーション一覧が表示されています。

amplify-01

ところでこの画面、普段のAWSマネジメントコンソールとはUIが異なりますね。
これはFirebaseのような競合サービスを意識しているためだと思われます。

つまり、インフラ構築に詳しくない開発者でも手軽に使えることをコンセプトにAmplifyというサービスは設計されているということですね。

極論、AWSリソースのことを理解していなくても、Amplifyの管理画面に書かれている内容に従えば、アプリケーションをデプロイすることが可能になるようなサービスとなっています。

背後では各種AWSリソースが動いていますが、Amplifyはそれをうまく隠蔽してくれます。
インフラを意識したくないプリケーション開発者からすると親切に思えますが、これこそがAmplifyというものの理解を妨げる足枷にもなっている気がします。

次章以降で、Amplifyを使ってゼロから徐々にアプリケーションを構築することで、Amplifyの背後も含めて理解を深めましょう。

第1章静的WebホスティングとしてのAmplify

まずはなんの変哲もないフロントエンドアプリケーションを用意します。
Viteのドキュメントを参考に、npm create vite@latestで
Vanilla & TypeScriptで初期化したものをレポジトリにして、GitHubにプッシュします。

レポジトリ例

Viteの初期アプリをデプロイする

「新しいアプリを作成」から、GitHubを選択します。

front-01

補足：ソースコードのフォルダをZipに圧縮してアップロードする方法もありますが、変更のたび都度アップロードする必要があり面倒です。Gitプロバイダーを選択した場合、指定したブランチへの変更は検知され自動的に再度デプロイがかかります。

GitHubと連携し、レポジトリと、デプロイ対象にしたいブランチを選択し、「次へ」を押します。

front-02

Amplifyが自動的にレポジトリの中を確認し、package.jsonの中からビルドコマンドと出力先ディレクトリを検出しますが、変更することもできます。

front-03

「YMLファイルを編集」を押すと、amplify.ymlというファイルが確認できます。
このファイルは、レポジトリにそれが存在しない場合に自動的に作成されます。
レポジトリのルートにamplify.ymlというファイルが存在する場合は、Amplifyはその記載内容に応じて動きます。

front-04

ここで１つ、重要なことがわかりました。
「Amplifyはソースコードからamplify.ymlを作って（あるいは読み取って）、それを元にアプリケーションをデプロイしている」
ということですね。（より正確には、Amplifyの1機能であるAmplify Hostingの機能です）

ソースコードのルートにamplify.ymlが存在する場合はそれを使用し、無ければ勝手に作成します（これはデプロイ完了後にダウンロードできます）。

では、「次へ」を押して、作成するアプリの詳細を確認します。

front-05

「保存してデプロイ」を押して少し待っていると、デプロイが完了します。
https://ブランチ名.xxxxxxxxxxxxxx.amplifyapp.com/
というURLが表示されていますね。

アクセスすると、無事にフロントエンドアプリケーションがデプロイされていることを確認できました。

front-06

なお、ブランチに変更を加えると、自動的に再デプロイが行われます。
細かな設定が不要で継続的なデプロイが設定できるので、この仕組みはラクですね。
静的サイトホスティングをする用途であれば、今回のようにレポジトリを選んでボタン数クリックで実現できます。

なお、先ほどのYMLファイルは「ビルドの設定」から確認できます。
このファイルの内容をコピーして、amplify.ymlとしてレポジトリのルートに置けば、以降はそれに従って構築されます。

front-07

ここまでで、AmplifyがWebホスティングも可能なデプロイサービスであることを見てきました。

第2章 Amplifyのバックエンド構築機能を利用する

ストレージ（S3）を追加する

さて、Webサービスのデプロイ+ホスティングサービスとしてのAmplifyを見てきました。ここからは、Amplifyのバックエンド環境の機能を使っていきましょう。

まずは、AmplifyがバックエンドのAWSリソースを構築する仕組みを、ストレージを追加することで理解していきましょう。

Amplifyドキュメント（Gen2, JavaScript）

次に、package.jsonにaws-amplifyを導入してみます。
そうすると、AmplifyはこのレポジトリをGen2に対応したものと認識します。
ドキュメントに従って、amplifyバックエンドを追加してみましょう。

1npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest
2npm install

amplify/storageディレクトリを作り、その中にresource.tsというファイルを作成し、以下のように記載します。

1import { defineStorage } from "@aws-amplify/backend";
2
3export const storage = defineStorage({
4  name: 'amplify-manual-storage',
5});

そして、amplifyディレクトリ内にbackend.tsを作成し、以下のように記載します。

1import { defineBackend } from '@aws-amplify/backend';
2import { storage } from './storage/resource';
3
4defineBackend({
5  storage
6});

レポジトリ例

ここまでやったら、GitHubに変更をPushして、第1章でやったのと同じように、Amplifyを使ってアプリケーションを作成してみましょう。

すると、自動検出されたフレームワークに「Amplify Gen2」という表示が見えます。 package.jsonに@aws-amplify/amplify-backendを追加したので、Amplify Gen2の機能を使っていると判断されました。

storage-01

生成されるamplify.ymlを確認してみると、backendに関する記述が追加されていることがわかりますね。

storage-02

この状態でアプリケーションをデプロイすると、フロントエンドのWebサイトホスティングだけではなく、バックエンドに関するAWSリソース（今回はストレージを提供するS3）も作成されます。

・・・おや！？ CloudFormationのようすが・・・！

次にCloudFormationスタックを見てみましょう。すると、スタックが作成されていることがわかります。

storage-03

先に作成された方のスタックを見てみます。
「テンプレート」タブからこのスタックのテンプレートを確認することができます。

storage-04

これでまたひとつ、重要なことがわかりました。
Amplifyは、内部的にはCloudFormationのテンプレートを作成し、それに従って各種AWSリソースを作成している
ということです。

ソースコード → amplify.yml → CloudFormationのテンプレートファイル → 各種AWSリソース

という流れですね。「出力」タブを見ると、S3バケット名が出力されています。

storage-05

S3のコンソール画面を見ると、先ほど出力されていた名前のS3バケットが作成されていることがわかりました。

storage-06

ソースコードにバックエンドとして使いたいリソースを追加してPushすることにより、
Amplifyが自動的に（CloudFormationを介して）AWSリソースを構築してくれるということがわかりました。

Amplifyの管理画面の「ストレージ」の画面を見てみると、ファイルマネージャのようなUIでS3バケット内のファイルを操作することが可能になっています。

storage-06

これで、バックエンド開発におけるAmplifyの正体は「CloudFormationテンプレート生成機能」ということがわかりました。

amplify.ymlを追加する

さて、再現するにあたっては、amplify.ymlを直接ソースコードのルートに置くようにすれば、
作成するリソースに対してより直接指示が出せるということですね。

また、追加のコマンドを実行させたりといったことが可能になります。

第3章他の機能（AWSリソース）を追加していく

さて、再びAmplifyの管理画面を見てみます。
デプロイやストレージのほか、認証、データ、関数といった機能を利用することができるようです。

backend-01

背後で動いているのはもちろんAWSリソースです。

認証の正体は「Amazon Cognito」
データの正体は「Amazon DynamoDBとAWS AppSync」
ストレージの正体は「Amazon S3」
関数の正体は「AWS Lambda」

backend/resource.tsを追加することで、使いたい機能（AWSリソース）だけを追加できるわけですね。

関数（AWS Lambda）を追加してみる

では、関数を追加してみましょう。

1export const handler = async (event) => {
2  return "Hello from my first function!";
3};

resource.tsを作成します。

1import { defineFunction } from "@aws-amplify/backend";
2
3export const sayHelloFunc = defineFunction({
4  name: "my-first-function",
5  entry: "./handler.ts"
6});

defineBackendに追加します。

1import { defineBackend } from '@aws-amplify/backend';
2import { storage } from './storage/resource';
3import { sayHelloFunc } from './function/say-hello/resource';
4
5defineBackend({
6  storage,
7  sayHelloFunc,
8});

レポジトリ例

デプロイすると、CloudFormationスタックが追加されます。

function-01

出力を見ると、definedFunctionsにLambdaのリソース名が記載されています。
追加した関数がLambda関数として生成されることがわかります。

function-02

Amplifyの管理画面でも追加されていることを確認できます。

function-03

このように、resource.tsを追加するだけで、コマンド不要でLambdaが生成されることが、
Amplify Gen2で開発体験の向上と呼べそうです。

function-03

データベース（AWS AppSync + Amazon DynamoDB）を追加してみる

同様の流れで、今度はデータベースを追加してみましょう。
Amplifyでのデータベースは、AppSyncとDynamoDBの組み合わせで構築されます。
AppSyncはGraphQLのAPIサービス、DynamoDBはNoSQLタイプのデータベースです。

データベースのテーブルの定義をコードで行うことができます。
ここで定義した内容にしたがって、DynamoDBのテーブルが自動的に作成されます。

1import { a } from '@aws-amplify/backend';
2
3export const schema = a.schema({
4  Todo: a.model({
5      content: a.string(),
6      isDone: a.boolean()
7    })
8    .authorization(allow => [allow.publicApiKey()])
9});

resource.tsを作成します。

1import { defineData, type ClientSchema } from '@aws-amplify/backend';
2import { schema } from './schema';
3
4export type Schema = ClientSchema<typeof schema>;
5
6export const data = defineData({
7  schema,
8  authorizationModes: {
9    defaultAuthorizationMode: 'apiKey',
10    apiKeyAuthorizationMode: { expiresInDays: 30 }
11  }
12});

defineBackendに追加します。

1import { defineBackend } from '@aws-amplify/backend';
2import { data } from './data/resource';
3import { storage } from './storage/resource';
4import { sayHelloFunc } from './function/say-hello/resource';
5
6defineBackend({
7  data,
8  storage,
9  sayHelloFunc,
10});