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２
• 画像アップロード用 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/

6
サポートバージョン
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とは
クラウド上で、イベントをトリガーに独自のコードを稼働させる
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 Lambda
Amazon 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

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. ゲスト認証
Cognito
3. Temporary Credential
ゴール：画像アップローダ
7. メタ情報
1. HTML
8. 一覧取得
S3 HTML

27
ゴール：画像アップローダ
画像をアップロードできる
画像一覧を取得できる
実寸で表示
サムネイルで表示

資料/コード中に記載される [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 ファイルからコピペする

35
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
画像アップローダ
7. メタ情報
1. HTML
8. 一覧取得
S3 HTML

36
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML
8. 一覧取得
S3 HTML

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

38
AWS Management Consoleにログインする
AWSのホームページ（http://aws.amazon.com/）から、管理コンソール「
AWS Management Console」にログインします。
1. [アカウント] をクリック
2. [AWS マネジメントコンソール] をクリック

39
作成したAWSアカウント情報を入力してサインインします。
1. メールアドレス入力
3. パスワード入力
4. クリックしてサインイン
2. クリック

40
MFA を設定しているアカウントは Authentication Code を入力します。
• MFAの詳細は以下URLを参照 http://aws.amazon.com/jp/iam/details/mfa/
1. Authentication Code を入
力2. クリックしてサインイン

41
リージョンを変更する
US East（N. Virginia）リージョンに変更します。
2. [US East (N.Virginia)] を選択
1. リージョン選択メニュー
注意
現時点でLambdaは東京リージョン未対応です。
このハンズオンは全て N. Virginia で実施します。

43
S3 HTML
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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] と入力
xxxの部分は

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バケット名を入力します。
xxxの部分は

58
S3 HTML
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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バケット名を入力します。
xxxの部分は
xxxの部分は

Node.js プログラムの作成

71
S3 HTML
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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
async@0.9.0 node_modules/async
gm@1.17.0 node_modules/gm
├── array-parallel@0.1.3
├── array-series@0.1.5
├── through@2.3.6
└── debug@0.7.0
async および gm
モジュールを利用します

73
Node.js プログラムを作成する
メインプログラムを実装します。
vi を編集モード（Insert）へ移行します。
次ページの内容をコピペします。
vi をコマンドモードへ移行します。
vi を保存して終了します。
$ vi ImageUploader.js
i
:wq
ESC

74
//dependencies
varasync=require('async');
varAWS=require('aws-sdk');
vargm=require('gm')
.subClass({imageMagick:true});//EnableImageMagickintegration.
varutil=require('util');
//constants
varMAX_WIDTH=100;
varMAX_HEIGHT=100;
//getreferencetoS3client
vars3=newAWS.S3();
exports.handler=function(event,context){
//Readoptionsfromtheevent.
console.log("Readingoptionsfromevent:n",util.inspect(event,{depth:5}));
varsrcBucket=event.Records[0].s3.bucket.name;
varsrcKey=event.Records[0].s3.object.key;
vardstBucket=srcBucket+"-thumbnail";
vardstKey="thumbnail-"+srcKey;
//Sanitycheck:validatethatsourceanddestinationaredifferentbuckets.
if(srcBucket==dstBucket){
console.error("Destinationbucketmustnotmatchsourcebucket.");
return;
}
//Infertheimagetype.
vartypeMatch=srcKey.match(/.([^.]*)$/);
if(!typeMatch){
console.error('unabletoinferimagetypeforkey'+srcKey);
return;
}
varimageType=typeMatch[1];
if(imageType!="jpg"&&imageType!="png"){
console.log('skippingnon-image'+srcKey);
return;
}
//DownloadtheimagefromS3,transform,anduploadtoadifferentS3bucket.
async.waterfall([
functiondownload(next){
//DownloadtheimagefromS3intoabuffer.
s3.getObject({
Bucket:srcBucket,
Key:srcKey
},
next);
},
functiontranform(response,next){
gm(response.Body).size(function(err,size){
//Inferthescalingfactortoavoidstretchingtheimageunnaturally.
varscalingFactor=Math.min(
MAX_WIDTH/size.width,
MAX_HEIGHT/size.height
);
varwidth=scalingFactor*size.width;
varheight=scalingFactor*size.height;
//Transformtheimagebufferinmemory.
this.resize(width,height)
.toBuffer(imageType,function(err,buffer){
if(err){
next(err);
}else{
next(null,response.ContentType,buffer);
}
});
});
},
functionupload(contentType,data,next){
//StreamthetransformedimagetoadifferentS3bucket.
s3.putObject({
Bucket:dstBucket,
Key:dstKey,
Body:data,
ContentType:contentType
},
next);
}
],function(err){
if(err){
console.error(
'Unabletoresize'+srcBucket+'/'+srcKey+
'anduploadto'+dstBucket+'/'+dstKey+
'duetoanerror:'+err
);
}else{
console.log(
'Successfullyresized'+srcBucket+'/'+srcKey+
'anduploadedto'+dstBucket+'/'+dstKey
);
}
context.done();
}
);
};
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

77
S3 HTML
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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. ゲスト認証
Cognito
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. 画像ファイル名にスペースや記号が入っている場合は正常動作しません。

97
S3 HTML
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML

98
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML
S3 HTML
画像をマネージメントコンソー
ルからアップロードするのでは
なく、HTML(Javascript)から
アップロードできるようにする

Cognito Identity Pool の作成

100
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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] をクリック

106
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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バケット名を入力します。
xxxの部分は

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

114
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML
index.html
S3 HTML 画像をアップロードするための
HTML を作成する
Webホスティングするための
S3バケットも作成する

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

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

117
HTML ホスティング用バケットを作成します。
1. [xxx-image-uploader-html] と入力
xxxの部分は

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バケット名を入力します。
xxxの部分は

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] をクリック
4. [Open] をクリッ
ク

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

128
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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

139
8. 一覧取得
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML
S3 HTML

140
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML
8. 一覧取得
S3 HTML
DynamoDB で
画像ファイルを管理する

142
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML
8. 一覧取得
S3 HTML
DynamoDB の
テーブルを作成する

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] テーブルが作成されたことを確認

152
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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": [
]
},
{
"Effect": "Allow",
"Action": [
"s3:PutObject"
],
"Resource": [
"arn:aws:s3:::xxx-image-uploader-thumbnail/*"
]
},
{
"Effect": "Allow",
"Action": [
"dynamodb:PutItem"
],
"Resource": [
"arn:aws:dynamodb:*:*:table/ImageUploader"
]
}
]
}
xxxの部分は
xxxの部分は
この部分を追記する

Node.js プログラムの修正

159
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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. データが登録されていることを確認

171
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
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"
]
}
]
}
xxxの部分は

178
Lambda
S3 Thumbnail
S3 Origin
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
7. メタ情報
1. HTML
8. 一覧取得
index.html
S3 HTML
HTML(JavaScript)が
DynamoDB から
データを取得できるように修正
HTML(JavaScript)が
DynamoDB から
データを取得できるように修正

179
<!DOCTYPEhtml>
<html><head>
<metacharset="UTF-8"><title>ImageUploader</title>
<scriptsrc="https://sdk.amazonaws.com/js/aws-sdk-2.1.21.min.js"></script>
</head><body>
<script>
//Cognito
varparams={
AccountId:"634266xxxxxx",
RoleArn:"arn:aws:iam::634266xxxxxx:role/Cognito_ImageUploaderUnauth_DefaultRole",
IdentityPoolId:"us-east-1:0xxxxxx-eexx-46xx-88xx-12dfc2xxxxxx"
};
AWS.config.region="us-east-1";
AWS.config.credentials=newAWS.CognitoIdentityCredentials(params);
AWS.config.credentials.get(function(err){
if(err){
console.log(err);
}else{
console.log("Successfullyauthorized.ID:"+AWS.config.credentials.identityId);
}
});
//S3Upload
functionupload(){
console.log("Nowuploading...");
vars3=newAWS.S3({params:{Bucket:”xxx-image-uploader"}});
varfile=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("Successfullyuploaded.");
}
});
}
}
//DynamoDBQuery
functiondownload(){
console.log("Nowloading...");
vardynamodb=newAWS.DynamoDB({params:{TableName:"ImageUploader"}});
dynamodb.query({
AttributesToGet:['original','thumbnail'],
KeyConditions:{
id:{
AttributeValueList:[{S:"ImageUploader",}],
"ComparisonOperator":"EQ"
}
},
ScanIndexForward:false
},function(err,data){
if(err){
console.log(err);
}else{
varwrapper=document.getElementById('imageList');
wrapper.innerHTML='';
data.Items.map(function(item){
vara=document.createElement('a');
a.href="http://"+item.original.S;
varimg=document.createElement('img');
img.src="http://"+item.thumbnail.S;
a.appendChild(img);
returna;
}).forEach(function(a){
wrapper.appendChild(a);
wrapper.appendChild(document.createElement('br'));
});
console.log("Successfullyloaded.");
}
});
}
</script>
<inputtype="file"name="fileToUpload"id="fileToUpload">
<inputtype="submit"value="upload"onclick="upload()">
<inputtype="submit"value="download"onclick="download()">
<hr><divid="imageList"></div>
</body></html>
画像アップロード HTML を修正する（index.html）
赤字の部分は
赤字の部分は

180
HTML を再アップする

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

182
3. [index.html] をクリック
4. [Open] をクリッ
ク

184
動作確認
xxx-image-uploader-html.s3-website-us-east-1.amazonaws.com にアクセ
スして動作確認します。
1. [download] をクリック
2. [サムネイル画
像] をクリック
3. [オリジナル画像] が表示される
注意）
JavaScriptは最低限しか実装していません。
エラー処理などはご自身で実装してください。

お疲れ様でした
AWSで作業した環境の片付けをおねがいします
（そのままにしておくと、課金が発生します）

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

More Related Content

What's hot (20)

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

More from Amazon Web Services Japan (20)

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