前々からAWS Amplifyが気になっていたので、AWS Hands-on for BeginnersのAmplify編を試してみました。

AWS Amplifyとは

フロントエンドやモバイルアプリの開発に必要なAWSのバックエンドを簡単に構築するための仕組みです。

AWSに関する知識がなくてもバックエンドを構築できる点がメリットかと思います。フロントエンドからバックエンドに接続するためのAmplify Libraryも用意されています。

Amplifyで構築できる機能

認証
API基盤(Graph QL, REST API)
プッシュ通知
データストア
ストレージ
分析
Webホスティング

aws.amazon.com

ハンズオンについて

今回試したハンズオンは「AWS Amplify を用いた Web サイトの構築方法を学ぼう」になります。

ハンズオン資料 | AWS クラウドサービス活用資料集

下記URLにある、Amplify Docsのチュートリアル(React版)の一部を実施する形式で進みます。コードは用意されているので、Reactの学習経験がなくても大丈夫です。

https://docs.amplify.aws/start/q/integration/react/

動画収録時とチュートリアルの表現が一部で変わっている部分もありますが、特に問題なく進められました。

セッション一覧

今回のハンズオンで作る構成とAmplifyの紹介
AWS Amplify のハンズオン（環境構築、Cloud9 編）
AWS Amplify のハンズオン（環境構築、CLI 編）
AWS Amplify のハンズオン（FE/API/DB 編）
AWS Amplify のハンズオン（Auth 編）
AWS Amplify のハンズオン（Hosting 編）
本シリーズのまとめ、リソースの削除

完了までの所要時間は大体1時間半くらいでした。

学んだこと

Amplify CLIの設定

AWSアカウントとの紐付けにあたる設定をします。

amplify configure

対話的に進める中でIAMのアクセスキーを発行するので、その情報をAmplify CLIに設定します。

ここで用意したIAMユーザーはAdministrator Access権限を持っているのでアクセスキーの取り扱いに注意が必要です。

AWSバックエンド環境の初期化

アプリケーションのプロジェクト直下で初期化コマンドを実施します。

amplify init

APIを追加

質問に対話的に答えていくとAPIに必要なリソースが準備されます。

amplify add api

バックエンドのリソース確認

Amplifyで追加した機能をはじめとするバックエンドのリソースの確認ができます。

amplify status

バックエンドのデプロイ

amplify statusで確認した各リソースがデプロイされます。デプロイの仕組みとしてAWS CloudFormationが使われてるようです。

amplify push

認証機能の追加

Amazon Cognitoを使ったログイン環境を構築します。

amplify add auth

ホスティング環境の構築

リソースをホスティングするための環境を準備します。

amplify add hosting

ホスティング先にビルド・デプロイ

amplify pushに加え、アプリケーションをビルドし、ホスティング先にデプロイします。

amplify publish

Amplify環境の削除

Amplifyで構築した環境を削除します。

amplify delete

まとめ

ハンズオンを通してAmplifyに入門してみました。

チュートリアルの範囲ではAWSを意識せずにアプリケーション用のバックエンドやデプロイができたので、 AWSに詳しくない開発者でも簡単にリリースできるサービスと感じました。

これを足がかりにAmplify SNS Workshopなど、他のコンテンツも試してみようと思います。

history.log

AWS Amplifyのハンズオンをやってみた