☁️
Nuxt3環境でお手軽にAWS Amplifyと連携してみる
インターン先で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
終わり
意外とお手軽!
Discussion