Nuxt3環境でお手軽にAWS Amplifyと連携してみる

シリーズまとめ

https://zenn.dev/seiwell/articles/ee64863ad2ab88

はじめに

インターン先でAmplifyを使っていたので、その勉強のために個人で色々やってみたときの備忘録。
今回は、既存のNuxt環境をAmplifyにあげる前提で進めていきます。

Amplifyのバージョン

Ampligyには、どうやらGen1とGen2があるようで、今回はGen2で進めています。

パッケージのインストールとAmplify環境の作成

$ pnpm install
$ pnpm create amplify@latest
? Where should we create your project? (.)
# そのままエンター

AWSとの認証

まずは、後に必要となるアクセスキーとシークレットアクセスキーを作成するため、AWSのコンソールにアクセスします。(IAMユーザーの作成は、既にしてある前提です)

右上のユーザー名をクリック、「セキュリティ認証情報」にアクセス。すると、下記のような画面になるので、下の方にスクロールして、

アクセスキーの欄があるので、「アクセスキーを作成」をクリック

ローカルコードを選択して、注意事項の部分のチェックボックスにチェックを入れて「次へ」を押すと

アクセスキーが作成されます。CSVをダウンロードするかメモしておいてください。

連携設定

アクセスキーとシークレットアクセスキーの作成ができたので、実際にNuxt環境で連携してみます。

$ pnpm ampx configure profile

? Do you already have IAM User credentials?
# 既にIAMユーザーを作成しているので、「y」を選択。ない場合は、「n」を選択すると、作成画面にリダイレクトされます。
? Enter Access Key ID:
#  先ほど作成したアクセスキーを入力
? Enter Secret Access Key:
#  先ほど作成したシークレットアクセスキーを入力
? Enter the AWS region to use with the 'default' profile (eg us-east-1, us-west-2, etc):
# 今回は「ap-northeast-1」を入力。お好きなリージョン名を入力してください。

サンドボックスの起動

サンドボックスを立ち上げることで、ローカル環境であってもAWSといい感じに接続してくれるそう。便利。

$ pnpm ampx sandbox

終わり

意外とお手軽！