Save 37% off PRO during our Black Friday Sale! »

【AWSハンズオン】サーバレスアーキテクチャで、有名人識別サービスを作ろう!

6d2bd6562f67dbe27743eda261ede06d?s=47 Hayate.H
October 25, 2020

 【AWSハンズオン】サーバレスアーキテクチャで、有名人識別サービスを作ろう!

・ソースコードはこちら → https://qiita.com/hayate_h/items/2091dda98bb07f758f06
・会社の同僚向けに、業務外にて行ったAWS勉強会の資料を公開したものです。
・AWS Lambda, Rekognition, API Gateway を用いて、有名人の画像識別サービスを作りましょう。
・基礎知識は必要ありません。
・AWS の IAM ユーザーアカウントが必要です。
・所要時間は約1時間です。

6d2bd6562f67dbe27743eda261ede06d?s=128

Hayate.H

October 25, 2020
Tweet

Transcript

  1. AWS 勉強会 サーバレスアーキテクチャで、 有名人識別サービスを作ろう! 2020年10月25日 樋口 颯 Twitter : @hayate_sou

    Qiita : @hayate_h
  2. 本資料について • 会社の同僚向けに、業務外にて実施をした 「AWS ハンズオン」の資料を、一般公開したものです。 • サーバレスアーキテクチャを用いて、有名人の画像解析 API サービスを、 約1時間で作成するという内容になっています。

    • ハンズオンの実施にあたっては、以下のリソースや知識が必要です。 • インターネットに接続できるPC(Windows, Mac 問わない) • AWS IAM ユーザーアカウント • Pythonの知識 (基礎知識が無くても楽しめる構成にしています) • 本資料の作成には細心の注意を払っておりますが、 その正確性を担保するものではありません。 また、本資料が起因して生じた損害について、 作成者は一切の責任を負いません。
  3. 本資料について • 資料内で用いるソースコードについては、こちらのブログで公開をしています。 • 【AWSハンズオン】サーバレスアーキテクチャで、有名人識別サービスを 作ろう! - Qiita • https://qiita.com/hayate_h/items/2091dda98bb07f758f06

  4. はじめに(概要説明)

  5. つくるもの • Amazon Rekognition (画像解析AI)を用いて、有名人識別APIを作成します。 • システム構成図は以下のようになります。 • 明示的なサーバが存在しない「サーバレスアーキテクチャ」のため 構築が簡単です。また運用管理の手間やコストも軽減します。

    AWS Cloud AWS Lambda Amazon Rekognition Amazon API Gateway Client User
  6. 動作イメージ • 例えば、日本が世界に誇る有名俳優「渡辺謙」さんの写真を用意し、 今回作成する AI に読み込ませてみます。 ※ 以下のスクリーンショットでは、知財権保護のため画像をぼかしています。 • 「ファイルを選択」ボタンから「渡辺謙」さんの画像を選択します。

  7. 動作イメージ • ファイルを選択後、「送信」ボタンを押すと… • “He/She is Ken Watanabe with 100%

    confidence.” と表示されます。 • 今回のハンズオンでは、このサービスのバックエンドを作成していきます。
  8. アーキテクチャ説明 • クライアントPCから API Gateway 経由で有名人の画像をアップロード • 画像ファイルを受信すると、Lambda 関数が起動 •

    Lambda 関数内で Amazon Rekognition の recognize_celebrities 機能に 画像ファイルを送り、画像内の有名人を識別する • 取得した有名人の情報を出力用に整形して、API Gateway を通して返す • 呼び出し元のブラウザ上で、識別結果が表示される AWS Cloud AWS Lambda Amazon Rekognition Amazon API Gateway Client User 1 2 3 4 5 1 2 3 4 5
  9. AWSサービス紹介 • 今回使用する3つのサービスを簡単に紹介します。 • 「習うより慣れよ」の考えで、ハンズオンを進めていきましょう。 Amazon API Gateway ✓ フルマネージドなAPIサービス。

    ✓ 後述する「Lambda」などとつなげることで、 可用性の高いAPIを容易に開発できる。 ✓ サーバレスなコンピューティングサービス。 ✓ 実行したいコードを配置するだけで、 サーバなどの環境を意識することなくアプリを実行できる。 ✓ サーバレスな画像分析サービス。 ✓ 物体の判定、シーンの特定、テキスト検出、 人物の性別,年齢,感情推測などの多様な機能を提供している。 AWS Lambda Amazon Rekognition https://aws.amazon.com/jp/rekognition/?blog-cards.sort-by=item.additionalFields.createdDate&blog-cards.sort-order=desc
  10. 用語解説:「サーバレス」とは • 利用者がサーバを意識する必要のないサービスやアーキテクチャのこと。 → サーバが全く存在しないわけではない。サーバはAWSが管理している。 • プログラムコードを「置くだけ」で動作する。(運用管理が楽になる) 仮想サーバ コンテナ サーバレス

    Amazon EC2 AWS Lambda ロジック アプリ ランタイム OS 仮想化 ハードウェア ロジック アプリ ランタイム OS 仮想化 ハードウェア ロジック アプリ ランタイム OS 仮想化 ハードウェア ユーザー 管理 AWS 管理 自由度 運用管理 高 低 手間あり 楽 Amazon Elastic Container Service
  11. 用語解説:「マネージドサービス」とは • AWSが運用管理(の一部)を担ってくれるサービスのこと。 • 担ってくれる運用管理の内容や範囲はサービスによって多様だが、 「バックアップを定期的にとる」などだけではなく、 「アクセスが増えたら自動でスケールする」なども提供していることが多い。 • 運用管理の範囲が広く、利用者の手間がほとんどかからない場合は、 「フルマネージドサービス」と言われることが多い。

    • 「マネージド」であっても「サーバレス」ではないものもある。 マネージド ではないサービス マネージドだが、 サーバレスではない サービス マネージドかつ サーバレスな サービス Amazon EC2 ✓ 仮想サーバーサービス ✓ インスタンス単位で管 理をする ✓ 運用管理は利用者自身 で行う必要がある Amazon RDS ✓ データベースサービス ✓ インスタンスを意識す る必要はある ✓ バックアップやパッチ 適用などを自動化でき る(設定次第) ✓ AI翻訳サービス ✓ 大量アクセスにも対応 = インスタンスを意識 する必要がない ✓ 利用者は運用管理も全 く意識する必要がない Amazon Translate
  12. 開発手順

  13. サインイン • AWSマネジメントコンソールへアクセスし、 IAM ユーザー情報でサインインをしてください。 • https://console.aws.amazon.com/

  14. サインイン 補足情報 • 今回のハンズオンでは、 ハンズオンを実施するIAMユーザーに”AdministratorAccess”のIAMポリシーが 付与されていることを前提にして進めています。 • “AdministratorAccess” の権限が付与されていなかった場合、 以下の手順の中でリソースが作れない等のエラーが発生する可能性があります。

    • その場合は、システム管理者に問い合わせ、適切なポリシーをアタッチしても らうようにしてください。 • なお、以下のサイトに記載されていたIAMの設定内容は大変参考になりました。 (ハンズオンの手順が全て実行できることを確認済みです。) • 社外の開発メンバーをAWSアカウントに入れるときのIAM設定を考えている - kmiya_bbmのブログ https://kmiya-bbm.hatenablog.com/entry/2019/09/07/221740
  15. サインイン • 画面右上が「東京」 画面左下が「日本語」になっていることを確認します。 • 変更が必要な場合は、次のページを参考に切り替え作業を行ってください。

  16. サインイン • リージョンの変更方法 • 画面右上の地名を押下し、 「アジアパシフィック(東京)ap-northeast-1」を選択します。

  17. サインイン • 言語の変更方法 • 画面左下の言語を押下し、「日本語」を選択します。

  18. Lambda 関数の作成 • 最初にLambda 関数を作成し、基本的な使い方を学習しましょう。 AWS Cloud AWS Lambda Amazon

    Rekognition Amazon API Gateway Client User
  19. Lambda 関数の作成 • マネジメントコンソールの画面にて、検索窓に「Lambda」と入力し、 表示された「Lambda」を選択してください。

  20. Lambda 関数の作成 • Lambdaの画面が開きましたら、「関数の作成」ボタンを押してください。

  21. Lambda 関数の作成 • 関数の作成画面にて、以下を選択、入力していきます。 • 「一から作成」を選択 • 「関数名」に「《お名前》-rekognition-handson」と入力 (例:higuchi-rekognition-handson) •

    「ランタイム」に「Python3.8」を選択
  22. Lambda 関数の作成 • アクセス権限 - デフォルトの実行ロールの変更 を開き、 「基本的なLambdaアクセス権限で新しいロールを作成」を選択します。 • 上記設定が終わったら、画面右下「関数の作成」ボタンを押下します。

  23. Lambda 関数の作成 • Lambda関数が作成されます。

  24. Lambda 関数の作成 • 今から動くコードを記述していきます。 • 「関数コード」のところまでスクロールします。 ここがロジックを記述するエディタとなります。

  25. Lambda 関数の作成 • まずは、シンプルなPythonコードを書いて Lambda の動きを学習しましょう。 • 例えば、文字列を結合して出力する、以下のコードを記述します。 (コードは次のスライドで説明をしています。)

  26. Lambda 関数の作成 def lambda_handler(event, context): a = 'Pen' b =

    'Pineapple' c = 'Apple' x = a + b + c + a return { 'statusCode': 200, 'body': x } • ソースコードは、以下のリンクからダウンロードをすることができます。 • 【AWSハンズオン】サーバレスアーキテクチャで、有名人識別サービス を作ろう! - Qiita • https://qiita.com/hayate_h/items/2091dda98bb07f758f06 • 今回記述したLambda 関数は以下の通りです。 • 変数に文字列を設定し、結合をしたものを return する内容となっています。 • 具体的には、 ’Pen’ + ’Pineapple’ + ’Apple’ + ’Pen’ → ‘PenPineappleApplePen’ になります。
  27. Lambda 関数の作成 • 記述後、「Deploy」 ボタンを押したのち、右上の「テスト」を押下します。

  28. Lambda 関数の作成 • 「テストイベントの設定」画面が表示されます。 • 「新しいテストイベントの作成」を選択します。 • イベント名に「SimpleEvent」と入力し、「作成」を押します。

  29. Lambda 関数の作成 • 右上の「テスト」を押して、 先ほど作成したテストイベントで、テストを実行します。

  30. Lambda 関数の作成 • Lambda がテスト実行されました。 • 画面上部に「成功」と表示が出れば、コードは正常に動いた証拠です。

  31. Lambda 関数の作成 • 詳細をクリックすると、関数の実行結果が展開されます。 • ここでは、“body” が “PenPineappleApplePen”となっており、 期待した通りの output

    になっています。
  32. Lambda 実行ログの確認方法 • Lambda 実行時のログは、”CloudWatch Logs”で確認できます。 • 「モニタリング」→「CloudWatchのログを表示」をクリックすると、 “CloudWatch Logs”

    のページに遷移します。
  33. Lambda 関数の作成 • 「ログストリーム」画面にて「20xx/xx/xx[$LATEST]xxxxxx」を選択すると ログが確認できます。デバック時にご活用ください。 • Logger などを設定すると、ここにログが出力されるようになります。

  34. IAMロール(権限)の変更 • これから、Lambda関数を、画像解析AI (Rekognition)と紐づける作業をして いきます。 • Lambda関数から、Rekognitionを呼び出すには、適切な権限が必要です。 • 具体的には、Lambdaに付与されているIAMロールに、Rekognitionへの アクセスを許可するIAMポリシーをアタッチする必要があります。

    • まずは、権限付与から行っていきましょう。 AWS Cloud AWS Lambda Amazon Rekognition Amazon API Gateway Client User IAM Role
  35. IAMロール(権限)の変更 • Lambda画面の上部で「設定」を選びます

  36. IAMロール(権限)の変更 • 「設定」画面の下部「基本設定」の「編集」を選択します。

  37. IAMロール(権限)の変更 • 「基本設定を編集」画面の下部まで行き、 「IAMコンソールでxxxロールを表示します。」をクリックします。

  38. IAMロール(権限)の変更 • 別タブで、IAMロールの画面が開きます。 • 「ポリシーをアタッチします」ボタンを押下します。

  39. IAMロール(権限)の変更 • 検索窓に「Rekognition」と入力し、 • 「AmazonRekognitionReadOnlyAccess」ポリシーにチェックを入れて、 「ポリシーのアタッチ」ボタンを押下します。

  40. IAMロール(権限)の変更 • IAMのコンソール画面で、 「AmazonRekognitionReadOnlyAccess」がアタッチされていることを確認し ます。 • これで、Lambda に Rekognition を呼び出せる権限を付与できました。

  41. IAMロール(権限)の変更・実行時間の変更 • Lambda の「基本設定を編集」画面に戻ります。 • タイムアウトを「10秒」に変更します。 • 上記設定後、「保存」ボタンを押下します。

  42. Lambda 関数の更新 • 「関数コード」を以下の内容で上書きし、「Deploy」ボタンを押下します。 • ソースコードは以下のリンクからダウンロードをしてください。 • https://qiita.com/hayate_h/items/2091dda98bb07f758f06

  43. Lambda 関数の解説 • AWSマネジメントコンソールへアクセスし、 別途連絡をしたユーザー情報でサインインをしてください。 • https://console.aws.amazon.com/ import boto3 import

    base64 import logging import traceback logger = logging.getLogger() logger.setLevel(logging.INFO) rekognition = boto3.client('rekognition') def lambda_handler(event, context): logger.info(f'Received event = {event}') received_body = base64.b64decode(event['body-json']) images = received_body.split(b'¥r¥n',4) image = images[4] response = rekognition.recognize_celebrities( Image={'Bytes': image} ) logger.info(f'Rekognition response = {response}') try: label = response['CelebrityFaces'][0] name = label['Name'] conf = round(label['Face']['Confidence']) output = f'He/She is {name} with {conf}% confidence.' logger.info(f'API response = {output}') return output except IndexError as e: logger.info(f"Coudn't detect celebrities in the Photo. Exception = {e}") logger.info(traceback.format_exc()) return "Couldn't detect celebrities in the uploaded photo. Please upload another photo." • 必要なモジュールのインポートをし ています。 • boto3はPythonでAWSリソースを操作 する際に用いるSDKです • https://boto3.amazonaws.com/v1/doc umentation/api/latest/reference/servi ces/index.html
  44. Lambda 関数の解説 • AWSマネジメントコンソールへアクセスし、 別途連絡をしたユーザー情報でサインインをしてください。 • https://console.aws.amazon.com/ import boto3 import

    base64 import logging import traceback logger = logging.getLogger() logger.setLevel(logging.INFO) rekognition = boto3.client('rekognition') def lambda_handler(event, context): logger.info(f'Received event = {event}') received_body = base64.b64decode(event['body-json']) images = received_body.split(b'¥r¥n',4) image = images[4] response = rekognition.recognize_celebrities( Image={'Bytes': image} ) logger.info(f'Rekognition response = {response}') try: label = response['CelebrityFaces'][0] name = label['Name'] conf = round(label['Face']['Confidence']) output = f'He/She is {name} with {conf}% confidence.' logger.info(f'API response = {output}') return output except IndexError as e: logger.info(f"Coudn't detect celebrities in the Photo. Exception = {e}") logger.info(traceback.format_exc()) return "Couldn't detect celebrities in the uploaded photo. Please upload another photo." • Logger を INFO レベルで設定します。 • デバッグ用途に使用しています。
  45. Lambda 関数の解説 • AWSマネジメントコンソールへアクセスし、 別途連絡をしたユーザー情報でサインインをしてください。 • https://console.aws.amazon.com/ import boto3 import

    base64 import logging import traceback logger = logging.getLogger() logger.setLevel(logging.INFO) rekognition = boto3.client('rekognition') def lambda_handler(event, context): logger.info(f'Received event = {event}') received_body = base64.b64decode(event['body-json']) images = received_body.split(b'¥r¥n',4) image = images[4] response = rekognition.recognize_celebrities( Image={'Bytes': image} ) logger.info(f'Rekognition response = {response}') try: label = response['CelebrityFaces'][0] name = label['Name'] conf = round(label['Face']['Confidence']) output = f'He/She is {name} with {conf}% confidence.' logger.info(f'API response = {output}') return output except IndexError as e: logger.info(f"Coudn't detect celebrities in the Photo. Exception = {e}") logger.info(traceback.format_exc()) return "Couldn't detect celebrities in the uploaded photo. Please upload another photo." • boto3 から、recognition を呼び出す インスタンスを生成しています。
  46. Lambda 関数の解説 • AWSマネジメントコンソールへアクセスし、 別途連絡をしたユーザー情報でサインインをしてください。 • https://console.aws.amazon.com/ import boto3 import

    base64 import logging import traceback logger = logging.getLogger() logger.setLevel(logging.INFO) rekognition = boto3.client('rekognition') def lambda_handler(event, context): logger.info(f'Received event = {event}') received_body = base64.b64decode(event['body-json']) images = received_body.split(b'¥r¥n',4) image = images[4] response = rekognition.recognize_celebrities( Image={'Bytes': image} ) logger.info(f'Rekognition response = {response}') try: label = response['CelebrityFaces'][0] name = label['Name'] conf = round(label['Face']['Confidence']) output = f'He/She is {name} with {conf}% confidence.' logger.info(f'API response = {output}') return output except IndexError as e: logger.info(f"Coudn't detect celebrities in the Photo. Exception = {e}") logger.info(traceback.format_exc()) return "Couldn't detect celebrities in the uploaded photo. Please upload another photo." • この Lambda_handler 関数が、 APIコールがあった際に起動される関 数となります。
  47. Lambda 関数の解説 • AWSマネジメントコンソールへアクセスし、 別途連絡をしたユーザー情報でサインインをしてください。 • https://console.aws.amazon.com/ import boto3 import

    base64 import logging import traceback logger = logging.getLogger() logger.setLevel(logging.INFO) rekognition = boto3.client('rekognition') def lambda_handler(event, context): logger.info(f'Received event = {event}') received_body = base64.b64decode(event['body-json']) images = received_body.split(b'¥r¥n',4) image = images[4] response = rekognition.recognize_celebrities( Image={'Bytes': image} ) logger.info(f'Rekognition response = {response}') try: label = response['CelebrityFaces'][0] name = label['Name'] conf = round(label['Face']['Confidence']) output = f'He/She is {name} with {conf}% confidence.' logger.info(f'API response = {output}') return output except IndexError as e: logger.info(f"Coudn't detect celebrities in the Photo. Exception = {e}") logger.info(traceback.format_exc()) return "Couldn't detect celebrities in the uploaded photo. Please upload another photo." • rekognitionの使い方は、boto3のド キュメントに記載されています。 • https://boto3.amazonaws.com/v1/doc umentation/api/latest/reference/servi ces/rekognition.html#Rekognition.Clie nt.recognize_celebrities
  48. Lambda 関数の解説 • AWSマネジメントコンソールへアクセスし、 別途連絡をしたユーザー情報でサインインをしてください。 • https://console.aws.amazon.com/ import boto3 import

    base64 import logging import traceback logger = logging.getLogger() logger.setLevel(logging.INFO) rekognition = boto3.client('rekognition') def lambda_handler(event, context): logger.info(f'Received event = {event}') received_body = base64.b64decode(event['body-json']) images = received_body.split(b'¥r¥n',4) image = images[4] response = rekognition.recognize_celebrities( Image={'Bytes': image} ) logger.info(f'Rekognition response = {response}') try: label = response['CelebrityFaces'][0] name = label['Name'] conf = round(label['Face']['Confidence']) output = f'He/She is {name} with {conf}% confidence.' logger.info(f'API response = {output}') return output except IndexError as e: logger.info(f"Coudn't detect celebrities in the Photo. Exception = {e}") logger.info(traceback.format_exc()) return "Couldn't detect celebrities in the uploaded photo. Please upload another photo." • これは、実はアンチパターンの return 文です。 • 実際には、Lambdaのプロキシ統合の フォーマットに合わせたレスポンス 形式にすると良いでしょう。 • 今回は、ブラウザ上での動作確認を 行うため、明示的にプロキシ統合を 使わず、また出力のフォーマットも 意図的に無視をした記載にしていま す。 • 詳しくは「API Gateway 統合レスポン ス」で検索してください。 • https://docs.aws.amazon.com/ja_jp/ap igateway/latest/developerguide/api- gateway-integration-settings- integration-response.html
  49. API Gateway の追加 • ここから、API Gateway と Lambda を紐づけていきます。 AWS

    Cloud AWS Lambda Amazon Rekognition Amazon API Gateway Client User
  50. API Gateway の追加 • 画面上部「サービス」から検索窓に"API"と入力し、 候補にあがる「API Gateway」 を選択します。

  51. API Gateway の追加 • 画面右上「APIを作成」を押下します。

  52. API Gateway の追加 • REST API の「構築」ボタンを押下します。

  53. API Gateway の追加 • 以下の設定を行い「APIの作成」ボタンを押下します。 • 「新しいAPI」を選択 • API名:「《お名前》-api-handson」と入力(例:higuchi-api-handson) •

    エンドポイントタイプ:「リージョン」を選択
  54. API Gateway の追加 • API は「リソース」×「メソッド」で開発をしていきます。 • 例えば「/users に GET」や「/users/12345

    にPOST」などです。 リソース メソッド アクション /users/12345 /users/12345 GET POST userid=12345 の ユーザー情報を取得 userid=12345 で ユーザー情報を新規登録 /users/12345 PUT userid=12345 で ユーザー情報を更新 (新規登録の場合もあり) /users/12345 DELETE userid=12345 で ユーザー情報を削除 /users GET 全てのユーザー情報を 取得
  55. API Gateway の追加 • まず、リソースを作成します。 • 「アクション」から「リソースの作成」を選択します。

  56. API Gateway の追加 • リソース名に「Rekognition」と入力します。 • 入力後「リソースの作成」ボタンを押下します。

  57. API Gateway の追加 • 次にメソッドの作成をします。 • リソースを選択した上で、「アクション」→「メソッドの作成」を選択します。

  58. API Gateway の追加 • プルダウンから「POST」を選んで、「チェックボタン」を押下します。

  59. API Gateway の追加 • 統合タイプにて「Lambda関数」を選択 • Lambda関数にて先ほど作成した「《お名前》-rekognition-handson」を選択 • 「保存」ボタンを押下します。

  60. API Gateway の追加 • 「Lambda 関数に権限を追加する」の確認画面が表示されるので、 「OK」ボタンを押下します。

  61. API Gateway の追加 • 「統合リクエスト」を選択します。

  62. API Gateway の追加 • 画面下部「マッピングテンプレート」を展開し、「リクエスト本文のパスス ルー」の項目で「テンプレートが定義されていない場合(推奨)」を選択します • 「マッピングテンプレートの追加」を押下します。

  63. API Gateway の追加 • Content-Type のところで、「multipart/form-data」 と入力し、 チェックボタンを押します。

  64. API Gateway の追加 • 画面下部にテンプレートの生成画面が追加されています。 • テンプレートの生成のプルダウンにて、「メソッドリクエストのパススルー」 を選択し「保存」ボタンを押します。

  65. API Gateway の追加 • 画面左「設定」を選択し、「設定」画面の下部「バイナリメディアタイプ」の 項目にて「バイナリメディアタイプの追加」を押下します。

  66. API Gateway の追加 • 「multipart/form-data」と入力し、「変更の保存」ボタンを押下します。

  67. API Gateway の追加 • 画面左ペイン「リソース」を選択後、 画面上部「アクション」より「APIのデプロイ」を選択します。

  68. API Gateway の追加 • APIのデプロイ画面にて、以下の設定をし、「デプロイ」ボタンを押下します。 • デプロイされるステージ:「新しいステージ」を選択 • ステージ名:「dev」を入力

  69. API Gateway の追加 • 画面左ペインから、「ステージ」を選択し、 「dev」-「rekognition」-「POST」を選択します。 • 画面右に、「URLの呼び出し」として作成されたAPIのURLが表示されるので、 これをコピーします。

  70. HTMLファイルの作成 • 以下のHTMLの****API Gateway URL 貼り付け****の部分に、先ほど作成し たAPI Gateway の URLを貼り付け、"index.html"のファイル名で保存します。

    • ソースコードは以下のリンクからダウンロードをしてください。 • https://qiita.com/hayate_h/items/2091dda98bb07f758f06
  71. HTMLファイルの解説 • フォームを用いて、選択されたファイルを送信するだけの、 単純な HTML 構文です。 <!DOCTYPE html> <html lang="ja">

    <head> <meta charset="UTF-8"> <title>有名人認識AIハンズオン</title> </head> <body> <p>画像識別AIである Amazon Rekognition を用いて、 有名人の認識をします!</p> <form action="****API Gateway URL 貼り付け****" enctype="multipart/form-data“ method="POST"> <input type="file" name="写真ファイルを選択" /> <input type="submit" name="アップロード"/> </form> </body> </html> • ここに、作成したAPI Gateway の URLを入力します。
  72. 動作確認 • 作成したIndex.html をブラウザで開きます。 (ファイルを選択しブラウザ上までドラッグ&ドロップすれば開けます)

  73. 動作確認 • 例えば、日本が世界に誇るお笑い芸人(?)「世界のワタベ」で 試してみましょう。 ※以下のスクリーンショットでは、知財権保護のため画像をぼかしています。

  74. 動作確認 • ファイルを選択し、「送信」ボタンを押すと… • "He/She is Ken Watabe with 100%

    confidence." • と表示されました!識別サービス完成です! さすが「世界のワタベ」ですね。
  75. お片付け

  76. お片付け • 以下のリソースを削除していきます。 • API Gateway • Lambda • CloudWatch

    ロググループ(Lambda の実行ログ) • Lambda用 IAMロール AWS Cloud AWS Lambda Amazon Rekognition Amazon API Gateway Client User IAM Role Amazon CloudWatch Logs
  77. API Gateway の削除 • API Gateway の画面から、 作成した「《お名前》-api-handson」を選択します。

  78. API Gateway の削除 • 画面左ペインで「リソース」が選択されている状態で、 アクションから「APIの削除」を選択します。

  79. API Gateway の削除 • 削除前の確認画面が表示されるので、 API名を入力後、「APIの削除」を押下します。

  80. CloudWatch ログ、IAMロール、Lambda 関数の削除 • Lambda のコンソール画面へ遷移するため、 画面上部の「サービス」から Lambda を検索し選択します。

  81. CloudWatch ログ、IAMロール、Lambda 関数の削除 • 一覧画面にて、「《お名前》-rekognition-handson」を選択します。

  82. CloudWatch ログの削除 • 画面上部「モニタリング」を選択し、 「CloudWatchのログを表示」ボタンを押下します。

  83. CloudWatch ログの削除 • CloudWatch Logs の画面に遷移します。 • 「アクション」から「Delete log group」を選択します。

  84. CloudWatch ログの削除 • 確認画面が表示されるので、「削除」ボタンを押します。

  85. IAMロールの削除 • Lambda の画面に戻り、「設定」を開きます。

  86. IAMロールの削除 • Lambdaの画面下部、「基本設定」の「編集」を押します。

  87. IAMロールの削除 • 「基本設定を編集」画面の下部まで行き、 「IAMコンソールでxxxロールを表示します。」を選択します。

  88. IAMロールの削除 • IAMロールの画面に遷移します。 • 画面右上「ロールの削除」を選択します。

  89. IAMロールの削除 • 確認画面が出るので、「はい、削除します」を押下します。

  90. Lambda 関数の削除 • Lambda の画面に戻り、 画面上部「アクション」から「関数の削除」を選択します。

  91. Lambda 関数の削除 • 確認画面が表示されるので、「削除」を選択します。

  92. Lambda 関数の削除 • 「正常に削除されました。」と表示がでます。 • お片付けは以上で終了です。 お疲れ様でした。

  93. 補足事項

  94. 料金 • AWSの各種サービスには、一定の無料利用枠があります。 • 今回の構成は、APIを大量にコールしない限り、 全てAWSの無料利用枠に収まる想定です。 • 参考までに、無料枠を超えた際に発生する料金の目安を記載しておきます。 (2020年10月13日時点 東京リージョン

    月単位) サービス分類 区分 料金 補足 データ通信料 AWSへのイン 0.000USD/GB AWSからのアウト 0.114USD/GB 最初の1GB~10TB CloudWatch ログ収集 0.760USD/GB ログ保存 0.033USD/GB Lambda リクエスト課金 0.20USD/100万件 実行時間課金 0.0000002083USD /128MB,100ミリ秒 API Gateway REST API 4.25USD/100万件 最初の3 億3,300万 コール受信数 Rekognition Image 0.0013USD/1画像 最初の100万枚
  95. 参考資料・ドキュメント • AWS Hands-on for Beginners Serverless #1 サーバーレスアーキテクチャで翻訳 Web

    API を構築する| AWS • https://pages.awscloud.com/event_JAPAN_Hands-on-for-Beginners- Serverless-2019_LP.html • AWS API Gateway + Lambda から multipart/form-dataを用いて バイナリデータ(wav)をS3にputする – Qiita • https://qiita.com/tetsu0831/items/220ba032116dc94063b3 • Rekognition — Boto3 Docs 1.15.11 documentation • https://boto3.amazonaws.com/v1/documentation/api/latest/reference/servic es/rekognition.html • API Gateway で統合レスポンスを設定する - Amazon API Gateway • https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api- gateway-integration-settings-integration-response.html • その他、AWS 公式ドキュメント
  96. EOF