amplify aws
ネット上のaws amplify の情報は新旧いろいろ混ざっている。細々した疑問を整理したい。
前提
自分のやりたいことはvue3でamplifyを動かしたい
amplify とvue + viteの組み合わせについて
まずviteで動かすのはかなり困難が伴うことが分かったのでvue cliで実装することが望ましいと分かった。そもそも動かせるとして後にどこに影響してくるか分からないのが怖い。ここはVue CLIが良いと分かった。
Vite not working with aws-amplify package · Issue #685 · vitejs/vite · GitHub
Not working with aws-cli / aws-amplify · Issue #1374 · vitejs/vite · GitHub
amplifyとvue + vue cli とCSSフレームワーク
現在Vue3はvuetifyに対応しておらず、tailwindを使う場合もある。その時はライブラリの依存関係に注意して環境を作ればなんとかなった印象。公式ドキュメントにはvue cliを使ってtailwindを導入する事例もないし、そこらへんの記事を見て試してもうまく行かないことが多かったが、良い記事を見つければなんとかなった。
EventBusとHub問題（これらは同一のものとして考えてあげる）
まずAmplifyEventBusとHubは同じ役割を果たすものだろうという認識になった。機能的には全く別のものではない事がわかった。
上によると、amplifyEventBusはレガシーだからHubを使いましょうとある。 確かにamplify 公式ドキュメントのUI Component部分をみれば、legacyとlatestに分かれていて、legacyの部分にeventBusを使う説明が書いてある。このlegacyかlatestの部分で使うライブラリが変わってくるのだけれども、コレもその１つだった。
EventBusとHub問題（イベント時に処理を付け加えたい時に使う）
Hubはどんな時に使えばよいのか。これも１つの問題だった。この問題はこのようにも置き換えられる。amplifyが準備してくれる機能はどこまでカバーしてるいるのか。 カバーをしていないところでHubを使うだろうことはわかるのだが、どこまでカバーしているかは知らず困った。特に最初の方はHubを使わないでもamplifyのUIコンポーネントを使えば認証系はすべて解決すると思っていた。この認識は誤りであった。
使用するライブラリ
amplifyドキュメントUI component部分にはLatestバージョンとLegacyバージョンのドキュメントが存在する。 それぞれで利用するライブラリが変わり、そのためインストールするライブラリを変える必要がある。
Legacyバージョンのインストールするライブラリは以下の通り。
npm i aws-amplify npm i aws-amplify-vue
Amplify UI (Legacy) - Amplify Docs
Latest版のライブラリのインストールは一通りではなく、Vueのバージョンでインストールするライブラリが変わってくることに注意したい。
Vue2
yarn add aws-amplify @aws-amplify/ui-vue
Vue3
yarn add aws-amplify @aws-amplify/ui-components
割とライブラリの組み合わせをよく見て記事を見ないと全然できるようにならないのでこの点は十分気をつけたい。
実際にVue3の場合で組み立てた際はaws-amplify @aws-amplify/ui-componentsをインストールすればよく。その他必要となるものはなかった。
