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が入る)"
  }
}

amplify initで作れば良いので、Git管理外でOK

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

{
  "projectPath": "/Users/***(ユーザー名が入る)/workspace/nuxt-app-origin",
  "defaultEditor": "vscode",
  "envName": "dev"
}

amplify initで作れば良いので、Git管理外でOK

[Git管理外]amplify/#current-cloud-backend/amplify-meta.json

<amplify/team-provider-info.jsonと同じ>

amplify initで作れば良いので、Git管理外でOK

[Git管理外]amplify/#current-cloud-backend/tags.json

[
  {
    "Key": "user:Stack",
    "Value": "{project-env}"
  },
  {
    "Key": "user:Application",
    "Value": "{project-name}"
  }
]

amplify initで作れば良いので、Git管理外でOK

[Git管理外]amplify/backend/amplify-meta.json

<amplify/team-provider-info.jsonと同じ>

これ無いとamplify addに失敗する。amplify initする前提ならGit管理外で良さそう。amplify/team-provider-info.jsonと同じに。
> Error: File at path: '/Users/***(ユーザー名が入る)/workspace/nuxt-app-origin/amplify/backend/amplify-meta.json' does not exist

[Git管理外]src/aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "ap-northeast-1"
};


export default awsmobile;

amplify initで作れば良いので、Git管理外でOK

追加対応

.gitignoreに追加

amplify/team-provider-info.json

Amplifyパッケージ追加

% yarn add aws-amplify aws-amplify-vue
✨  Done in 5.00s.

nuxt.config.jsに追加

  plugins: [
    { src: '~/plugins/amplify.js', ssr: false }
  ],

plugins/amplify.jsを作成

import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin, components } from 'aws-amplify-vue'
import awsconfig from '@/src/aws-exports'
Amplify.configure(awsconfig)

Vue.use(AmplifyPlugin, AmplifyModules)
Vue.component(components)
% yarn dev
※ERRORが出なければOK

-> http://localhost:3000/

テストと静的コード解析も
% yarn test
% yarn lint

ビルドも確認
% yarn generate

考察

amplify.jsでimportするのをyarn addしてなくてエラーが出た。

 ERROR  Failed to compile with 1 errors 

新規構築時は、yarnコマンドでパッケージを追加すれば良さそう。

% yarn
yarn install v1.22.10
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.26s.

次回は

認証周りか、API周りを試してみます。

Nuxt.jsにAWS Amplifyを導入する” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です