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

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リソースを構築してゆきます。

資料