♟️

初めてのAWS Amplify ~概要編~

に公開
AWS
Amplify
AWS 認定試験
AWSSAA
webapp
tech

はじめに

アプリケーション開発に必要な一般的な技術要素をゼロから構築するのは重労働
本来のアプリケーションの実装に集中したい
→ そこで利用できるのがAWS Amplify

本記事を読むべき対象

  • AWS Amplifyの概要を掴みたい方
  • AWS Certified Developer - Associateを受験予定の方
  • AWS環境でのWeb・モバイルアプリケーション開発に興味のある方

AWS Amplifyとは

Webアプリケーションやモバイルアプリケーションを構築、デプロイ、ホスティングするためのフルスタック開発プラットフォーム。
フロントエンドアプリとバックエンド(API・認証・DBなど)を素早く構築・デプロイ可能。
React・Vue・Angular・Next.js・Flutterなどに対応。

Amplifyの構成要素

Amplify CLI

AWS Amplifyでアプリのバックエンド(認証・API・DBなど)をコマンドだけで作成・管理・デプロイできるツール。以下のような特徴がある。

できることの代表例

# プロジェクトの初期化
$ amplify init

# 認証機能(Cognitoを追加)
$ amplify add auth

# API(RESTやGraphQL)を追加
$ amplify add api

# S3ストレージの設定
$ amplify add storage

# 変更をAWSに反映(デプロイ)
$ amplify push

Amplify Studio

AWS AmplifyのGUI(画面操作)でバックエンドやUIを構築できる開発ツール。
特にノーコード・ローコードでの開発やデザイナーと開発者の共同作業をサポートするのが特徴。
以下の流れで開発を行える。

Amplify Studioの主な機能

機能 内容
UI Builder ドラッグ＆ドロップでReactコンポーネントを構築(Figma連携も可)
データモデル設計 DynamoDBのスキーマをGUIで設計し、自動的にGraphQL APIを生成
認証設定 GUIでログイン・サインアップ設定(Cognito)
デプロイ管理 Studioからそのままデプロイ操作も可能
ユーザーデータ操作 GUIでユーザー情報の確認・編集が可能

Amplify Libraries

フロントエンドやモバイルアプリからAWSの各種サービス(認証・API・DB・ストレージなど)に簡単にアクセスできるSDK群。以下のような言語やフレームワークで使用可能

主な機能ごとのライブラリ

特徴・メリット

  • 簡単なインポートで使用可能(Amplify.configureで設定連携)
  • 認証やAPIなどが統一されたインターフェースで操作可能
  • モバイルでも同様のコードスタイルで開発可能
  • オフライン・キャッシュ・同期といった高度な機能も対応可能

AWS Amplifyの主な特徴

ホスティング(静的サイトのデプロイ)

React、Vue、Next.jsなどの静的/SPAサイトを簡単にデプロイ可能

  • GitHubなどのリポジトリと連携するだけで、コードの変更を自動でビルド＆デプロイ
  • 独自ドメインの設定やSSL証明書の適用も数クリックで完了
  • デプロイは高速なCDNで配信されるため高パフォーマンス
# アプリにホスティング機能を追加
amplify add hosting

# アプリをビルドして、指定したホスティング環境にデプロイ
amplify publish

認証機能(Cognito連携)

ユーザーのサインアップ・ログインなどの認証機能を簡単に追加可能。Amplifyは内部的にAmazon Cognitoを使っているが、複雑な設定は不要。

  • メール認証 / 多要素認証(MFA)対応
  • ソーシャルログイン(Google, Facebook, Apple)にも対応
  • 認証状態の管理、セッションの保持も自動

フロントでの使用例

import { Auth } from 'aws-amplify';

// ユーザー新規登録
await Auth.signUp({ username, password, attributes: { email } });

// サインイン（ログイン）
await Auth.signIn(username, password);

GraphQL/REST APIの自動生成(AppSync/Lambda)

GraphQLまたはREST APIを選んで簡単に構築可能。

GraphQL API

  • AppSync + DynamoDBの構成を自動で構築
  • スキーマ(GraphQL)をかくと、それに基づいたクエリ・ミューテーション・サブスクリプションを自動生成
  • オフライン対応のデータストアとも連携可能

REST API

  • AWS Lambdaを使って関数ベースのAPIを作成
  • API Gateway経由でHTTPエンドポイントを公開

CLIでの例

amplify add api
# → GraphQL か REST を選ぶ
amplify push

データベース(DynamoDB)との連携

GraphQLやREST APIを作成するときに、データベースとして自動的にDynamoDBが用意される。

  • スキーマから自動でテーブル作成(GraphQL)
  • 認証機能と組みわせて、ユーザーごとのデータアクセス制御も可能
  • NoSQLベースのためスケーラブルで高速

GraphQLの例

type Todo @model {
  id: ID!
  name: String!
  completed: Boolean
}

ストレージ(S3)へのファイル保存

Amplifyでは、ユーザーがアップロードした画像やファイルをAmazon S3に簡単に保存・取得可能

  • 認証と連携して、ユーザーごとのアクセス制御が可能
  • フォルダ構造の指定やパブリック・プライベートアクセスも選択可能

JavaScriptでの例

import { Storage } from 'aws-amplify';

// アップロード
await Storage.put('example.jpg', file);

// 取得
const url = await Storage.get('example.jpg');

CI/CDの自動化

Amplify ConsoleにGitHubなどのリポジトリを連携すれば、ブランチごとにCI/CDパイプラインが自動生成される。

  • コミット→ビルド→テスト→デプロイが自動で行われる
  • 開発環境・本番環境などのブランチごとのステージ管理が可能
  • ビルドエラー時の通知やログ確認もGUIで簡単

まとめ

  • AWS Amplifyは、フロントエンドアプリやモバイルアプリを素早く開発・デプロイできるフルスタック開発基盤
  • 認証、API、ストレージ、ホスティングなどを簡単に追加でき、バックエンドとの統合を自動化
  • CLIやStudioを通じて、インフラ構築からUI生成まで効率的に行えるのが特徴

Discussion