Amplify入門｜フロントからバックエンドまで一気に作るアプリ開発ガイド

こんにちは、kawaharaです。

AWS Amplify（以下、Amplify）は、フロントエンド（画面側）とバックエンド（ログイン・API・データベースなど）をまとめて面倒見てくれる、初心者にもやさしいアプリ開発プラットフォームです。

この記事では、「まずは1つのシンプルなWebアプリをAmplifyで立ち上げる」までの全体像を、できるだけ専門用語を噛み砕きながら解説します。細かい実装の書き方ではなく、「どこをクリックして、何を設定すればいいか」が分かることをゴールにしています。

また、この記事は「Amplifyでアプリ作成」カテゴリの基礎記事です。今後書いていく「Cognitoログイン機能」「Lambda＋API GatewayのAPI作成」などの詳細記事の土台となるピラー記事の位置づけになります。

この記事の結論とゴールイメージ

最初に結論からお伝えすると、Amplifyを使えば「インフラどうしよう…」「認証どう作るの…？」と悩まずに、最低限の設定だけでアプリを公開するところまで一気に進められます。

この記事のゴールは次の通りです。

AWSアカウントと開発環境（PC側）の準備が終わっている
Amplifyで新しいアプリプロジェクトを作成できる
ログイン機能やAPIなど、バックエンドを追加する全体の流れがイメージできる
最後にアプリをWebにデプロイ（公開）する流れが分かる

イメージとしては、「お弁当を自分でゼロから作る」のではなく、「お弁当キット」をうまく使って組み立てるような感覚に近いです。ご飯（フロント）、おかず（バックエンド）、お弁当箱（インフラ）があらかじめ型として用意されていて、必要なものを選んで配置していくイメージです。

AWS Amplifyとは？初心者向けにざっくり理解する

Amplifyの役割を一言でいうと？

Amplifyは、「フロントエンド開発者のためのフルスタックアプリ開発キット」です。

フロントエンド：React / Next.js などのSPA（シングルページアプリ）
バックエンド：認証（Cognito）、API（Lambda＋API Gateway）、データベース（DynamoDBなど）
ホスティング：静的サイトやフロントアプリの自動デプロイ

これらをバラバラに手作業で構築するのではなく、「Amplify」という1つの窓口からまとめて設定・管理できるのが大きなポイントです。

なぜAmplifyを使うと楽になるのか（理由）

インフラをゼロから構築しようとすると、VPC・サブネット・セキュリティグループなど、ネットワークやセキュリティの知識が必要になります。Amplifyを使うと、そういった「まず環境を作るための前提作業」をかなりスキップできます。

ログイン機能：「amplify add auth」で対話的に設定 → Cognitoユーザープールが自動作成
API：「amplify add api」で必要なAPI種別を選択 → Lambda＋API Gatewayなどを自動構成
ホスティング：GitHub連携をすると、プッシュするだけで自動デプロイ

つまり、「何のサービスをどう組み合わせればいいのか？」で悩む時間を大幅に減らせるのがAmplifyの一番のメリットです。

事前準備｜AWSアカウントと開発環境を整える

必要なもの一覧（チェックリスト）

まずは、以下の環境が整っているか確認しましょう。

AWSアカウント（クレジットカード登録済み）
PC（Mac or Windows）
Node.js（推奨：LTSバージョン）
npm または yarn
Git（GitHubを使う場合はアカウントも）
VS Codeなどのコードエディタ

細かいバージョンは公式ドキュメントに準拠しますが、「普段JavaScriptでフロントを書いている人」なら、そのままの環境＋αで始められると思ってOKです。

AWSコンソール側の準備手順

ブラウザでAWSコンソールにログインし、次のポイントだけ確認しておきます。

画面右上のリージョンが「Asia Pacific (Tokyo) ap-northeast-1」など、普段使いたいリージョンになっているか
請求アラート（Billingアラート）を設定済みか（使いすぎ防止）

リージョンは後からでも変更できますが、最初から東京リージョンで揃えておくとリソースが散らばらず管理しやすくなります。

Amplify CLIのインストール手順

続いて、PC側に「Amplify CLI」をインストールします。これはターミナルでAmplifyの設定を行うためのコマンドラインツールです。

1. ターミナル（またはPowerShell）を開く
2. 次のコマンドを入力して実行
npm install -g @aws-amplify/cli
3. インストール完了後、amplify -v でバージョンが表示されればOK

これで、ターミナルからAmplifyのプロジェクト作成やバックエンド追加ができる準備が整いました。

ステップ1｜フロントエンドの土台となるプロジェクトを作る

Reactアプリを作成する（例）

ここでは例として、Reactを使ったシンプルなフロントアプリを作ります。すでに既存のフロントアプリがある場合は、このステップは読み飛ばしてOKです。

1. プロジェクト用のフォルダを作成
例：デスクトップに amplify-app フォルダを作る
2. ターミナルでそのフォルダに移動
cd ~/Desktop/amplify-app
3. Reactアプリを作成
npx create-react-app my-amplify-app
4. 作成されたフォルダに移動
cd my-amplify-app

「create-react-app」は、ひな形となるReactアプリを一気に作ってくれるテンプレートキットのようなものです。ここまでで、ブラウザに「Hello World」相当を表示できる状態になります。

ローカルで一度動かしてみる

正しく作れているか確認するため、一度ローカルでアプリを起動します。

1. ターミナルで npm start を実行
2. ブラウザが自動で開き、http://localhost:3000 にアクセスされる
3. Reactの初期画面が表示されればOK

ここまで来れば、「フロントアプリの箱」は準備完了です。この箱に、次のステップでAmplifyの機能を足していきます。

ステップ2｜Amplifyプロジェクトを初期化する

amplify initの流れを理解する

次は、先ほど作ったフロントアプリを「Amplify管理下のプロジェクト」に変える作業です。その入口が amplify init です。

1. ターミナルでフロントプロジェクトのルートにいることを確認
例：my-amplify-app フォルダ内
2. 次のコマンドを実行
amplify init

コマンドを実行すると、ターミナル上でいくつか質問が表示されます。ここでは、最低限押さえたい選択肢だけに絞って解説します。

amplify initの主な入力項目（例）

Enter a name for the project:
例：myamplifyapp（小文字＋英数字）
Environment name:
例：dev（開発環境）
Choose your default editor:
普段使っているエディタ（VS Codeなど）を選択
Type of app that you’re building:
javascript を選択
What javascript framework are you using:
react を選択（Reactの場合）
Source Directory Path:
デフォルトの src のままでOK
Build command / Start command:
デフォルトの npm run build / npm start のままでOK
Initialize the project with the above configuration:
Y を入力

この流れが終わると、ローカルのプロジェクトに amplify フォルダが作られ、AWS側にも対応する環境が用意されます。

ステップ3｜認証・API・データなどバックエンド機能の全体像をつかむ

Amplifyで追加できる主なバックエンド機能

Amplifyでは、次のようなバックエンド機能を「追加モジュール」のような感覚で足していきます。

認証（Auth）：ユーザー登録・ログイン・ログアウト
API：REST API または GraphQL API
ストレージ：ファイルアップロード（S3）など
データベース：DynamoDBなどのNoSQLデータストア
ホスティング：アプリのデプロイ・公開

それぞれの機能は、

amplify add auth
amplify add api
amplify add storage

といった形で、「add ○○」コマンドを叩きながら対話形式で追加していきます。

全体のイメージ：積み木のように機能を足していく

イメージしづらい場合は、「積み木」を想像してみてください。

土台の板：フロントアプリ（Reactなど）
1段目の積み木：認証機能（Auth）
2段目の積み木：API（Lambda + API Gateway）
3段目の積み木：データベースやストレージ

Amplifyは、この積み木を「崩れないように、いい感じのバランスで積んでくれるアシスタント」のような役割です。自分は「どの積み木を使うか」を選べばOK、というイメージです。

ステップ4｜Amplifyでアプリをクラウドにデプロイする流れ

デプロイまでの大まかなステップ

ここでは、「ローカルで動くアプリを、インターネットからアクセスできる状態にする」までの全体像をまとめます。

1. ローカルでAmplify環境を整える（amplify init）
2. 必要なバックエンド機能を追加（例：amplify add auth）
3. 変更内容をAWSに反映（amplify push）
4. GitHubリポジトリを作成し、コードをプッシュ
5. AWSコンソールのAmplify画面からGitHubリポジトリを接続
6. ブランチ（例：main）を指定して「デプロイ」

Amplify Hostingを使うと、以降はGitHubにコードをプッシュするたびに自動でビルド＆デプロイしてくれます。DTMでいうと「プロジェクトを書き出すと、配信サイトに自動アップロードしてくれる」ようなイメージです。

AWSコンソール上での具体的な画面操作イメージ

Amplify Hostingの設定は、AWSコンソール上の操作で行います。

1. AWSコンソール上部の検索窓に Amplify と入力し、「AWS Amplify」をクリック
2. 「Get started」または「New app」ボタンをクリック
3. 「Host your web app」など、ホスティングの項目を選択
4. リポジトリプロバイダとして GitHub を選び、GitHubアカウントと連携
5. 対象のリポジトリとブランチ（例：main）を選択
6. ビルド設定はデフォルト（buildspec.ymlが自動生成される場合も）でOK
7. 「Save and deploy」をクリック

ビルドとデプロイが完了すると、Amplifyコンソール上に自動で割り当てられたURLが表示され、そのURLにアクセスすればWeb上からアプリを確認できます。

よくあるつまずきポイントと、考え方のコツ

専門用語の渋滞に飲み込まれないために

Amplifyを触り始めると、「Cognito」「AppSync」「CloudFormation」など、AWSのサービス名が一気に出てきます。ここで全部を理解しようとすると、ほぼ確実に心が折れてしまいます。

最初のうちは、

Cognito：ログイン機能をまとめて担当してくれるサービス
Lambda：必要な処理をちょっとずつ書いて実行してくれる場所
API Gateway：外からLambdaを呼ぶための入口
CloudFormation：AWSリソースの設計図

くらいの「ざっくりイメージ」だけ持っておけばOKです。細かいところは、今後の個別記事（Cognito編・Lambda編）で少しずつ深掘りしていく、というスタンスで大丈夫です。

エラーが出たときの見方のコツ

Amplifyでつまずきやすいのが、amplify push したときのエラーです。ログが長くて嫌になるのですが、ポイントは次の2つです。

・「×」や「failed」の行を探す
・その直前の英語を、なるべくそのままコピーして検索する

DTMでいうと、プラグインのエラー文言をそのままググるのと同じ感覚です。「エラー全文を理解する」のではなく、「キーワードとして使う」ぐらいの距離感でOKです。

まとめ｜Amplifyでまずは1つ、アプリを立ち上げてみよう

この記事のおさらい（結論 → 理由 → 手順）

■ 結論

Amplifyを使えば、フロントエンドとバックエンド、そしてホスティングまでを一気に構築できるので、「インフラどうしよう問題」で悩まずにアプリ開発を進められます。

■ 理由

バックエンド機能（認証・API・ストレージなど）を「add」コマンドで追加できる
Amplify Hostingを使えば、GitHubと連携して自動デプロイできる
裏側でCognitoやLambdaなどをいい感じに組み合わせてくれる

■ 手順（ざっくり）

1. AWSアカウントとローカル環境を準備する
2. フロントエンドの土台となるReactアプリなどを作成する
3. amplify init でプロジェクトを初期化する
4. 必要なバックエンド機能を「amplify add ○○」で追加する
5. amplify push でAWS側に反映する
6. Amplify HostingからGitHubと接続し、アプリをデプロイする

今後の「Amplifyカテゴリ」の読み進め方

繰り返しになりますが、この記事は「Amplifyでアプリ作成」カテゴリの基礎記事（ピラー）です。このあと、より実践的な記事として、

Cognitoログイン機能の作成（実装編）
Lambda＋API GatewayのAPI作成（バックエンド編）

などを順番に読んでいくことで、実際にログイン付きのアプリや、バックエンドAPIをもつWebサービスを作れるようになる流れを想定しています。

Streak Pledge Journal

このブログを検索