AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ

Takayuki Shimizu

Solutions Architect, Amazon Data Services Japan, K.K.

2015/4/10

AWS Lambda ハンズオン2-Tier アーキテクチャで未来へ

自己紹介

清水崇之

• ソリューションアーキテクト（WEST 担当）

• 大阪のお客様にもプライム対応で参上します

• Web サービス全般、モバイル、ゲームなど

• AWS 芸人 (詳しくは slideshare)

アジェンダ

AWS Lambdaとは？

目的とゴール

• 2-Tier アーキテクチャ

• 画像アップロードの概要

ハンズオンの注意点

Part１

• MCにログイン

• S3バケットの作成

• Lambda Exec Role の作成

• Node.js プログラムの作成

• Lambda Function の作成

• 動作確認

Part２

• Cognito Identity Pool の作成

• 画像アップロード用 HTML を S3 でホスティング

• 画像アップロード用バケットの CORS 対応

• 動作確認

Part３

• DynamoDB の作成

• Lambda Exec Role の修正

• Node.js プログラムの修正

• Cognito Unauth Role の修正

• HTML の修正

• 動作確認

事前準備

※Node.js をインストールされていない方は実施してください

5

Node.js インストール (Max OS X)

http://nodejs.jp/nodejs.org_ja/docs/v0.10/download/

http://nodejs.jp/nodejs.org_ja/docs/v0.10/download/

6

サポートバージョン

http://docs.aws.amazon.com/ja_jp/lambda/latest/dg/current-supported-versions.html

http://docs.aws.amazon.com/ja_jp/lambda/latest/dg/current-supported-versions.html

7


node-v0.10.xx.pkg

8


Node.js が正しくインストールされたか確認します。

• 以下のコマンドを実行して Node.js のバージョンを確認します。

$ node --version

アジェンダ

AWS Lambdaとは？

目的とゴール




Part１






• 動作確認

Part２




• 動作確認

Part３





• HTML の修正

• 動作確認

AWS Lambda とは

AWS Lambdaとは

クラウド上で、イベントをトリガーに独自のコードを稼働させるComputeサービス

• EC2インスタンスやOS等インフラの管理作業が不要

• 毎日数件から毎秒数千件のリクエストまで自動的にスケール

• 従量課金、実際にコードが稼働した時間に対してのお支払

• 新たに追加された情報(イベント)に対して即座に応答するアプリケーションを、特別な仕組みなく簡単に実装できる

• 2014年11月に発表され、現在はPreviewとして提供

特徴

インフラの管理が不要

ビジネスロジックにフォーカスできる

コードをアップロードするだけで、あとはAWS Lambdaが以下をハンドリング

• キャパシティ

• スケール

• デプロイ

• 耐障害性

• モニタリング

• ロギング

• セキュリティパッチの適用

オートスケール

• イベントの発生レートに合わせて自動でスケール

• プロビジョニング中や完了を気にする必要なし

• コードが稼働した分だけのお支払い

Bring your own code

Node.jsで書かれたコードを実行

コード内では以下も可能• スレッド/プロセスの生成

• バッチスクリプトや何らかの実行ファイルの実行

• /tmpのread/write

各種ライブラリも利用可能• ネイティブライブラリも可能

• 利用するライブラリを一緒にアップロード

細やかな料金体系

• 100ミリ秒単位でのコンピュート時間に対する価格設定

• リクエストに対する低額の課金

• 十分な無料枠

ユースケース

イメージリサイズ、サムネイル生成

S3に画像がアップロードされたときにサムネイルの生成やリサイズを実行

AWS LambdaAmazon S3 Bucket イベント

元画像サムネイル画像1

2

3

値チェックや別テーブルへのコピー

DynamoDBへの書き込みに応じて値チェックをしつつ別テーブルの更新やプッシュ通知を実行

AWS LambdaAmazon DynamoDB

Table and Streamプッシュ通知

別テーブルを更新

監査と通知

S3に保管されるCloudTrailのログを分析し、怪しい行動や異常を検知したら通知する

AWS APIコール

AWS CloudTrail Logs

AWS Lambda

Bucketイベントプッシュ通知

口コミアプリ

投稿の書き込み/表示はDynamoDBと直接

レートの計算はモバイルアプリから直接Lambdaを実行し非同期で実行

1. 認証・認可・ FBアプリと連携

Cognito

DynamoDBApp with AWS Mobile

SDK

2. 口コミの投稿・投稿内容とレーティング

4. 過去の全データを元に平均値の計算と結果のDynamoDBへの登録等

3. Lambda functionの起動

Lambda

Followers

写真共有モバイルアプリ

4. メタデータをDynamoDBに登録- タイトル、コメント等

1. 認証・認可・ FBアプリと連携

6. Push通知- フレンドやフォロワーに通知

Cognito

Mobile Analytics

DynamoDB

S3

SNS7. 画像をポストしたことをAnalyticsに登録

3. 画像のリサイズ

2. S3への画像アップロード

5. 結果をSNSへ通知

App with AWS Mobile

SDK

アジェンダ

AWS Lambdaとは？

目的とゴール




Part１






• 動作確認

Part２




• 動作確認

Part３





• HTML の修正

• 動作確認

目的とゴール

25

目的：2-Tier アーキテクチャ

AWS Lambda

⎼サーバーレス、EC2レス

Amazon Cognito

⎼テンポラリクレデンシャル発行

Amazon S3、Amazon DynamoDB

⎼Lambdaを中心に各種サービスを連携したシステム構築

26

Lambda

4. 画像アップロード

S3 Thumbnail

S3 Origin

6. 画像リサイズ

5. ファンクション実行

CloudWatch

ログ

DynamoDB

2. ゲスト認証

Cognito3. Temporary Credential

ゴール：画像アップローダ

7. メタ情報

1. HTML

8. 一覧取得

S3 HTML

27

ゴール：画像アップローダ

画像をアップロードできる

画像一覧を取得できる

実寸で表示

サムネイルで表示

アジェンダ

AWS Lambdaとは？

目的とゴール




Part１






• 動作確認

Part２




• 動作確認

Part３





• HTML の修正

• 動作確認



以下の URL から Asset_20150410.zip をダウンロードしてください。

• https://s3-ap-northeast-1.amazonaws.com/shimiz-training/LambdaHandson_20150410/Asset_20150410.zip

ディレクトリ構成

Asset_20150410

|-Part1.txt

|-Part2.txt

|-Part3.txt

|-images

|-test1.png

|-test2.jpg

・・・

https://s3-ap-northeast-1.amazonaws.com/shimiz-training/LambdaHandson_20150410/Asset_20150410.zip


資料/コード中に記載される [xxx] という部分はすべて自身で独自に決めた文字列に置き換えてください

1. [xxx-image-uploader] と入力

・・・

"Effect":"Allow",

"Principal": "*",

"Action":["s3:GetObject"],

"Resource":["arn:aws:s3:::xxx-image-uploader/*"

]

}

・・・

・・・

"Effect":"Allow",

"Principal": "*",


"Resource":["arn:aws:s3:::takayuki-image-uploader/*"

]

}

・・・

例）タカユキさんの場合xxx = takayuki

takayuki-image-uploader

資料/コード中の記載実際に入力する値


コードは Asset に内包されている txt ファイルからコピペしてください。

この資料（PDF）をコピペすると、改行コードなど不要な文字列が混入する場合があります。

資料(PDF) からコピペしない txt ファイルからコピペする

アジェンダ

AWS Lambdaとは？

目的とゴール




Part１






• 動作確認

Part２




• 動作確認

Part３





• HTML の修正

• 動作確認

Part１

35

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


画像アップローダ

7. メタ情報

1. HTML

8. 一覧取得

S3 HTML

36

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

8. 一覧取得

S3 HTML

マネージメントコンソールログイン

38

AWS Management Consoleにログインする

AWSのホームページ（http://aws.amazon.com/）から、管理コンソール「AWS Management Console」にログインします。

1. [アカウント] をクリック

2. [AWS マネジメントコンソール] をクリック

http://aws.amazon.com/

39


作成したAWSアカウント情報を入力してサインインします。

1. メールアドレス入力

3. パスワード入力

4. クリックしてサインイン

2. クリック

40


MFA を設定しているアカウントは Authentication Code を入力します。

• MFAの詳細は以下URLを参照 http://aws.amazon.com/jp/iam/details/mfa/

1. Authentication Code を入力2. クリックしてサインイン

http://aws.amazon.com/jp/iam/details/mfa/

41

リージョンを変更する

US East（N. Virginia）リージョンに変更します。

2. [US East (N.Virginia)] を選択

1. リージョン選択メニュー

注意現時点でLambdaは東京リージョン未対応です。このハンズオンは全て N. Virginia で実施します。

S3 バケットの作成

43

S3 HTML

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


7. メタ情報

1. HTML


S3バケットを作成し設定します

44

S3 を選択する

サービス一覧を表示して S3 を選択します。

1. [サービス一覧] ボタン

2. [S3]をクリック

45

オリジナル画像用バケットを作成する

オリジナル画像用バケットを作成します。

1. [Create Bucket] をクリック

46

オリジナル画像用バケットを作成する

[xxx-image-uploader] というバケット名で [US Standard] に作成する。

1. [xxx-image-uploader] と入力

2. [US Standard] を選択

3. [Create] をクリック

注意

この資料でこの先に出てくる全てのプレフィックス(xxxの部分)は自身で独自に決めた文字列に

置き換えてください。

例）タカユキさんの場合takayuki-image-uploader

47

オリジナル画像用バケットをウェブホスティングする

Static Web Hosting 機能を Enable にします。

1. [xxx-image-uploader] を選択

2. [Properties] をクリック

3. [Static Website Hosting] をクリック

3. [Enable website hosting] を選択

4. [index.html] と入力

5. [Save] をクリック

48

オリジナル画像用バケットのバケットポリシーを修正する

誰でも閲覧できるように Bucket Policy を修正します。



3. [Permissions] をクリック

4. [Add(Edit) bucket policy] をクリック

49



1. 次ページの内容を入力


50


{

"Version":"2012-10-17",

"Statement":[{

"Sid":"AddPerm",

"Effect":"Allow",

"Principal": "*",


"Resource":["arn:aws:s3:::xxx-image-uploader/*"

]

}

]

}

※ xxx-image-uploader の部分は自身のS3バケット名を入力します。

xxxの部分は自身の文字列に置き換えてください

コードスニペット： [Asset] > [Part1.txt] > [Section1]

注意

このPDFからコードをコピペしないでください。改行コードなど不要な文字

列が混入する場合があります。Asset に内包された txt ファイル

の該当箇所からコピペしてください。

51

サムネイル画像用バケットを作成する

サムネイル画像用バケットを作成します。


52

サムネイル画像用バケットを作成する

[xxx-image-uploader-thumbnail] というバケット名で [US Standard] に作成する。

1. [xxx-image-uploader-thumbnail] と入力




53

サムネイル画像用バケットをウェブホスティングする

Static Web Hosting 機能を Enable にします。

1. [xxx-image-uploader-thumbnail] を選択


3. [Static Website Hosting] をクリック




54

サムネイル画像用バケットのバケットポリシーを修正する


1. [xxx-image-uploader-thumbnail] を選択




55





56


{

"Version":"2012-10-17",

"Statement":[{

"Sid":"AddPerm",

"Effect":"Allow",

"Principal": "*",


"Resource":["arn:aws:s3:::xxx-image-uploader-thumbnail/*"

]

}

]

}

※ xxx-image-uploader-thumbnail の部分は自身のS3バケット名を入力します。



Lambda Exec Role の作成

58

S3 HTML

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


7. メタ情報

1. HTML


s3:GetObject

s3:PutObject

logs:*

Invoke Role Exec Role

Lambda が S3 の Put Getおよびログ出力するための権限を与える

59

IAM を選択する

サービス一覧を表示して IAM を選択します。


2. [Identity & Access Management] をクリック

60

Exec Role を作成する

Exec Role を作成します。

2. [Create New Role] をクリック

1. [Roles] をクリック

61


Exec Role 名を入力します。

1. [image_uploader_exec_role] と入力

2. [Next Step] をクリック

62


Role Type を選択します。

2. [AWS Lambda] をクリック

1. [AWS Service Roles] を選択

63


Policy は選択せず次のステップへ

1. [Next Step] をクリック

64


Exec Role を作成します。

1. [Create Role] をクリック

65

Exec Role の Policy を修正する

作成した Exec Role を選択します。

1. [image_uploader_exec_role] をクリック

66


Inline Policy を作成します。

1. [∨] をクリック

2. [click here] をクリック

67


Custom Policy を選択します。

1. [Custom Policy] を選択

2. [Select] をクリック

68


内容を入力します。

1. [image_uploader_exec_policy] と入力

2. [次ページの内容] を入力

3. [Apply Policy] をクリック

69

image_uploader_exec_policy の内容{

"Version": "2012-10-17",

"Statement": [

{

"Effect": "Allow",

"Action": [

"logs:*"

],

"Resource": "arn:aws:logs:*:*:*"

},

{

"Effect": "Allow",

"Action": [

"s3:GetObject"

],

"Resource": [

"arn:aws:s3:::xxx-image-uploader/*"

]

},

{

"Effect": "Allow",

"Action": [

"s3:PutObject"

],

"Resource": [

"arn:aws:s3:::xxx-image-uploader-thumbnail/*"

]

}

]}

※ xxx-image-uploader-… の部分は自身のS3バケット名を入力します。




Node.js プログラムの作成

71

S3 HTML

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


7. メタ情報

1. HTML


Node.js

プログラム

Lambda にデプロイするプログラムを作成します

72

Node.js プログラムを作成する

プログラムを格納するディレクトリを作成し、モジュールをインストールします。

$ cd ~/Desktop

$ mkdir ImageUploader

$ cd ImageUploader

$ npm install async gm

npm http GET https://registry.npmjs.org/gm

npm http GET https://registry.npmjs.org/async

...

npm http 200 https://registry.npmjs.org/array-series/-/array-series-0.1.5.tgz

[email protected] node_modules/async

[email protected] node_modules/gm

├── [email protected]



└── [email protected]

async および gmモジュールを利用します

73

Node.js プログラムを作成する

メインプログラムを実装します。

vi を編集モード（Insert）へ移行します。

次ページの内容をコピペします。

vi をコマンドモードへ移行します。

vi を保存して終了します。

$ vi ImageUploader.js

i

:wq

ESC

74

// d

ep

en

de

ncie

s

va

ra

syn

c=

re

qu

ire

('a

syn

c');

va

rA

WS

= r

eq

uir

e('a

ws-s

dk');

va

rg

m=

re

qu

ire

('g

m')

.su

bC

lass({

im

ag

eM

ag

ick:

tru

e }

); // E

na

ble

Im

ag

eM

ag

ick

inte

gra

tio

n.

va

ru

til=

re

qu

ire

('u

til')

;

// c

on

sta

nts

va

rM

AX

_W

IDT

H =

10

0;

va

rM

AX

_H

EIG

HT

= 1

00

;

// g

et re

fere

nce

to

S3

clie

nt

va

rs3

= n

ew

AW

S.S

3()

;

exp

ort

s.h

an

dle

r=

fu

nctio

n(e

ve

nt,

co

nte

xt)

{

// R

ea

d o

ptio

ns fro

m t

he

eve

nt.

co

nso

le.lo

g("

Rea

din

g o

ptio

ns fro

m e

ve

nt:

\n",

util.in

sp

ect(

eve

nt,

{d

ep

th: 5

}));

va

rsrc

Bu

cke

t=

eve

nt.

Reco

rds[0

].s3

.bu

cke

t.n

am

e;

va

rsrc

Ke

y=

eve

nt.

Reco

rds[0

].s3

.ob

ject.

ke

y;

va

rd

stB

ucke

t=

src

Bu

cke

t+

"-t

hu

mb

na

il";

va

rd

stK

ey

= "

thu

mb

na

il-"

+ s

rcK

ey;

// S

an

ity c

he

ck: va

lid

ate

th

at so

urc

e a

nd

de

stin

atio

n a

re d

iffe

ren

t b

ucke

ts.

if (

src

Bu

cke

t=

= d

stB

ucke

t) {

co

nso

le.e

rro

r("D

estin

atio

n b

ucke

t m

ust

no

t m

atc

h s

ou

rce

bu

cke

t.")

;

retu

rn;

} // In

fer

the

im

ag

e t

yp

e.

va

rty

pe

Ma

tch

= s

rcK

ey.m

atc

h(/

\.([

^.]*

)$/)

;

if (

!typ

eM

atc

h)

{

co

nso

le.e

rro

r('u

na

ble

to

in

fer

ima

ge

typ

e f

or

ke

y '

+ s

rcK

ey);

retu

rn;

} va

rim

ag

eT

yp

e=

typ

eM

atc

h[1

];

if (

ima

ge

Typ

e!=

"jp

g"

&&

im

ag

eT

yp

e!=

"p

ng

") {

co

nso

le.lo

g('skip

pin

g n

on

-im

ag

e ' +

src

Ke

y);

retu

rn;

} // D

ow

nlo

ad

th

e im

ag

e f

rom

S3

, tr

an

sfo

rm, a

nd

up

loa

d t

o a

diffe

ren

t S

3 b

ucke

t.

asyn

c.w

ate

rfa

ll([

fun

ctio

n d

ow

nlo

ad

(ne

xt)

{

// D

ow

nlo

ad

th

e im

ag

e f

rom

S3

in

to a

bu

ffe

r.

s3

.ge

tOb

ject(

{

Bu

cke

t: s

rcB

ucke

t,

Ke

y: src

Ke

y

}, ne

xt)

;

},

fun

ctio

n tra

nfo

rm(r

esp

on

se

, n

ext)

{

gm

(re

sp

on

se

.Bo

dy).

siz

e(f

un

ctio

n(e

rr, siz

e)

{

// In

fer

the

sca

lin

g fa

cto

r to

avo

id s

tre

tch

ing

th

e im

ag

e u

nn

atu

rally.

va

rsca

lin

gF

acto

r=

Ma

th.m

in(

MA

X_

WID

TH

/ s

ize

.wid

th,

MA

X_

HE

IGH

T /

siz

e.h

eig

ht

); va

rw

idth

=

sca

lin

gF

acto

r*

siz

e.w

idth

;

va

rh

eig

ht =

sca

lin

gF

acto

r*

siz

e.h

eig

ht;

// T

ran

sfo

rm t

he

im

ag

e b

uff

er

in m

em

ory

.

this

.re

siz

e(w

idth

, h

eig

ht)

.to

Bu

ffe

r(im

ag

eT

yp

e, fu

nctio

n(e

rr, b

uff

er)

{

if (

err

) {

ne

xt(

err

);

} e

lse

{

ne

xt(

nu

ll, re

sp

on

se

.Co

nte

ntT

yp

e, b

uff

er)

;

}

});

});

}, fun

ctio

n u

plo

ad

(co

nte

ntT

yp

e, d

ata

, n

ext)

{

// S

tre

am

th

e tra

nsfo

rme

d im

ag

e t

o a

diffe

ren

t S

3 b

ucke

t.

s3

.pu

tOb

ject(

{

Bu

cke

t: d

stB

ucke

t,

Ke

y: d

stK

ey,

Bo

dy: d

ata

,

Con

ten

tTyp

e: co

nte

ntT

yp

e

}, ne

xt)

;

}

], fu

nctio

n (

err

) {

if (

err

) {

co

nso

le.e

rro

r(

'Una

ble

to

re

siz

e '

+ s

rcB

ucke

t+

'/' +

src

Ke

y+

' an

d u

plo

ad

to

' +

dstB

ucke

t+

'/' +

dstK

ey

+

' du

e t

o a

n e

rro

r: '

+ e

rr

);

} e

lse

{

co

nso

le.lo

g(

'Su

cce

ssfu

lly r

esiz

ed

' +

src

Bu

cke

t+

'/' +

src

Ke

y+

' an

d u

plo

ad

ed

to

' +

dstB

ucke

t+

'/' +

dstK

ey

);

} co

nte

xt.

do

ne

();

}

);

};


ImageUploader.js の内容

75

Node.js プログラムをアーカイブする

ImageUploader.js と node_modules をアーカイブします。

• ImageUploader ディレクトリ内で以下コマンドを実行します。

ディレクトリ構造

ImageUploader.zip

|- ImageUploader.js

|- node_modules

|- async

|- gm

$ zip -r ImageUploader.zip ImageUploader.js node_modules

Lambda Function の作成

77

S3 HTML

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


7. メタ情報

1. HTML


Lambda Function を作成してプログラムを設置します

78

Lambda を選択する

サービス一覧を表示して Lambda を選択します。


2. [Lambda]をクリック

79

Lambda Function を作成する

Lambda Function を作成します。

1. [Create a Lambda function] をクリック

初利用の場合は以下のようなページが表示される

80


Lambda Function を作成します。

1. [ImageUploader] と入力

2. [Upload a .ZIP file] を選択

81


[ImageUploader.zip] をアップロードします。

1. [Upload] をクリック

2. [ImageUploader.zip] を選択

3. [Open] をクリック

82


その他の設定を入力します。

1. [ImageUploader.js] と入力

3. [image_uploader_exec_role] を選択

4. [128] を選択

2. [handler] と入力

5. [60] を選択6. [Create Lambda function] をクリック

83

Event Source を設定する

Event Source を設定します。

1. [○] をクリック

2. [Add event source] をクリック

84

Event Source を設定する

xxx-image-uploader をイベントソースとして設定します。


3. [Put] を選択

4. [Submit] をクリック

1. [S3] を選択

動作確認

86

S3 HTML

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


7. メタ情報

1. HTML


ここまでの作業で枠内を作成した

87

マネージメントコンソールから画像をアップする




88


xxx-image-uploader を選択します。

1. [xxx-image-uploader] をクリック

89


[Upload] をクリックします。


90


画像をアップロードします。

1. [Add Files] をクリック

2. [test.png] を選択


4. [Start Upload] をクリック

画像ファイル名にスペースや記号などがあると

正常動作しないので注意してください

.png, .jpgのみ対応

91

サムネイルが作成されたことを確認する

xxx-image-uploader-thumbnail を選択します。

1. [xxx-image-uploader-thumbnail] をクリック

92


thumbnail-test.png が作成されていることを確認します。

1. [thumbnail-test.png] を選択


３. [url] をクリック

93


thumbnail-test.png を表示して width が 100px になるように縮小されていることを確認します。

オリジナル test.png（640x480）サムネイル thumbnail-test.png（100x75）

94

ログが出力されていることを確認する

ログが出力されていることを確認します。

1. [logs] をクリック

2. ログを確認

正常に動作しないときはログを確認してください。

1. LambdaFunctionが実行されてからログが出力されるまで数十秒くらいかかりますので、あせらずにデバッグしてくさい。

2. (Invoke Role, Exec Role) において xxx の部分を間違って設定している可能性があります。

3. ImageUploader.js の作成や、zip の圧縮に失敗している可能性があります。

4. 画像ファイル名にスペースや記号が入っている場合は正常動作しません。

アジェンダ

AWS Lambdaとは？

目的とゴール




Part１






• 動作確認

Part２




• 動作確認

Part３





• HTML の修正

• 動作確認

Part２

97

S3 HTML

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


7. メタ情報

1. HTML


98

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

S3 HTML

画像をマネージメントコンソールからアップロードするのではなく、HTML(Javascript)からアップロードできるようにする

Cognito Identity Pool の作成

100

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

S3 HTML

直接HTML(JavaScript)からS3に画像をアップロードできるように

Cognito で identity (テンポラリクレデンシャル) を発行する

101

Cognito を選択する

サービス一覧を表示して Cognito を選択します。


2. [Cognito] をクリック

102

Identity Pool を作成する

Identity Pool を作成します。

1. [Create new identity pool] をクリック

103


Identity Pool の設定をします。

2. [Enable access to unauthenticated identities] をチェック


3. [Create Pool] をクリック

104


1. [Decide later] を選択

2. [Create a new IAM role] を選択

3. [Cognito_ImageUploaderUnauth_DefaultRole] と入力 4. [Update roles] をクリック

Cognito Unauth Role の修正

106

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

s3:PutObject

Unauth_Role

S3 HTML

HTML(JavaScript)からS3に画像をアップロードできる権限を

与える

107

Cognito_ImageUploaderUnauth_DefaultRole を修正する




108


Cognito_ImageUploaderUnauth_DefaultRole を選択します。

2. [Cognito_ImageUploaderUnauth_Default] を選択

1. [Roles] をクリック

109


Cognito_ImageUploaderUnauth_DefaultRole にポリシーを追加します。

1. [Create Role Policy] をクリック

110



2. [Cognito_ImageUploaderUnauth_Default] を選択

1. [Roles] をクリック 1. [Custom Policy] を選択

2. [Select] をクリック

111



1. [image_uploader_html_policy] と入力



112

image_uploader_html_policy の内容

{

"Version": "2012-10-17",

"Statement": [

{

"Effect": "Allow",

"Action": [

"s3:PutObject",

"s3:PutObjectAcl"

],

"Resource": [


]

}

]}

※ xxx-image-uploader の部分は自身のS3バケット名を入力します。



画像アップロード用 HTML をS3 でホスティング

114

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

index.html

S3 HTML 画像をアップロードするためのHTML を作成する

WebホスティングするためのS3バケットも作成する

115

画像アップロード HTML 用バケットを作成する




116


HTML ホスティング用バケットを作成します。


117


HTML ホスティング用バケットを作成します。

1. [xxx-image-uploader-html] と入力




118

オリジナル画像用バケットを作成します。


1. [xxx-image-uploader-html] を選択

2. [Properties] を選択



3. [Static Website Hosting] を選択


119

画像アップロード HTML 用バケットのバケットポリシーを修正する






120





121


{

"Version":"2012-10-17",

"Statement":[{

"Sid":"AddPerm",

"Effect":"Allow",

"Principal": "*",


"Resource":["arn:aws:s3:::xxx-image-uploader-html/*"

]

}

]

}

※ xxx-image-uploader-html の部分は自身のS3バケット名を入力します。



122

AccountId を確認する

IdentityPoolId を確認する

123

<!DOCTYPE html>

<html><head>

<meta charset="UTF-8"><title>ImageUploader</title>

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.21.min.js"></script>

</head><body>

<script>

// Cognito

var params = {

AccountId: "634266xxxxxx", // Please modify

RoleArn: "arn:aws:iam::634266xxxxxx:role/Cognito_ImageUploaderUnauth_DefaultRole", // Please modify

IdentityPoolId: "us-east-1:0cxxxxxx-eexx-46xx-88xx-12dfc2xxxxxx" // Please modify

};

AWS.config.region = "us-east-1";

AWS.config.credentials = new AWS.CognitoIdentityCredentials(params);

AWS.config.credentials.get( function (err) {

if (err) {

console.log(err);

} else {

console.log("Successfully authorized. ID:" + AWS.config.credentials.identityId);

}

});

// S3 Upload

function upload () {

console.log("Now uploading...");

var s3 = new AWS.S3({params:{Bucket:"xxx-image-uploader"}}); // Please modify

var file = document.getElementById("fileToUpload").files[0];

if (file) {

s3.putObject({

Key:file.name, ContentType:file.type, Body:file, ACL:"public-read"

}, function (err, data) {

if (err) {

console.log(err);

} else {

console.log("Successfully uploaded.");

}

});

}

}

</script>

<input type="file" name="fileToUpload" id="fileToUpload">

<input type="submit" value="upload" onclick="upload()"></body></html>

画像アップロード HTML を作成する（index.html）

xxxの部分は自身の文字列を入力してください。

自身の AccountId を入力

作成したCognitoIdentityPool のIdentityPoolId


自身の AccountId を入力

124

バケットに HTML をアップする




125


1. [xxx-image-uploader-html] をクリック

xxx-image-uploader-html バケットに HTML をアップロードします。

126





3. [index.html] をクリック



画像アップロード用バケットのCORS対応

128

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

S3 HTML

1. HTML

CORS の対応が必要

129

CORSとは

CORS(Cross-Origin Resource Sharing)は、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。

各社ブラウザには、クロスドメイン通信を拒否する仕組みが実装されています。これは、クロスサイトスクリプティングを防止するためです。

ブラウザ

リクエスト

html, js, css

レスポンスヘッダで制御Access-Control-Allow-Origin: *

Access-Control-Allow-Headers: *

Access-Control-Allow-Methods: GET, POST, DELETE, PUT

Ajax

S3 Origin

S3 HTML

130

画像アップロード用バケットのCORSを設定する

CORSを設定します。


2. [Properties] を選択

3. [Permissions] を選択

4. [Add(Edit) CORS Configuration] をクリック

131

画像アップロード用バケットのCORSを設定する

CORSを設定します。



132

CORS Configuration

<?xml version="1.0" encoding="UTF-8"?>

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

<CORSRule>

<AllowedOrigin>*</AllowedOrigin>

<AllowedMethod>GET</AllowedMethod>

<AllowedMethod>PUT</AllowedMethod>

<AllowedMethod>POST</AllowedMethod>

<AllowedMethod>DELETE</AllowedMethod>

<AllowedHeader>*</AllowedHeader>

</CORSRule>

</CORSConfiguration>


動作確認

134

サイトを確認する

サイトを確認します。


3. [xxx-image-uploader-html.s3-website-us-east-1.amazonaws.com] をブラウザで開く

2. [Static Website Hosting] を選択

135

サイトを確認する

画像を選択してアップロードできることを確認します。

1. [Browse] をクリックして画像(test2.png)を選択

2. [upload] をクリックして送信

3. Console にログが出力

test2.png

136

バケットにオリジナルとサムネイルが作成されていることを確認する

xxx-image-uploader にオリジナル(test2.png)がアップロードされます。

xxx-image-uploader-thumbnail にサムネイル(thumbnail-test2.png)が作成されます。

test2.png thumbnail-test2.png

アジェンダ

AWS Lambdaとは？

目的とゴール




Part１






• 動作確認

Part２




• 動作確認

Part３





• HTML の修正

• 動作確認

Part３

139

8. 一覧取得

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

S3 HTML

140

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

8. 一覧取得

S3 HTMLDynamoDB で

画像ファイルを管理する

DynamoDB の作成

142

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

8. 一覧取得

S3 HTMLDynamoDB の

テーブルを作成する

143


サービス一覧を表示して DynamoDB を選択します。

2. [DynamoDB] をクリック


144


ImageUploader という名称でテーブルを作成します。

1. [Create Table] をクリック

145


“Hash and Range” Primary Key Type でテーブルを作成します。

7. [Continue] をクリック


2. [Hash and Range] を選択

3. [String] を選択

4. [id] と入力

5. [Number] を選択

6. [timestamp] と入力

146


インデックスは不要です。


147


スループットを指定します。


1. [5] と入力

2. [5] と入力

148


アラームははずします。


1. [Use Basic Alarms] のチェックをはずす

149


テーブルを作成します。


150

テーブルを確認する

テーブルを確認します。

1. [ImageUploader] テーブルが作成されたことを確認

Lambda Exec Role の修正

152

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証


7. メタ情報

1. HTML


s3:GetObject

s3:PutObject

logs:*

Exec Role

dynamodb:PutItem

8. 一覧取得

S3 HTML

Lambda が DynamoDB にPutItem する権限を与える

153

image_uploader_exec_policy を修正する




154


image_uploader_exec_policy を修正します。


2. [image_uploader_exec_role] をクリック

1. [Roles] を選択

155




1. [Edit Policy] をクリック

156



1. 次ページの内容を追記


157

image_uploader_exec_policy の内容{

"Version": "2012-10-17","Statement": [

{"Effect": "Allow","Action": [

"logs:*"],"Resource": "arn:aws:logs:*:*:*"

},{

"Effect": "Allow","Action": [

"s3:GetObject"],"Resource": [

"arn:aws:s3:::xxx-image-uploader/*"]

},{

"Effect": "Allow","Action": [

"s3:PutObject"],"Resource": [

"arn:aws:s3:::xxx-image-uploader-thumbnail/*"]

},

{

"Effect": "Allow",

"Action": [

"dynamodb:PutItem"

],

"Resource": [

"arn:aws:dynamodb:*:*:table/ImageUploader"

]

}]

}



この部分を追記する


Node.js プログラムの修正

159

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

Node.js

プログラム

8. 一覧取得

S3 HTML

DynamoDB にデータ登録するようにプログラムを修正する

160

Node.js プログラムの修正・・・・・・

function upload(contentType, data, next) {// Stream the transformed image to a different S3 bucket.s3.putObject({

Bucket: dstBucket,Key: dstKey,Body: data,ContentType: contentType

},next);

},

function putItem(response, next) {

var time = String(new Date().getTime());

dynamodb.putItem({

TableName: 'ImageUploader',

Item:{

id: {S:'ImageUploader'},

timestamp :{N: time},

original :{S: srcBucket + '.s3-website-us-east-1.amazonaws.com/' + srcKey},

thumbnail :{S: dstBucket + '.s3-website-us-east-1.amazonaws.com/' + dstKey}

}

},

next);

}], function (err) {

if (err) {console.error(

'Unable to resize ' + srcBucket + '/' + srcKey +' and upload to ' + dstBucket + '/' + dstKey +' due to an error: ' + err

);} else {

console.log('Successfully resized ' + srcBucket + '/' + srcKey +' and uploaded to ' + dstBucket + '/' + dstKey

・・・・・・・



161

Node.js プログラムをアーカイブする

ImageUploader.js と node_modules をアーカイブします。

• ImageUploader ディレクトリ内で以下コマンドを実行します。

$ zip -r ImageUploader.zip ImageUploader.js node_modules

162

Lambda を選択する



2. [Lambda]をクリック

163

1. [○] をクリック

2. [Edit/Test] をクリック

Lambda Function を修正する

Edit/Test をクリックします。

164

Lambda Function を修正する

修正したプログラムをアップロードします。



2. [ImageUploader.zip] を選択



念のため動作確認

166

DynamoDBの動作を確認する

画像を選択してアップロードできることを確認します。

1. [Browse] をクリックして画像(test3.png)を選択

2. [upload] をクリックして送信

3. Console にログが出力

test3.png

167

DynamoDBのデータを確認する

サービス一覧を表示して DynamoDB を選択します。

2. [DynamoDB] をクリック


168


1. [ImageUploader] を選択

2. [Explore Table] をクリック

169


1. [Scan] を選択

2. [Go] をクリック

3. 検索された Item をチェック

4. データが登録されていることを確認

Cognito Unauth Role の修正

171

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

8. 一覧取得

s3:PutObject

Unauth_Role

Dynamodb:Query

S3 HTML

HTML(JavaScript)がDynamoDB から

データを取得する権限を与える

172





173


1. [Roles] を選択

2. [Cognito_ImageUploaderUnauth_DefaultRole] をクリック

174


1. image_uploader_html_policy の

[Edit Policy] をクリック

175


1. 次ページの内容を追記


176

image_uploader_html_policy の内容{

"Version": "2012-10-17",

"Statement": [

{

"Effect": "Allow",

"Action": [

"s3:PutObject",

"s3:PutObjectAcl"

],

"Resource": [


]

},

{

"Effect": "Allow",

"Action": [

"dynamodb:Query"

],

"Resource": [

"arn:aws:dynamodb:*:*:table/ImageUploader"

]

}

]

}




HTML の修正

178

Lambda


S3 Thumbnail

S3 Origin



CloudWatch

ログ

DynamoDB

2. ゲスト認証



7. メタ情報

1. HTML

8. 一覧取得

index.html

S3 HTML


データを取得できるように修正


データを取得できるように修正

179

<!D

OCTYPE h

tml>

<htm

l><

head>

<m

eta

chars

et=

"UTF-8

"><

title>

ImageU

plo

ader<

/title

><

script

src=

"htt

ps:

//sd

k.a

mazonaw

s.co

m/j

s/a

ws-s

dk-2

.1.2

1.m

in.j

s">

</s

cript>

</h

ead>

<body>

<sc

ript>

// C

ognito

var

para

ms

= {

Acco

untI

d:

"63

42

66

xxxxxx",

Role

Arn

: "a

rn:a

ws:i

am

::6

34

26

6xxxxxx:r

ole

/C

ogn

ito_

ImageU

plo

ad

erU

nau

th_

Defa

ult

Role

",Id

entity

PoolId:

"us-e

ast-

1:0

xxxxxx-e

exx-4

6xx-8

8xx-1

2dfc

2xxxxxx"

};

AW

S.c

onfig.r

egio

n=

"us-e

ast-

1";

AW

S.c

onfig.c

redentials

= n

ew

AW

S.C

ognitoId

entity

Cre

dentials

(para

ms);

AW

S.c

onfig.c

redentials

.get(

funct

ion (

err

) {

if (

err

) {

console

.log(e

rr);

} e

lse {

console

.log("

Succe

ssf

ully a

uth

orize

d.

ID:"

+ A

WS.c

onfig.c

redentials

.identity

Id);

}});

// S

3 U

plo

ad

funct

ion u

plo

ad (

) {

console

.log("

Now

uplo

adin

g..."

);var

s3 =

new

AW

S.S

3({

para

ms:{

Bucket:

”xxx-i

mage-u

plo

ader"

}});

var

file

= d

ocu

ment.

getE

lem

entB

yId

("file

ToU

plo

ad")

.files[0

];if (

file

) {

s3.p

utO

bje

ct(

{Key:f

ile.n

am

e,

Conte

ntT

ype:f

ile.t

ype,

Body:f

ile,

AC

L:"

public-r

ead"

},

funct

ion (

err

, data

) {

if (

err

) {

console

.log(e

rr);

} e

lse {

console

.log("

Succe

ssf

ully u

plo

aded."

);}

});

}} //

Dynam

oD

BQ

uery

funct

ion d

ow

nlo

ad (

) {

console

.log("

Now

loadin

g..

.");

var

dynam

odb

= n

ew

AW

S.D

ynam

oD

B({

para

ms:

{Table

Nam

e:

"Im

ageU

plo

ader"

}});

dynam

odb.q

uery

({Att

ribute

sToG

et

: ['

origin

al','th

um

bnail']

,KeyConditio

ns:

{id

: { Att

ribute

Valu

eLis

t: [

{S:

"Im

ageU

plo

ader"

, }],

"Com

pariso

nO

pera

tor"

: "E

Q"

}},

Sca

nIn

dexForw

ard

: fa

lse

},

funct

ion(e

rr,

data

) {

if (

err

) {

console

.log(e

rr);

} e

lse {

var

wra

pper

= d

ocu

ment.

getE

lem

entB

yId

('im

ageLis

t');

wra

pper.

innerH

TM

L=

'';

data

.Ite

ms.m

ap(f

unct

ion(i

tem

) {

var

a =

docu

ment.

create

Ele

ment(

'a')

;a.h

ref

= "

htt

p:/

/" +

ite

m.o

rigin

al.S;

var

img

= d

ocu

ment.

create

Ele

ment(

'im

g')

;im

g.s

rc=

"htt

p:/

/" +

ite

m.t

hum

bnail.S

;a.a

ppendChild(i

mg);

retu

rn a

;}).

forE

ach(f

unct

ion(a

) {

wra

pper.

appendChild(a

);w

rapper.

appendChild(d

ocu

ment.

create

Ele

ment(

'br'))

;});

console

.log("

Succe

ssf

ully loaded."

);}

});

} </s

cript>

<in

put

type=

"file"

nam

e=

"fileToU

plo

ad"

id=

"fileToU

plo

ad">

<in

put

type=

"subm

it"

valu

e=

"uplo

ad"

onclick

="u

plo

ad()

"><

input

type=

"subm

it"

valu

e=

"dow

nlo

ad"

onclick

="d

ow

nlo

ad()

"><

hr>

<div

id=

"im

ageLis

t">

</d

iv>

</b

ody>

</h

tml>

画像アップロード HTML を修正する（index.html）


赤字の部分は自身の文字列に置き換えてください

赤字の部分は自身の文字列に置き換えてください



180

HTML を再アップする




181


1. [xxx-image-uploader-html] をクリック


182





3. [index.html] をクリック



動作確認

184

動作確認

xxx-image-uploader-html.s3-website-us-east-1.amazonaws.com にアクセスして動作確認します。

1. [download] をクリック

2. [サムネイル画像] をクリック

3. [オリジナル画像] が表示される

注意）JavaScriptは最低限しか実装していません。エラー処理などはご自身で実装してください。

お疲れ様でした

AWSで作業した環境の片付けをおねがいします

（そのままにしておくと、課金が発生します）

Internet

AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ