AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る

git clone https://github.com/matsuihidetoshi/vueamplifydev.git

npm i -g @vue/cli

npm i -g @aws-amplify/cli

vue create notes

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) n

Vue CLI v4.1.2
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
❯◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

? Save this as a preset for future projects? (y/N) n

cd notes

npm run serve

amplify configure

Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.thinkwithwp.com/
Press Enter to continue

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)

Specify the username of the new IAM user:
? user name:  (amplify-xxxxx) 

Complete the user creation using the AWS console
https://console.thinkwithwp.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-xxxxx&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  (<YOUR_ACCESS_KEY_ID>) 

Profile Name:  (default)

Successfully set up the new user.

amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project (notes)

? Enter a name for the environment default

? Choose your default editor: 
  Visual Studio Code 
  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 
  ios 
❯ javascript

? 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 build

? Start Command: npm run serve

Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.thinkwithwp.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? (Y/n) y

? Please choose the profile you want to use (Use arrow keys)
❯ default

✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

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 <category>" 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

amplify add auth

Do you want to use the default authentication and security configuration? (Us
e arrow keys)
❯ Default configuration 
  Default configuration with Social Provider (Federation) 
  Manual configuration 
  I want to learn more. 

 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? 
  Username 
❯ Email 
  Phone Number 
  Email and Phone Number 
  I want to learn more. 

 Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done. 
  Yes, I want to make some additional changes.

amplify add api

? Please select from one of the below mentioned services: (Use arrow keys)
❯ GraphQL 
  REST 

? Provide API name: (notes)

? Choose the default authorization type for the API 
  API key 
❯ Amazon Cognito User Pool 
  IAM 
  OpenID Connect

? Do you want to configure advanced settings for the GraphQL API (Use arrow ke
ys)
❯ No, I am done. 
  Yes, I want to make some additional changes.

? Do you have an annotated GraphQL schema? (y/N) n

? Do you want a guided schema creation? (Y/n) y

? What best describes your project: 
  Single object with fields (e.g., “Todo” with ID, name, description) 
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) 
❯ Objects with fine-grained access control (e.g., a project management app
  with owner-based authorization)

? Do you want to edit the schema now? (Y/n) y

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/notes/amplify/backend/api/notes/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/notes/amplify/backend/api/notes/schema
Successfully added resource notes locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

type Task 
  @model 
  @auth(rules: [
      {allow: groups, groups: ["Managers"], queries: null, mutations: [create, update, delete]},
      {allow: groups, groups: ["Employees"], queries: [get, list], mutations: null}
    ])
{
  id: ID!
  title: String!
  description: String
  status: String
}
type PrivateNote
  @model
  @auth(rules: [{allow: owner}])
{
  id: ID!
  content: String!
  updatedAt: String       #この1行のみ追加
}

amplify push

Scanning for plugins...
Plugin scan successful
✔ Successfully pulled backend environment default from the cloud.

Current Environment: default

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Auth     | notes694e6855 | Create    | awscloudformation |
| Api      | notes         | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n) y

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/notes/amplify/backend/api/notes/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/notes/amplify/backend/api/notes/schema
? Do you want to generate code for your newly created GraphQL API (Y/n) y

? Choose the code generation language target (Use arrow keys)
❯ javascript 
  typescript 
  flow 

? Enter the file name pattern of graphql queries, mutations and subscriptions (src/
graphql/**/*.js)

? Do you want to generate/update all possible GraphQL operations - queries, mutatio
ns and subscriptions (Y/n) y

? Enter maximum statement depth [increase from default if your schema is deeply nested] (2)

✔ Generated GraphQL operations successfully and saved at src/graphql
✔ All resources are updated in the cloud

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql

ec2-user:~/environment/notes (master)

npm i aws-amplify aws-amplify-vue lodash

npm run serve

git add .
git commit -m 'built application'

git remote add origin https://github.com/ユーザー名/notes.git
git push -u origin master

Username for 'https://github.com/matsuihidetoshi/notes-final.git':ユーザー名
Password for 'https://matsuihidetoshi@github.com/matsuihidetoshi/notes-final.git':パスワード

amplify delete

? Are you sure you want to continue? (This would delete all the environments of 
the project from the cloud and wipe out all the local amplify resource files) (Y/n) y

✔ Project deleted in the cloud
Project deleted locally.