エンジニア

AWS Amplifyを使ってみた

投稿日：2021年2月25日 更新日：

こんにちは！名古屋スタジオでサーバーエンジニアをしております三浦です。2020年の4月に新卒で入社してもうすぐ1年になります。

今回は個人的に一番気になる「AWS Amplify」を試してみたので紹介します。

AWS Amplifyとは、バックエンドからフロントエンド開発までをカバーするアプリ開発のフレームワークです。コマンドラインからバックエンド構築を行うことができたり、複雑な認証機能を簡単に構築できます。

今回はAWS Amplifyを使用して、Vue.jsのSPA(シングルページアプリケーション)にサインアップ・サインイン機能を追加する手順を説明します。

前提条件

今回試した環境は以下の通りです。

  • Node.js v14.15.5
  • npm v6.14.11
  • aws-amplify 3.3.19
  • aws-amplify/cli 4.43.0
  • aws-amplify/ui-components 1.0.1

AWS Amplifyのセットアップ

以下のコマンドでAWS AmplifyのCLIをインストールします。

npm install -g @aws-amplify/cli

以下のコマンドでAmplifyの設定を行います。

amplify configure

コマンドを実行すると対話形式でセットアップしていくことになります。

最初にコンソールに以下の文章が表示されてブラウザでAWSのサインイン画面が出るので、管理者アカウントでサインインします。サインインができたらEnterキーを押して次のステップに進みます。

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

続いてリージョンを選択します。ここでは ap-northeast-1 を選択します。

Specify the AWS Region
? region:
  eu-west-2
  eu-central-1
❯ ap-northeast-1
  ap-northeast-2
  ap-southeast-1
  ap-southeast-2
  ap-south-1

続いてIAMユーザを設定します。そのままEnterキーを押すと amplify-（ランダムな文字列） になります。

Specify the username of the new IAM user:
? user name:

再度ブラウザが開き、IAMの追加ページが開くので、画面の指示に従って設定IAMユーザーを設定してきます。基本的にはデフォルトのままで進めます。

最終的にユーザーの追加が成功したら、IAMユーザが表示されるので認証情報をメモするか、「CSVのダウンロード」をクリックしてIAMユーザー情報をCSVでダウンロードしておきます。

CLIを実行しているターミナルに戻り、Enterキーを押します。

アクセスキーとシークレットアクセスキーの入力を要求されるので、先程メモしたIAMユーザー情報を入力します。

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ********************

プロファイル名の設定をします。プロファイル名はローカル上でIAMユーザーを管理するためのものですが、ここではIAMユーザー名と同じものを設定しました。

This would update/create the AWS Profile in your local machine
? Profile Name:

これでAmplifyのセットアップは完了です。

Vue.jsプロジェクトの作成

まずは以下のコマンドでVue.jsのCLIをインストールします。

npm install -g @vue/cli

以下のコマンドでVue.jsのプロジェクトを作成します。

vue create first_amplify_app

プロジェクトのテンプレートを選択します。ここでは Default (Vue 3 Preview) ([Vue 3] babel, eslint) にします。

Vue CLI v4.5.11
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

作成されたプロジェクトに移動し、モジュールのインストールをします。

cd first_amplify_app && npm install

バックエンドの定義

Amplifyプロジェクトの初期化

これでベースとなるVue.jsのアプリができました。続いて、このVueプロジェクトをAmplifyプロジェクトとして初期化します。

以下のコマンドで定義をしていきます。

amplify init

再び対話形式で設定します。まずはAmplifyのリソースを作成するときに使うプロジェクト名を設定します。Vue.jsアプリで設定したプロジェクト名と同じものにしたい場合はそのままEnterキーを押します。

? Enter a name for the project (firstamplifyapp)

環境名を設定します。そのままEnterキーを押すと dev になります。

? Enter a name for the environment

CLIでファイルを編集するように要求されたときにどのテキストエディターを使うのか指定されます。ここはお使いのテキストエディタを選びます。

? Choose your default editor: (Use arrow keys)
❯ Visual Studio Code
  Atom Editor
  Sublime Text
  IntelliJ IDEA
  Vim (via Terminal, Mac OS only)
  Emacs (via Terminal, Mac OS only)
  None

どの環境向けのバックエンドの設定ファイルを作成するか聞かれます。今回はVue.jsを使用しているので javascript を選択します。

続けて今回使用しているフレームワークの vue を選択します。

? Choose the type of app that you're building (Use arrow keys)
  android
  flutter
  ios
❯ javascript

? What javascript framework are you using (Use arrow keys)
  angular
  ember
  ionic
  react
  react-native
❯ vue
  none

プロジェクトのソースファイルのディレクトリが聞かれます。Vue.jsのCLIで作成したプロジェクトのソースはsrcにあるので、そのままEnterキーを押します。

? Source Directory Path:  (src)

プロジェクトをビルドしたときのディレクトリを聞かれます。Vue.jsのCLIでビルドしたときには dist ディレクトリにビルドしたファイルが保存されるので、これもそのままEnterキーを押します。

? Distribution Directory Path: (dist)

ビルドコマンドを聞かれます。Vue.jsのビルドコマンドを指定すればいいので、そのままEnterキーを押します。

? Build Command:  (npm run-script build)

開発モードでVue.jsのアプリを立ち上げるコマンドを聞かれます。Vue.jsでの実行コマンドを指定すればいいので、そのままEnterキーを押します。

? Start Command: (npm run-script serve)

続いて認証方法を聞かれます。 amplify configure で作成したプロファイルを使用するときには AWS profile を選択します。

続けて使用するプロファイル名を選択します。

? Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile
  AWS access keys

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

認証機能のセットアップ

認証機能の設定は以下のコマンドで行います。

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します。

amplify push

内容を確認し、問題なければYを入力します。

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

これでバックエンドの設定は完了です。

フロントエンドのセットアップ

続いてフロントエンドの設定をします。

Vue.jsアプリ上で先程設定したAmplifyのバックエンドが使えるようにするためにAmplifyのモジュールをインストールします。

また、Amplifyの認証画面をフロントエンドに導入するためにAmplifyのUIコンポーネントもインストールします。

これらのモジュールは以下のコマンドでインストールします。

npm install aws-amplify @aws-amplify/ui-components

src/main.js を開き、以下のコードに書き換えます。

import { createApp } from 'vue'
import App from './App.vue'

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import {
  applyPolyfills,
  defineCustomElements,
} from '@aws-amplify/ui-components/loader';

Amplify.configure(aws_exports);
applyPolyfills().then(() => {
  defineCustomElements(window);
});

createApp(App).mount('#app')

続いて src/App.vue を開き、以下のコードに書き換えます。内容としては、 vue create で定義したテンプレートのVueファイルにAmplifyの認証コンポーネントを加えたものになっています。

<template>
  <amplify-authenticator>
    <div v-if="authState === 'signedin' && user">
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld v-bind:msg="'Hello, ' + user.username"/>
    </div>
    <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { onAuthUIStateChange } from '@aws-amplify/ui-components'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      user: undefined,
      authState: undefined,
      unsubscribeAuth: undefined,
    }
  },
  created() {
    this.unsubscribeAuth = onAuthUIStateChange((authState, authData) => {
      this.authState = authState;
      this.user = authData;
    })
  },
  beforeUnmount() {
    this.unsubscribeAuth();
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

動作確認

以上でサインイン・サインアップの機能を追加できました。最後に動作確認をしましょう。

以下のコマンドでサーバーを起動します。

npm run serve

ブラウザで http://localhost:8080/ を起動すると、以下のサインイン画面が出るので Create Account からアカウントを作成します。作成すると認証コードがメールで送られるので、メールの受信を確認し認証コードを入力します。

以下のようにユーザー名が画面に表示されたらサインインは完了しています。

利用料金

最後に利用料金の説明です。Amplifyでは、ビルド・デプロイ、およびホスティングの2つの機能に対して料金が設定されています。
今回は無料利用枠で試すことができました。
詳細な料金体系は以下を参照ください。
https://aws.amazon.com/jp/amplify/pricing/

まとめ

今回はAWS Amplifyを使って認証機能を追加してみました。簡単に構築できるだけではなく、パスワードの再発行や多要素認証機能も提供されており、とても強力なアプリケーションフレームワークだと感じました。

今回試した認証機能以外にもデータベース連携などもAmplifyの機能として提供されているので、Amplifyについてさらに学んでみようと思います。

採用情報

ワンダープラネットでは、一緒に働く仲間を幅広い職種で募集しております。

-エンジニア
-

© WonderPlanet Inc.