AWS Amplifyで始めよう、スピーディなSPA開発

はじめに

シングルページアプリケーション（SPA）の開発では、フロントエンドとバックエンドをスムーズに連携させることが求められます。AWS Amplify は、クラウドネイティブなアプリケーションを簡単に構築できるフルスタック開発プラットフォームです。
バックエンドの構築、デプロイ、ホスティング、認証、データ管理などを一元化し、開発の効率化を図れます。

本記事では、AWS Amplify を活用した SPA 開発の手順を紹介し、スピーディにアプリを構築する方法を解説します。

対象読者

• フロントエンド開発者で AWS を活用したアプリ構築に興味がある方
• クラウド環境を活用して迅速に SPA を開発したい方
• AWS のサーバーレス技術を活用したバックエンド開発に関心がある方
• 認証・データ管理・ホスティングを統合的に管理したい開発者

事前準備

AWS Amplify を利用する前に、以下の環境を準備してください。

• AWS アカウント: Amplify の各種機能を利用するために必要
• Node.js (推奨: 最新 LTS 版): Amplify CLI の実行に必要
• npm または yarn: パッケージ管理ツール
• AWS CLI: AWS サービスとの連携をスムーズに行うため
• Amplify CLI: AWS Amplify の操作に必要 (npm install -g @aws-amplify/cli)

AWS Amplify の特徴

AWS Amplify は、以下のような特徴を持つ開発者向けのプラットフォームです。

• フルマネージドなホスティング: CI/CD パイプラインを備えた簡単なデプロイ
• 認証機能の提供: AWS Cognito を活用したユーザー認証
• GraphQL API & REST API: AWS AppSync や API Gateway を利用可能
• データストレージ: DynamoDB や S3 をシームレスに統合
• リアルタイム機能: WebSocket や Pub/Sub による双方向通信
• 多様なフロントエンドフレームワークに対応: React, Vue.js, Angular, Next.js など

Amplify を使った SPA 開発の手順

1. AWS Amplify のセットアップ

まず、AWS Amplify CLI をインストールします。

npm install -g @aws-amplify/cli

AWS の認証情報を設定します。

amplify configure

2. React プロジェクトの作成

npx create-react-app my-amplify-app
cd my-amplify-app

Amplify をプロジェクトに追加します。

amplify init

3. 認証機能の追加（AWS Cognito）

amplify add auth

React に Amplify の認証コンポーネントを組み込みます。

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

src/App.js に以下のコードを追加。

import React from 'react';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { withAuthenticator } from '@aws-amplify/ui-react';

Amplify.configure(awsExports);

function App() {
  return (
    <div>
      <h1>Welcome to Amplify SPA</h1>
    </div>
  );
}

export default withAuthenticator(App);

認証機能が有効になり、ユーザー登録とログインが可能になります。

4. API の追加（GraphQL）

GraphQL API を作成。

amplify add api

スキーマを定義し、デプロイ。

amplify push

GraphQL クエリをフロントエンドで使用。

import { API, graphqlOperation } from 'aws-amplify';
import { listTodos } from './graphql/queries';

async function fetchTodos() {
  const todoData = await API.graphql(graphqlOperation(listTodos));
  console.log(todoData);
}

5. アプリのデプロイ

Amplify のホスティングを追加。

amplify add hosting
amplify publish

これで SPA が AWS 上でホストされます。

まとめ

AWS Amplify を活用することで、SPA の開発がスピーディに行えます。
私は主にモックページやサクッとページを用意したいときに大変重宝しています！

ぜひ活用して、クラウドネイティブなアプリ開発を加速しましょう！