サーバレスのバックエンド作成サービス「AWS Amplify」で認証認可機能付きのダッシュボードを作る：AWSチートシート

AWS活用における便利な小技を簡潔に紹介する連載「AWSチートシート」。今回は、「AWS Amplify」で認証認可機能付きのダッシュボードを作成する方法を紹介する。

[石田卓也，株式会社システムシェアード]

　「Amazon Web Services」（AWS）活用における便利な小技を簡潔に紹介する連載「AWSチートシート」。今回は「AWS Amplify」を使って認証認可機能付きのダッシュボードを作成します。

「AWS Amplify」とは

　Amplifyの公式サイトでは下記のように説明されています。

AWS Amplifyは、それぞれを連携させたり個別で使用したりできる、ツールとサービスのセットです。これらの機能により、フロントエンドウェブおよびモバイルのデベロッパーが、AWSによるスケーラブルなフルスタックアプリケーションをビルドできるようにします。Amplifyを使用するお客様は、数分の内にバックエンドを構成しアプリケーションと接続でき、また、静的なウェブアプリケーションのデプロイは数クリックだけで実行できます。さらに、AWSコンソールの外部でも、簡単にアプリケーションコンテンツの管理が行えます。

AWS Amplify

　要約すると、Amplifyは「AWS Lambda」「Amazon DynamoDB」「Amazon Cognito」などのAWSのサービスを使いやすくパッケージ化したものです。「amplify add api」といったコマンドをやりたいことベースで入力し、簡単な質問に数問答えれば後は自動でバックエンドが構築されます。

　できるだけ早くアイデアをプロダクトにしていく必要のある場合や、フロントエンド寄りのエンジニアが主体の開発チームにおいても、迅速にサーバレスシステムのバックエンドを構築するのに役立つでしょう。

Vue.js、Nuxtを使って認証認可機能付きのダッシュボードを作成

　ここからは、Amplifyの使い方を具体的に紹介するために、「Vue.js」のフレームワーク「Nuxt」を使って20分ほどで認証認可が整ったダッシュボード画面を作ります。手順は以下の通りです。

1. Amplifyのインストール＆初期設定
2. 任意のディレクトリでNuxtプロジェクトを作成
3. Amplifyのバックエンドを作成
4. Amplifyの機能を追加
5. 追加した機能をクラウド上に構築
6. フロントにAmplifyを読み込ませる
7. 認証認可を入れる

1.Amplifyのインストール＆初期設定

　最初はAmplifyのインストールです。

npm install -g @aws-amplify/cli

　インストールが終わったら、初期設定をします。下記のように「amplify configure」コメンドによって、Amplifyを使うAWS環境の設定ができます。

amplify configure
Scanning for plugins...
Plugin scan successful
Follow these steps to set up access to your AWS account:
 
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

　AWSにログインしていなければログインします。ログインしていればコンソールが直接開くはずなので、特に何もせずターミナルに戻り「Enter」キーを押します。

Specify the AWS Region
? region:  ap-northeast-1  //東京リージョンを選択
Specify the username of the new IAM user:
? user name:  ○○○○　//好きな名前を入れる
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=〜〜〜〜〜
//上記で入れた情報でブラウザが開かれる
Press Enter to continue

　開かれたブラウザでは、基本的に「次へ」を押すだけで大丈夫です。ユーザーを作ったら下記のような画面になるはずなのでターミナルに戻ります。

　画面で出てきた情報を下記のようにコピー＆ペーストします（※この情報は絶対に流出させないよう細心の注意を払ってください）。「Profile Name」は何でも構いません。今回はdefaultにしました。

Enter the access key of the newly created user:
? accessKeyId:  // 上記画面に表示されているアクセスキーID
? secretAccessKey:  // 上記画面に表示されているシークレットアクセスキー
This would update/create the AWS Profile in your local machine
? Profile Name:  default　//任意の名前を付ける
 
Successfully set up the new user.

2.任意のディレクトリでNuxtプロジェクトを作成