AWS Amplify + Vue.js で簡単WEBアプリ作成

(この記事は「CRESCO Advent Calendar 2019」14日目の記事です。)

どうも。ちゃんかわです。最近寒い日が続いていますね。

この記事では、AWS Ampilfyの紹介と、Vue.jsと組み合わせてデモアプリを作ってみた感想を記載しています。

AWS Amplify

AWS Amplifyは、スケーラブルなモバイルアプリもしくはWEBアプリを簡単に開発するためのJavaScript ライブラリです。

AWS上にスケーラブルなバックエンド環境を構築しながら、
作成したモバイルアプリもしくはフロントエンドアプリケーションと簡単に統合することができます。

フレームワークとして、JavaScript や各種フレームワーク(React, Vue.jsなど)のコンポーネント、CLIやデプロイ環境を構築するconsoleが提供されています。

AWS Amplifyを活用することで、バックエンドのREST API作成だけでなく、認証機能やDBアクセス、ファイルストレージでのデータ管理も簡単に実装することができちゃいます。

環境

  • Windows 10 64bit
  • Node.js 10.16.2
  • npm@6.9.0
  • aws-cli/1.16.233
  • Vue CLI 3.10.0

※あらかじめAWS CLIを利用するための認証情報(アクセスキー、シークレットキー)をセットしておいてください。
以下のコマンドから、認証情報をセットすることができます。

インストール

まずは、Vue.jsのプロジェクトを作成していきましょう。
vue create "プロジェクト名" でプロジェクトを作成することができます。
プロジェクトの構成について色々聞かれますが、今回は以下のように設定します。
(今回は、カレンダーアプリを想定して amplify-calendar-app と命名しています。)

次に、AWS Amplifyのライブラリをインストールします。

Vue.jsを使用するため、Vueのコンポーネント用のライブラリをインストールしておきましょう。

最後に、AWS AmplifyのCLIをインストールします。

Amplify用のプロジェクト準備

ここからは、事前に作成したVue.jsのプロジェクト(amplify-calendar-app)に対して、Amplifyの設定を行っていきます。
Amplifyの設定には、Amplify CLIを使用していきます。

amplify init をたたき、プロジェクトの設定内容を入力していきます。
質問に答える形で設定内容を入力できるようになっています。
今回は、以下のように入力してみてください。(ほとんどエンターキーを押すことで自動で入力できるかと思います。)

バックエンドAPI作成

ここからが本題です。
Amplify CLIをたたきながら、バックエンドのREST APIを作成してみましょう。

amplify add api を入力することで、APIの作成が始まります。
amplify init の時と同様に、質問に回答する形で作成することができます。

今回は、REST APIを作成するため、RESTを選択します。

APIの名前をつけたのち、APIのリソースパスを定義します。

RESTのAPIは、API GatewayとLambda、DynamoDBで構築されます。
はじめに、Lambdaの設定をしてあげましょう。

つづいて、DynamoDBの設定です。
テーブルの属性名や型の種類や、パーティションキー、ソートキーを設定する必要があります。

再度、Lambdaの設定について質問が来ます。
今回は追加のLambdaはないため、Noを選択してください。

最後に、APIのアクセス権限について設定します。
今回は、認証されたユーザに対してのみCRUDの権限を付与するように設定しましょう。

以上で、Amplifyフォルダ内にバックエンドAPIに関する情報が保持されます。
APIに必要なLambdaのソースコードもすべて自動で実装されているのが確認できるかと思います。

バックエンドのデプロイ

作成したバックエンドAPIを、AWS環境にデプロイします。

amplify pushを入力することで、Amplifyフォルダ内の情報に基づいてAWSリソースをデプロイしてくれます。
デプロイ時に、デプロイされる内容が確認できます。

  • Storage: DynamoDB
  • Function: Lambda
  • Auth: Cognito
  • API: API Gateway

それぞれのリソースはCloudformationで記述されており、Lambdaは、Node.jsのWebアプリケーションフレームワークである Express で実装されています。

フロントエンドのデプロイ

amplify hosting add によりWebアプリのホスティングに必要なリソースをデプロイできます。
今回はデモ用なので、S3にのみデプロイするようにしました。

つづいて、amplify publish によりVue.jsのプロジェクトのビルドおよびデプロイが実行されます。

Your app is published successfully. のメッセージが表示されると、実際にホスティングされたアプリのアクセスURLが表示されます。

バックエンドの呼び出し処理の実装

バックエンドの呼び出し処理は、Amplifyで提供されているライブラリを利用します。

DynamoDBの中身を参照するAPIは、パスパラメータにパーティションキー(Name)を指定し、GETメソッドで呼びます。以下は、実装のサンプルです。

また、DynamoDBに書き込むAPIは、リクエストボディにパーティションキー(Name)とそれぞれの属性名(Start, End)を指定し、POSTメソッドで呼びます。

全体構成

最終的には、以下のような構成になりました。
Amplify CLIのコマンドのみで簡単にWEBアプリケーションを構築することができました。

感想

AWS Amplifyを利用することで、コマンドのみでスケーラブルなWEBアプリケーションを構築することができました。

Lambdaの実装やIAMの設定など、バックエンドの構築に時間がかかる部分が自動化されているため、簡単なWEBアプリケーションなら即座に構築、デプロイすることができるのが最大の魅力だと思います。
今回は紹介しませんでしたが、Amplify Consoleを使用することでCI環境も構築することが可能です。

一方で、高度なアプリケーションの構築になると、Amplify CLI のみでは対応が困難かと感じました。DBアクセス以外の処理を必要とするLambdaの実装であったり、DynamoDBに細かな設定(TTLなど)が必要な場合は、自力でバックエンドを構築していく必要があるかと思います。

今回は、RESTでAPIを構築しましたが、GraphQLで構築することでさらに柔軟なAPIのアクセスが可能になるかと思います。フロントエンドの開発には携わっていたけど、バックエンドのことはあまり経験のない方は、ぜひ AWS Amplifyを使ってみてください。簡単にバックエンドを構築できますし、作成されたAWSリソースを見てみることで勉強にもなるかと思います。

以上です。

参考

  • このエントリーをはてなブックマークに追加