🐸

【初心者向け】Vite + Vue に AWS Amplify Gen2 を導入して認証機能を実装してみた

2025/05/10に公開

【初心者向け】Vite + Vue に AWS Amplify Gen2 を導入して認証機能を実装してみた

Amplify Gen2とは？

AWS Amplify Gen2は、フロントエンド開発者向けのモダンなフルスタック
開発プラットフォームの第2世代です。
第1世代ではインフラ定義がCLIベース（JSON/YAML形式）でしたが、
第2世代ではインフラ定義をTypeScriptで記述できるようになり、より柔軟で開発者に優しい設計となっています。

ViteでVue環境を作成

npm create vite@latest

質問されるので答えていきます📝
今回はVueを選択し、TypeScriptを選択しています。

localhostにアクセスし、以下のような画面が表示されれば成功です🎊

amplify導入

公式のマニュアルセットアップを参考に進めてみます。

npm create amplify@latest

Need to install the following packages:
create-amplify@1.2.0
Ok to proceed? (y) y


> vue-ampgen2@0.0.0 npx
> create-amplify

? Where should we create your project? (.) // そのままEnter

インストールが終わり
Successfully created a new project!
Welcome to AWS Amplify!
と、表示されていれば問題なく終了していると思います。

プロジェクト内をみてみるとamplifyのディレクトリが自動生成されています

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   ├── tsconfig.json
│   └── package.json

中を見てみると、各種バックエンドリソースが以下のように構造化されています。
auth/ や data/ 以下には、認証やデータスキーマなどのリソースがTypeScriptで定義されています。

この記事の手順通りに進めていただいている方はすでにpackage.jsonはあるかと思いますが
もし、ない場合はnpm init -yコマンドを実行しpackage.jsonを作成してください。

package.jsonの中身をみてamplifyの依存関係が存在しているか確認します

"dependencies": {
    "aws-amplify": "^6.14.4",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.16.1",
    "@aws-amplify/backend-cli": "^1.7.1",
    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/tsconfig": "^0.7.0",
    "aws-cdk-lib": "^2.189.1",
    "constructs": "^10.4.2",
    "esbuild": "^0.25.4",
    "tsx": "^4.19.4",
    "typescript": "^5.8.3",
    "vite": "^6.3.5",
    "vue-tsc": "^2.2.8"
  }

"@aws-amplify/backend"
"@aws-amplify/backend-cli"などがない場合は以下コマンドでインストールしてください。

npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest typescript

typescriptは必須ではないそうですが、導入が推奨されています。

以下コマンドでsandbox環境を起動します
※Amplify Gen2 ではローカル開発用に sandbox モードが用意されています。
このモードを使うと、amplify/ ディレクトリ内のバックエンド設定（GraphQLスキーマ、認証、ストレージなど）を監視し、変更があれば即座に反映・再デプロイされるため、開発効率が大幅に向上します。

npx ampx sandbox

CDKの設定ができていなかったのでAWSにログインして設定します。
私は初回でしたので設定が必要でしたがすでに設定済みの方は表示されないはず・・・

待機中🚀

完了画面

これでもう一度以下コマンドを実行すると

npx ampx sandbox

[Sandbox] Watching for file changes...となり
無事に sandbox 環境の起動が確認できました🎊

認証機能の導入

今回は認証画面を導入してみたいと思います。
公式

以下のコマンドを実行してamplifyのUIライブラリを使えるようにします。
今回はVue用ですがもしReactなどで開発されている方はReact用のコマンドでインストールしてください。
認証UIコンポーネントを使うために、Vue用のAmplify UIライブラリをインストールします。

npm add @aws-amplify/ui-vue

インストールが終了したらApp.vueを修正します。

<script setup lang="ts">
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";

import { Amplify } from "aws-amplify";
import outputs from "../amplify_outputs.json";

Amplify.configure(outputs);
</script>

<template>
  <authenticator>
    <template v-slot="{ signOut }">
      <h1>Hello!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

localhostを起動してみてみると
認証画面が表示されています

アカウント作成して、ログインしてみました
無事成功しました

AWS Cognitoにもユーザー情報が登録されていることも確認できました。
認証画面は見た目のカスタマイズや他のログイン方法もできるみたいなので
興味のある方はぜひためしてみてください。(..)_
デザインのカスタマイズ方法については公式ドキュメントに詳しく記載されています👇

おわりに

今回はVite + Vue環境にAWS Amplify Gen2を導入し、認証機能を試してみました。
サンドボックス機能やTypeScriptによる柔軟な定義など、フロントエンド開発者にとって使いやすい構成になっていると感じました。
次回は他の機能も試してみたいと思います！😃

参考記事

https://docs.amplify.aws/vue/

【初心者向け】Vite + Vue に AWS Amplify Gen2 を導入して認証機能を実装してみた

Amplify Gen2とは？

ViteでVue環境を作成

amplify導入

認証機能の導入

おわりに

参考記事

Discussion