AWS Amplifyのコンポーネントを使ってみる - 闘うITエンジニアの覚え書き

vueプロジェクトの作成 †

vue create amplify-project2

Vue CLI v4.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

amplifyプロジェクトの作成 †

以下の通り作成。

cd amplify-project2
amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplify-project2
? Enter a name for the environment dev
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation
:

amplifyのクライアントモジュールのインストール †

npm i aws-amplify
npm i aws-amplify-vue

Amplify Auth Plugin の追加 †

amplify add auth

Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
Successfully added resource amplifyproject2da8db26e 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

pushしておく

amplify push

https://aws-amplify.github.io/docs/js/vue#amplifyplugin

サインイン †

サインアウト †

サインアップ †