Zenn
🦔

Amplifyを用いたWEBサイトの構築方法をやってみた

2022/11/07に公開
AWS
React
Amplify
AppSync
Cognito
tech

こちらのハンズオンを行いました。認証機能のあるtodoアプリが作れます。
AWS Amplify を用いた Web サイトの構築方法を学ぼう

インフラ構成はこちらです。

Amplifyとは

  • webフロントエンド・モバイルの開発を加速させるための作られたプラットフォーム
  • バックエンドと接続するためのクライアントライブラリ
  • awsを用いたサーバレスなバックエンドを構築するためのcliを持つ
  • webサイトのホスティングの仕組みを持つ

ざっくりamplifyを使って認証、データストア、api基盤、ストレージ、リアルタム通知、webホスティングなんでも連携できる

appsyncとは

GraphQL APIの開発を容易にするマネージドサービス

cognitoとは

web・モバイルアプリの認証認可、ユーザー管理機能を提供

  • ユーザープール
    • アプリへのアクセスに利用できるトークンを提供
  • IDプール
    • awsにアクセスできるクレデンシャルを提供

構築手順

  1. cloud9の環境を作成する
  2. amplifyやフロントエンドのセットアップを実行する
    2-1. amplifyにAPIを追加する
    2-2. amplifyに認証認可を追加する
    2-3. amplifyにホスティングを追加する
    2-4. amplifyをデプロイする

cloud9の環境を作成する

デフォルトからの変更点

  • インスタンスタイプはt2.microではなくt3.smallを選択
    ※このハンズオンで使うec2のインスタンスタイプは無料枠を超えるので早めにリソースの削除を！

  • awsが管理する一時的な認証情報を無効化(amplify cliが発行する認証情報自体を使うため)

    • cloud9->preferences->aws settings->credentialsをオフに設定

  • cloud9のインスタンスのebs volumeを10Gから32Gに引き上げる(ebs volumeの容量が不足してしまうため)

amplifyやフロントエンドのセットアップを実行する

ここからはamplifyのチュートリアルに沿って実行する

注意点 2022年11月7日時点だと8系のインストールに失敗するため7系をインストールする

# 2022年11月7日時点のnodeのバージョン
$ node -v
16.18.0

# latestバージョンでインストールに失敗したら7系を指定してインストールする
$ npm i -g @aws-amplify/cli@7.6.21

参考URL

リソースの削除

  1. amplifyリソースの削除
$ amplify delete
  1. cloud9の環境を削除

まとめ

amplifyのcliコマンドを叩くだけでawsサービスを深く理解せずともアプリを作ることができる。
amplify自体はossなので内部を掘ってみるとより理解が深まるかも。
https://github.com/aws-amplify

Discussion