Zenn
Linc'well, inc.Publicationへの投稿
🐷

AWS AmplifyのUI Componentsを利用する

ssshun
2020/11/12に公開
AWS
Amplify
tech

AWS Amplifyとは

AWSの公式に記載の通り、バックエンドを爆速で構築/デプロイするためのツールです。

AWS Amplify は、モバイルとウェブのフロントエンドデベロッパーが、安全でスケーラブルなフルスタックアプリケーションを構築しデプロイできるようにする、AWS によるエンドツーエンドのソリューションです。Amplify を使用すれば、アプリケーションのバックエンドを数分で設定し、わずか数行のコードでそれをアプリケーションに接続できます。そして、3ステップで静的なウェブアプリケーションをデプロイできます。

このツールは以下の3つのコンポーネントからなります。

  • Libraries
    • AWSのリソースとアプリケーションを接続するオープンソースのライブラリ
  • UI Components
    • 後述
  • CLI
    • AWSのリソースを作成/管理するための対話型コマンドラインのツールチェーン

Amplifyの代表的な利用例である「APIのコード生成およびインフラ構築」等はLibrariesとCLIのみでできるため、UI Componentsを利用している方はそこまで多くないのではないでしょうか。
ということで、この記事ではUI Componentsの利用方法を解説したいと思います。

Amplify UI Componentsとは

アプリケーションに特定の機能のUIおよびAWSリソースと連携するロジックを埋め込むためのオープンソースのUIツールキットです。
2020/11/12時点で以下の機能がUI Componentsとして用意されています。

  • ログイン機能
  • チャットボット機能
  • ファイルアップロードなどのストレージアクセス機能

今回はVueにUI Componentsを適用し、以下の手順で上記3つの機能を作成していきます。

  • Vueプロジェクト作成
  • Amplify導入
  • ログイン機能作成
  • チャットボット作成
  • ストレージアクセス機能

Vueプロジェクト作成

$ vue create ui_components
$ cd ui_components
$ npm run serve

Amplify導入

  • Amplifyの設定
    Amplify CLIのインストールや設定は以下を参照してください。

https://docs.amplify.aws/start/getting-started/installation/q/integration/vue#option-2-follow-the-instructions

  • UI Componentsパッケージのインストール
$ npm install aws-amplify @aws-amplify/ui-vue
  • Amplifyのセットアップ
    Amplifyのセットアップを行います。対話型コマンドラインで質問されるので、Enterキーを連打しましょう。
$ amplify init

  Enter a name for the project uicomponents
  Enter a name for the environment dev
  Choose your default editor: Visual Studio Code
  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

ログイン機能作成

UI Components導入

  • template部分にて、既存のコードをamplify-authenticatorタグ、amplify-sign-outタグで挟みます。
App.vue
<template>
  <amplify-authenticator>
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
  <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

以下の様な画面が表示されました。

もちろんログイン機能のためのAWSのインフラは作成されていないため、ボタンを押してもエラーになります。

AWSリソース作成

$ amplify add auth

  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? Username
  Do you want to configure advanced settings? No, I am done.

$ amplify push

裏側では以下のリソースが作成されています。

リソースが作成されたことをCloudFormationやAmplify Consoleにて確認できれば、ログイン機能が動くことを確認できます。
UI Componentsを利用することで、ログインや確認コードのメール送信のロジックを書かずにログイン機能を作ることができました。


アカウント作成


登録したメアドに送られる確認コード登録


ログインできた

チャットボット作成

UI Components導入

App.vue
<template>
  <amplify-authenticator>
    <div id="app">
      <amplify-chatbot
        bot-name="yourBotName"
        bot-title="My ChatBot"
        welcome-message="Hello, how can I help you?"
      />
    </div>
  <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

チャットボットっぽい画面が作成されました。
続いてAWSリソースを作成していきます。

AWSリソース作成

$ amplify add interactions

  Provide a friendly resource name that will be used to label this category in the project: lexd2e694d4
  Would you like to start with a sample chatbot or start from scratch? Start with a sample
  Choose a sample chatbot: BookTrip
  Please indicate if your use of this bot is subject to the Children's Online   Privacy Protection Act (COPPA).
  Learn more: https://www.ftc.gov/tips-advice/business-center/guidance/complying-coppa-frequently-asked-questions No

$ amplify push

裏側では以下のリソースが作成されています。

ロール変更

チャットが動くか確認したところ、エラーが発生しました。
どうやらAmazon Lexにアクセスする権限がないとのこと。

ログインユーザーのLexに対して持つアクセスポリシーを確認すると、確かにap-northeast-1のLexに対してアクセス可能となっていました。

ログインユーザーがLexに対して持つアクセスポリシー

ただ、アプリケーション側のAWSリソース設定情報を確認すると、ap-southeast-2のLexに対してアクセスするようになっていました。
対応として、リソースはすでに作成されていたためAWSコンソールから上記のポリシーを変更し、ap-southeast-2のLexに対するアクセス権限を付与しました。

src/aws-exports.js
const awsmobile = {
    "aws_project_region": "ap-northeast-1",
    "aws_cognito_identity_pool_id": "ap-northeast-1:67ad2bbf-fa4b-4320-8640-efbd3629c79c",
    "aws_cognito_region": "ap-northeast-1",
    "aws_user_pools_id": "ap-northeast-1_E865y2qqq",
    "aws_user_pools_web_client_id": "7akqir1rjttsl6ndljr1tcumss",
    "oauth": {},
    "aws_bots": "enable",
    "aws_bots_config": [
        {
            "name": "BookTrip_dev",
            "alias": "$LATEST",
            "region": "ap-southeast-2"
        }
    ]
};

export default awsmobile;

画面を確認すると、エラーが起きずにチャットボットと会話ができました。

チャットボットと会話できた

ストレージアクセス機能

ファイルアップロード等も可能ですが、ここではS3のファイル表示画面のみを作成します。

UI Components導入

App.vue
<template>
  <amplify-authenticator>
    <div id="app">
      <amplify-s3-image img-key="example.png" />
    </div>
  <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

もちろん参照するexample.pngがありません。
AWSリソースを作成していきます。

AWSリソース作成

$ amplify add storage

  Please select from one of the below mentioned services: Content (Images, audio, video, etc.)
  Please provide a friendly name for your resource that will be used to label this category in the project: s34863edf5
  Please provide bucket name: uicomponents4e22abf46e7b421f871b3bb9dbb20218
  Who should have access: Auth users only
  What kind of access do you want for Authenticated users? create/update, read, delete
  Do you want to add a Lambda Trigger for your S3 Bucket? No

$ amplify push

裏側では以下のリソースが作成されています。

オブジェクト配置

作成されたバケットのpublicフォルダ配下にexample.pngを配置します。

画面を確認するとファイルが参照できました。

S3のファイルを見れた

まとめ

Amplify UI Componentsを利用することで、ロジックを書かずにログイン/チャットボット/ストレージアクセスの機能を作成することができました。
また、Amplify CLIを利用して非常に簡単にAWSリソースを作成できました。

今回はCSSを適用しておらず、UI Componentsのパラメータもシンプルなものを利用していましたが、カスタマイズすることもできるため、サクッと上記の機能を作成したい時にはAmplify UI Componentsを利用するのも一つの選択肢になるかと思います。

Linc'well, inc.
Linc'well, inc.Publication

医療スタートアップ Linc'well のエンジニアの記事を集めています。

Discussion