はじめに
シングルページアプリケーション（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 の開発がスピーディに行えます。
私は主にモックページやサクッとページを用意したいときに大変重宝しています！
ぜひ活用して、クラウドネイティブなアプリ開発を加速しましょう！