Nuxt.jsにAWS Amplifyを導入する

2021年5月20日 / 最終更新日時 : 2021年5月25日 admin AWS(Amazon Web Services)

Amplify使うと、AWSを使ってバックエンドを構築できるとの事。
今回、フロントはNuxt.js(Vue)を使って試してみました。
Nuxt.jsでVue.jsに触れてみるで作ったのを使います。

Amplify CLIインストール

% yarn global add @aws-amplify/cli

success Installed "@aws-amplify/cli@4.51.0" with binaries:
      - amplify
✨  Done in 78.49s.

考察

これはPC毎に必要。amplifyコマンドを使えるようになる。

IAMユーザー作成

% amplify configure
ブラウザでAWSにログインしたら、コンソールに戻ってEnter

作りたい場所を選択。今回は東京リージョン(ap-northeast-1)を選択
Specify the AWS Region
? region:  
  eu-west-1 
  eu-west-2 
  eu-central-1 
❯ ap-northeast-1 
  ap-northeast-2 
  ap-southeast-1 
  ap-southeast-2 
(Move up and down to reveal more choices)

ユーザー名が良さそう。amplify push（リソース作成等）で使われる。
Specify the username of the new IAM user:
? user name:  (amplify-CeMxt) 

ブラウザで、デフォルトのままユーザー作成
アクセスキーIDとシークレットアクセスキーをメモ
コンソールに戻ってEnter

メモしたアクセスキーIDを入力
Enter the access key of the newly created user:
? accessKeyId:  [hidden] 

メモしたシークレットアクセスキーを入力
? secretAccessKey:  [hidden] 

AWSアカウントに紐づく何かが良さそう。環境で切り替える。
This would update/create the AWS Profile in your local machine
? Profile Name:  (default) 

Successfully set up the new user.

確認

IAMユーザー
https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/users

リージョンとクレデンシャル

% cat ~/.aws/config
[profile ***(Profile Nameが入る)]
region=ap-northeast-1

% cat ~/.aws/credentials
[***(Profile Nameが入る)]
aws_access_key_id=***(アクセスキーIDが入る)
aws_secret_access_key=***(シークレットアクセスキーが入る)

考察

他の人がこれか手動で作って、開発者にクレデンシャル（アクセスキーID、シークレットアクセスキー）を渡す運用でも良さそう。
必要なくなったら対象のIAMユーザーを削除すれば安全。

AWS アクセスの種類を選択
■プログラムによるアクセス
□AWS マネジメントコンソールへのアクセス <- コンソールログインも使われたい場合はチェック

アクセス許可の設定
■AdministratorAccess <- 権限強すぎる気がするが、dev用のアカウントなら問題ない

Amplify初期設定

Nuxt.jsでVue.jsに触れてみるで作ったのを使います。

% cd nuxt-app-origin
% amplify init

デフォルトのまま。アルファベットで3-20文字で、ハイフンとかは使えない。
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project (nuxtapporigin)

2回目に以前のを使うか聞かれる。今回はNo
Noを選択。default editor/javascript framework/Start Commandが変わってしまう。
? Initialize the project with the above configuration? (Y/n)

デフォルトのまま
? Enter a name for the environment (dev)

使うのを選択
? Choose your default editor: (Use arrow keys)
❯ Visual Studio Code
Android Studio
Xcode (Mac OS only)
Atom Editor
Sublime Text
IntelliJ IDEA
Vim (via Terminal, Mac OS only)
Emacs (via Terminal, Mac OS only)
None

デフォルトのまま
? Choose the type of app that you're building (Use arrow keys)
android
flutter
ios
❯ javascript

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

デフォルトのまま
? Source Directory Path: (src)

デフォルトのまま
? Distribution Directory Path: (dist)

デフォルトのまま
? Build Command: (npm run-script build)

デフォルトのまま
? Start Command: (npm run-script serve)

デフォルトのまま
? Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile
AWS access keys

先ほど入力したProfile Nameを選択
? Please choose the profile you want to use (Use arrow keys)
❯ default
***(Profile Nameが入る)

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add " will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

考察

.vscode/settings.json

{
  "files.exclude": {
    "amplify/.config": true,
    "amplify/**/*-parameters.json": true,
    "amplify/**/amplify.state": true,
    "amplify/**/transform.conf.json": true,
    "amplify/#current-cloud-backend": true,
    "amplify/backend/amplify-meta.json": true,
    "amplify/backend/awscloudformation": true
  }
}

default editorでVisual Studio Codeを選択したら作られた。
他のも作ってくれればいいのに。

amplify/.config/project-config.json

{
  "projectName": "nuxtapporigin",
  "version": "3.1",
  "frontend": "javascript",
  "javascript": {
    "framework": "vue",
    "config": {
      "SourceDir": "src",
      "DistributionDir": "dist",
      "BuildCommand": "npm run-script build",
      "StartCommand": "npm run-script serve"
    }
  },
  "providers": [
    "awscloudformation"
  ]
}

回答した内容がここに入ってます。

amplify/backend/backend-config.json
amplify/backend/tags.json
amplify/cli.json
amplify/README.md

amplify/team-provider-info.json

{
  "providers": {
    "awscloudformation": {
      "AuthRoleName": "amplify-nuxtapporigin-dev-xxxxx-authRole",
      "UnauthRoleArn": "arn:aws:iam::xxxxxxxxxxxx:role/amplify-nuxtapporigin-dev-xxxxx-unauthRole",
      "AuthRoleArn": "arn:aws:iam::xxxxxxxxxxxx:role/amplify-nuxtapporigin-dev-xxxxx-authRole",
      "Region": "ap-northeast-1",
      "DeploymentBucketName": "amplify-nuxtapporigin-dev-xxxxx-deployment",
      "UnauthRoleName": "amplify-nuxtapporigin-dev-xxxxx-unauthRole",
      "StackName": "amplify-nuxtapporigin-dev-xxxxx",
      "StackId": "arn:aws:cloudformation:ap-northeast-1:xxxxxxxxxxxx:stack/amplify-nuxtapporigin-dev-xxxxx/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
      "AmplifyAppId": "xxxxxxxxxxxxx"
    }
  }
}

CloudFormationの設定。アカウントIDは解るけど、クレデンシャルはないので、見られても問題なさそう。
アカウントに紐付く情報なので、ソース公開する場合、書き換えを促す必要がありそう。
~~TODO: 環境変えた場合に更新する方法~~
追記: amplify initすれば作成される。自分専用の環境ならcommitしない方が良さそう。

.gitignore

#amplify
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/logs
amplify/mock-data
amplify/backend/amplify-meta.json
amplify/backend/awscloudformation
amplify/backend/.temp
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
amplifyconfiguration.json
amplifyconfiguration.dart
amplify-build-config.json
amplify-gradle-config.json
amplifytools.xcconfig
.secret-*

[Git管理外]amplify/.config/local-aws-info.json

{
  "dev": {
    "configLevel": "project",
    "useProfile": true,
    "profileName": "***(Profile Nameが入る)"
  }
}