AWS AmplifyとVue.jsで作るアプリケーションを作ってみた

はじめに

docs.amplify.aws

AWS Amplifyの公式ハンズオンをやってみました。 フロントエンドのフレームワークはいくつか選択肢があるのですが、今回はVue.jsでやってみました。

事前準備

こちらを見ながらAmplifyの設定をします。

npm install -g @aws-amplify/cli
amplify configure

上記の2つ目のコマンドを打つと、Amplifyの設定が対話式で始まります。 リージョン（例：ap-northeast-1）、Amplify用IAMユーザ名を入力すると、AWSコンソールのIAMユーザ作成画面に飛びます。 画面の案内に沿って進めると、アクセスキーとシークレットキーが出てくるので、それらをメモして再びコンソールに戻ります。

以下のように対話式でアクセスキー、シークレットキーを入力した後、それらのプロファイル名を設定します。

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  [プロファイル名]

プロジェクトの設定

新規Vue.jsアプリの作成

まずVue CLIをインストールし、プロジェクトを作成します。

npm install -g @vue/cli
vue create myamplifyproject
cd myamplifyproject

次に以下のコマンドでローカルサーバを立ち上げます。

npm install
npm run serve

デフォルト画面が立ち上がるはず。

バックエンドの初期設定

Amplifyライブラリのインストール

フロントエンドの設定

src/main.jsに以下をコピペします。

import Amplify from 'aws-amplify';
import '@aws-amplify/ui-vue';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);