はじめに

まずやってみる機械学習～AWS SAGEMAKER/REKOGNITIONとVUEで作る画像判定WEBアプリケーションを参考にサーバレスの画像分析Webアプリを構築できるソース一式をGitHubに公開した。

参考にしたページとの相違点を下記に示す

参考にしたページでは SageMaker で推論モデルの作成からエンドポイントを公開、そしてその結果を利用しているが、その部分をカットして簡易ver.にした。
- 推論のエンドポイントは基本的に立てっぱなしになるため、その間料金が発生してしまうため。
- API Gateway / rekognition / lambda であれば、基本的に使用しただけの料金になる。
参考ページでは cloud9 経由で lambda にデプロイしているが、Docker で chalice 環境を構築しそこからデプロイしている。
- Docker イメージをビルドするだけでchalice環境の構築からデプロイまで一気に行うように変更した。

構成図

必要なもの

AWSアカウント (AWS CLIの設定が完了していること)
Docker
GitHubに公開したソース一式

構築手順

1. GitHub からソースコード一式をクローン

.
├── Dockerfile
├── LICENSE
├── README.md
├── front
│   ├── index.html
│   └── main.js
├── image-classification
│   ├── app.py
│   └── requirements.txt
├── images
│   ├── test1.png
│   └── test2.png
└── requirements.txt

2. Dockerfileの書き換え

AWS CLIに必要なアクセスキーと秘密鍵の項目を書き換える

ENV AWS_ACCESS_KEY_ID=<<YOUR AWS_ACCESS_KEY_ID>>
ENV AWS_SECRET_ACCESS_KEY=<<YOUR AWS_SECRET_ACCESS_KEY>>

3. Docker イメージのビルド及び chalice のデプロイ

ソースコード一式に含まれるDockerfileからdockerイメージをビルドすると、chalice環境の構築からLambdaへのデプロイまで一気に行う。エンドポイントが画面に表示されるのでメモしておく。(Rest API URLの箇所)

コマンド
docker build -t <任意のイメージ名> .

Creating deployment package.
Updating policy for IAM role: image-classification-dev
Creating lambda function: image-classification-dev
Creating Rest API
Resources deployed:
  - Lambda ARN: arn:aws:lambda:ap-northeast-1:XXXXXXXXXXXX:function:image-classification-dev
  - Rest API URL: https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/api/

4. IAMロールのポリシー変更

chalice のデプロイ時に生成されるimage-classification-devのポリシーを編集する。
下記の2つのサービスを追加する。詳しくは2-2-1. バックエンド(ラムダ) の権限設定の項目を参照。

Rekognition
Translate

5. 公開用の S3 バケット作成

AWS コンソールマネジメントもしくはCLI等でS3バケットを作成する。
詳しくは 2-1-2. S3の項目を参照。

次に、front/main.js の <<YOUR ENDPOINT URL>> を chalice デプロイ時にメモしたエンドポイントに書き換えて、作成したバケットにアップロードする。

.post(
  "https://<<YOUR ENDPOINT URL>>/api/rekognition",
  this.image,
  config
)

aws s3 cp index.html s3://<<YOUR BUCKET NAME>>/ --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
aws s3 cp main.js s3://<<YOUR BUCKET NAME>>/ --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

【任意】IPによるアクセス制限をつける場合

作成した S３バケットのアクセス制限→バケットポリシーの項目を編集
下記の例では接続元IPがxxx.xxx.xxx.xxx/xx もしくは yyy.yyy.yyy.yyy/yyからのアクセスを許可する

{
    "Version": "2012-10-17",
    "Id": "SourceIP",
    "Statement": [
        {
            "Sid": "SourceIP",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::<YOUR BUCKET NAME>/*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": [
                        "xxx.xxx.xxx.xxx/xx",
                        "yyy.yyy.yyy.yyy/yy",
                    ]
                }
            }
        }
    ]
}

6. 動作確認

作成した S3 バケットの「プロパティ」から「Static website hosting」に含まれるエンドポイントのURLにアクセスする。
詳しくは 2-3. 動作確認の項目を参照。
choose fileを選択し、画像をアップロードすると、左側に画像が表示される。Uploadボタンを押すと右側に判定結果が表示されれば成功。

その他（追加実装したいところ）

Rekognitionの他のサービス（例えば顔分析、顔認識）
Vue.js を React.js に変えたり、判定結果が表示されるまで待機中のアイコンに変える

画像分析サーバレスWebアプリ 簡易ver.