Amplify Gen2 でチュートリアルからDataを抜いてAuthだけ使う

個人的にAmplifyは色々と重たすぎると思っていて、正直あまり使いたくなかったんだけれど、いつのまにかなんだか色々セットになってしまっていて、中途半端に導入するならAmplify Gen2で必要なところだけ使うほうがいいかなと思った。

前提として、「Quickstart - AWS Amplify Gen 2 Documentation」の内容を通して理解していること。QuickstartはAuthとDataを扱っている。

目次

使う、使わないの理由

まぁ正直AuthとCI/CDしか使わないよね。ってかむしろ正直Authだけ使えれば良かったんだけれど、まぁCI/CDはせっかくなので……。CI/CDのところでお金かかっちゃうから、本当のけちんぼはそれすらいらんだろうなぁ。

一方、Dataは使わないよ。Amplify的にはAppSync + DynamoDBを使うことになるのだけれど、これそのまんま使うと、DynamoDBが単純なPKのみ設計でしかも自動ID振り分けみたいなシンプルな構成になっていて、これちょっとまずいでしょ、と思った

PKだけということは、ListはScanかけることになる。チュートリアルのアイテム数ならそれでも動くだろうけれど、まともなアプリケーションでそれは時限爆弾。SK使いたい時はGSIを使うことになるらしい。マジか。そんでQueryかけるには作り込みが必要になるわけだけれど、Amplify + AppSync + DynamoDBとか、ここでしか使えない知識満載そうで嫌になった。一生懸命覚えても、Gen3でハシゴ外されるかもしれないし……。

それだったら伝統のAPI Gateway + Lambda + DynamoDB(認可はCognito)のほうがなんぼかいいと思ったよ。HttpApiならけっこう安いし、使い慣れてるし。

なお、Amplifyの中でもLambdaは作れる。これについては「手を動かして0から理解するAmplify Gen2 #AWS - Qiita」の記事が非常に参考になる。中でやれば、API Gateway使わなくてよくなる(中でWeb Adapterとか使ってるのかなぁ?)し、なによりコードを一緒に管理しやすいのが良いところだ。

ただそのお作法を知るための学習コストはかかるし、また、個人的にはフロントエンドとバックエンドは切り離して管理するほうが良いと思うのもあったので(Firebaseで色々つらかった)、APIについては別で作ることにした。別ならPython使えるし。

あとまぁ、あんまりAmplifyに依存しないほうが、AWSにハシゴ外された時にも対応できるしね……。最近クラウドネイティブな設計はちょっと勢い押されているように感じるのだけれど、ちょっとここ10年、クラウドベンダはユーザをジャイアントスイングしすぎてきたように思う。色々と制約がある割に対応コストも大きいし、金も地味にかかるから、それだったら自分でコンテナたててメンテするほうが自由にできてマシだわってなる。

ビルド手順

ややこしいので、最初はテンプレートをそのまま使っていったんビルドし、その後環境を整えていく。それが一番楽だと思った。

Quickstartをなぞる

いったん「Quickstart - AWS Amplify Gen 2 Documentation」をそのまんま通す。「5. Implement delete functionality」はやらなくていい。

AuthとDataが入っている状態で、ローカル用のサンドボックスがある。DynamoDBを確認するとToDoテーブルが2つできている(本番環境とサンドボックス)。

npx ampx sandboxは実行しておく。

Dataを消す

/amplify/backend.tsからdataを削除。

import { defineBackend } from "@aws-amplify/backend";
import { auth } from "./auth/resource";

defineBackend({
  auth,
});

するとDynamoDBからもサンドボックス用のテーブルが削除される。amplify/dataディレクトリはもう不要なので削除する。

App.tsxでdata使っているところがエラーになるので、不要なところを削除する。

import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>{user?.signInDetails?.loginId}'s todos</h1>
          <div>
            🥳 App successfully hosted. Try creating a new todo.
            <br />
            <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
              Review next step of this tutorial.
            </a>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;

pushしたらCI/CD走ってデプロイされる。

確認

以下を確認。

  • sandbox、web環境ともにサインアップできる
  • Cognitoはsandboxとwebのものがそれぞれ、DynamoDBのリソースは消えている

準備完了したので、あとは開発

sandbox用に開発者のローカルテストのためだけリソース作るの見た時は笑ったんだけれど、これこそクラウドネイティブの考え方だよなぁとも思った。Mockで追従するの本当に不毛感あるし、本番環境にまさるリソースはないよね、っていう。DataもLambdaもフルに使えば、恩恵受けられるんだろうけどね。やりたいことはわかるんだけど……(含みがある)。

これ開発でやったら、人員の引き継ぎとかでうまくクリーンアップされないまま残るゴミリソースいっぱいできそう。プロジェクトレベルでAWSのアカウントは必要だよなぁ。ってかみんなそうしてるのかね。

本サイトはUXを悪くするevilなGoogle広告を消しました。応援してくださる方は おすすめガジェット を見ていってください!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次