Nuxt3の環境にAmplify Gen1を連携してみる

Nuxt3の環境にAmplifyを連携を行ってみたので備忘録として記録を残していきます。

Amplifyの作成は終わっている前提で進めていきます。

開発環境に取り込む

npm install -g @aws-amplify/cliを実行し、amplifyコマンドを実行できるようにします。

AWSのマネジメントコンソールにログインを行いAWS Amplifyにアクセス、作成しているアプリケーションからこまんどを確認してNuxtアプリケーション直下で下記のコマンドを実行します。
ログイン認証も聞かれるのでログインも行います。

amplify pull --appId xxxxxxxxx --envName xxxxxxxxx

ログイン認証を行うと色々と質問されます。

? Choose your default editor: (Use arrow keys)
❯ Visual Studio Code 
  Android Studio 
  Xcode (macOS only) 
  Atom Editor 
  Sublime Text 
  IntelliJ IDEA 
  Vim (via Terminal, macOS only) 
(Move up and down to reveal more choices)

使用しているエディターを選択

? Choose the type of app that you're building …  (Use arrow keys or type to filter)
  android
  flutter
  ios
❯ javascript

今回はNuxtなのでjavascriptを選択

? What javascript framework are you using (Use arrow keys)
  angular 
  ember 
  ionic 
  react 
  react-native 
❯ vue 
  none 

NuxtなのでVueを選択

? Source Directory Path:  assets

ここはassetsを指定。ここを指定することでこの後使用するamplifyconfiguration.jsonの出力先になります。

? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
? Do you plan on modifying this backend? Yes

のこりは全てデフォルト値で指定します。

Nuxt3と連携

開発環境にAmplifyの環境をpullできたら実際にNuxtと連携していきます。

参考サイトは下記になります。
https://docs.amplify.aws/gen1/vue/start/getting-started/setup/

1. npm install aws-amplifyのパッケージをインストールします。

2. plugins/amplify.tsを作成し、下記のように作成。

import { Amplify } from "aws-amplify";
import amplifyconfig from '~/assets/amplifyconfiguration.json';
export default defineNuxtPlugin( async () => {
  Amplify.configure(amplifyconfig);
});

注目するのはimport amplifyconfig from '~/assets/amplifyconfiguration.json';になります。このjsonファイルはamplify pullを実施したときに指定したassetsを指定しています。
実際のディレクトリ内を確認するとassetsの中にassets/amplifyconfiguration.jsonがあることが確認できると思います。

これでNuxtのアプリケーションにアクセスしたときに初めにAmplifyの処理が実行されます。

例えば、ここから認証の処理を追加するなら下記のようなイメージになります。
※amplify add auth amplify push を実行済みの前提で、userデータの管理をuseStateで行っています。

import { Amplify } from "aws-amplify";
import amplifyconfig from '~/assets/amplifyconfiguration.json';
import { fetchAuthSession } from "aws-amplify/auth";
import { Hub } from 'aws-amplify/utils';

export default defineNuxtPlugin( async () => {
  const { user } = useUsers();
  Amplify.configure(amplifyconfig);

  const session = await fetchAuthSession();

  if(session.userSub) {
    user.value = session.tokens?.idToken?.payload["cognito:username"];
  }

  Hub.listen('auth', ({payload}) => {
    switch (payload.event){
      case 'signedIn':
        user.value = session.tokens?.idToken?.payload["cognito:username"];
      case 'signedOut':
        user.value = null;
    }
  });
});

Amplifyを使用したら一から実装するより簡単に認証や認可、バックエンドの実装が可能になります。
ぜひ、興味を持ったら触ってみてください！