aws amplifyのチュートリアルを試してみた

AWS Amplifyのvueのチュートリアルを試してみました。

docs.amplify.aws

チュートリアルのコマンドで大体できます。コードの面でrouterとかauthとかどう書こうかわからなかった部分は、aws sampleのコードを参考にして作成しました。

ほぼチュートリアルのままの記事を書きます。

前提

• Node.js v10.x or later
• npm v5.x or later
• git v2.14.1 or later
• Aws Account があること

インストール

npm install -g @aws-amplify/cli

amplify configure

Specify the AWS Region
? region:  # Your preferred region
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

IAMユーザーを作成するために、AWSのログイン画面が起動します。ログインすることでIAMユーザーの作成画面が表示されるため、そのまま作成すればamplify操作用のユーザーを作成できます。

作成後のaccessKeyIdとsecretAccessKeyを保存しておき、次の質問に入力します。

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

vueアプリ作成

yarn global add @vue/cli
vue create myamplifyproject

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)   <--
  Manually select features

cd myamplifyproject

amplify init

? Enter a name for the project (myamplifyproject) todo
? Enter a name for the environment dev
? Choose your default editor: (Use arrow keys) 
   お好きなedlitor
? Choose the type of app that you're building (Use arrow keys)
   javascript
? What JavaScript framework are you using (Use arrow keys)
  vue
? Source Directory Path:  src
? Distribution Directory Path:  dist
? Do you want to use an AWS profile? (Y/n) Yes

install amplify library

yarn add aws-amplify @aws-amplify/ui-vue

API作成

amplify add api

? Please select from one of the below mentioned services:
# GraphQL
? Provide API name:
# myapi
? Choose the default authorization type for the API:
# API Key
? Enter a description for the API key:
# demo
? After how many days from now the API key should expire:
# 7 (or your preferred expiration)
? Do you want to configure advanced settings for the GraphQL API:
# No
? Do you have an annotated GraphQL schema? 
# No
? What best describes your project: 
# Single object with fields
? Do you want to edit the schema now? 
# Yes

amplify push

Do you want to generate code for your newly created GraphQL API (Yes)
Choose the code generation language target (javascript)
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, mutations and subscriptions (Yes)
Enter maximum statement depth [increase from default if your schema is deeply nested] (2)

amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | myapi         | No Change | awscloudformation |

認証

amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings?  No, I am done.

amplify push

? Are you sure you want to continue? Y

コード

チュートリアルにあるコードから作成した内容と、routerを合わせて表示できデータを登録、表示できるまでのコードになります。

github.com

ローカルで動作可能なため、「Deploy and host app」まで行なっていません。hostingして公開したい場合はhostringまで試してみるといいと思います。

実行

yarn serve

表示されるlocalhostでアクセスができれば完了です。

個人的にはgraphQLとdynamoDbの動作とAmplifyがなにを行なっているか知りたい部分のため、このあたりまでチュートリアルができれば満足です。

最近チュートリアルばっかりやってる気がするけど、ちゃんと仕事をしないとなぁー

参考

参考のコードはこれがよさそう

github.com