AI解析を使った画像シェアWEBアプリを超簡単に作る【設定編】#reinvent

AWS re:Invent 2018

#Amazon Rekognition

#Amplify Console

#サーバーレス

#AWS Amplify

#AWS

2018.12.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

このエントリはre:Invent2018で参加したワークショップのまとめです。 AmplifyとGraphQL、フロントにReact.jsを使って写真をシェアできるWEBアプリケーションを作るというものです。

Amplify CLIを超活用してAPIを作成したりLambdaをデプロイしたりと学びが多かったので、何章かに分けて手順をまとめました。長くなりますがお付き合いいただけると幸いです。

作るもの

ユーザーが写真を共有できるWEBアプリを作成します。仕様は以下です。

サインアップ、サインイン機能でどのユーザが何を投稿したか紐づけられるようにする
APIサーバーを設定し、ユーザーとひもづく写真の情報を取得、表示させる
アルバムの設定データを保存するデータベースを設定する
写真を保存するためにS3バケットを作成する
写真のサムネイルを自動生成する
Rekognitionで認識したデータを写真にタグ付けする
写真をタグで検索できるようにする

利用するもの

AWS Amplify CLI: AWSリソースのプロビジョニング
AWS Amplify JS Library: AWSリソースとフロントエンドの疎通
React.js：フロントエンド構築
Cloud9 IDE：開発環境

利用するAWS サービス

AppSync(GraphQL) ：GraphQL APIのホスティング
Amazon S3：写真との保存先
Amazon Rekognition：画像解析、写真へのラベリング
DynamoDB：アルバム、写真、ラベル、ユーザーの情報をストアする
Cognito：Auth機能
AWS Lambda：サムネイルの自動生成機能
Elastic Search：ラベル別に写真を検索

アーキテクチャ

Cloud9設定

開発環境にはCloud9を利用します。 Cloud9環境を新規に作成します。

リージョンがデフォルトでシンガポールになっているので、N.Virginiaに変更する
Create EnvironmentからCloud9環境を新規作成
環境名を”workshop”にして保存する
”Other instance type”を選択し、インスタンスサイズはt2.mediumを選ぶ
他の設定はそのまま次へ進み、”Create environment”をクリックする

リージョンはどこでもいいのですが、後でRekognitionを使うので対応しているリージョンである必要があります。（デフォルトに設定されるシンガポールリージョンだと使えないので注意です。）

必要な諸々をCloud9環境にインストール

# AWS CLIをアップデートする
pip install --user --upgrade awscli

# Lambdaの設定と合わせるためNode.js v8.10をインストール＆設定
nvm install v8.10.0
nvm alias default v8.10.0

# AWS Amplify CLIをインストール
npm install -g @aws-amplify/cli

混乱を防ぐ意味で使うリソースのリージョンを全て統一することをお勧めします。

リソースのデフォルトリージョンの設定

cat <<END > ~/.aws/config
[default]
region=us-east-1
END

AWS Amplify CLI

AWS Amplify CLI はモバイルアプリとウェブアプリケーションに特化したコマンドラインツールです。
Amplifyの機能を利用するためには既存のAWSユーザーアカウントと紐付ける設定が必要です。
今回はAWS Cognito, S3, DynamoDB, AppSync, Lambda, Rekognition, Elasticsearch Serviceを全てAmplify CLIから設定します。

次の章ではAmplify CLIをフル活用してAWSリソースを構築してゆきます。