More Related Content
Similar to AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ (20)
More from Amazon Web Services Japan (20)
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
- 2. 自己紹介
清水 崇之
• ソリューション アーキテクト(WEST 担当)
• 大阪のお客様にもプライム対応で参上します
• Web サービス全般、モバイル、ゲーム など
• AWS 芸人 (詳しくは slideshare)
- 3. アジェンダ
AWS Lambdaとは?
目的とゴール
• 2-Tier アーキテクチャ
• 画像アップロードの概要
ハンズオンの注意点
Part1
• MCにログイン
• S3バケットの作成
• Lambda Exec Role の作成
• Node.js プログラムの作成
• Lambda Function の作成
• 動作確認
Part2
• 画像アップロード用 HTML を S3 でホス
ティング
• 画像アップロード用バケットの CORS 対応
• 動作確認
Part3
• DynamoDB の作成
• Lambda Exec Role の修正
• Node.js プログラムの修正
• Cognito Unauth Role の修正
• HTML の修正
• 動作確認
- 8. 8
Node.js インストール (Max OS X)
Node.js が正しくインストールされたか確認します。
• 以下のコマンドを実行して Node.js のバージョンを確認します。
$ node --version
- 9. アジェンダ
AWS Lambdaとは?
目的とゴール
• 2-Tier アーキテクチャ
• 画像アップロードの概要
ハンズオンの注意点
Part1
• MCにログイン
• S3バケットの作成
• Lambda Exec Role の作成
• Node.js プログラムの作成
• Lambda Function の作成
• 動作確認
Part2
• 画像アップロード用 HTML を S3 でホス
ティング
• 画像アップロード用バケットの CORS 対応
• 動作確認
Part3
• DynamoDB の作成
• Lambda Exec Role の修正
• Node.js プログラムの修正
• Cognito Unauth Role の修正
• HTML の修正
• 動作確認
- 15. Bring your own code
Node.jsで書かれたコードを実行
コード内では以下も可能
• スレッド/プロセスの生成
• バッチスクリプトや何らかの実行ファ
イルの実行
• /tmpのread/write
各種ライブラリも利用可能
• ネイティブライブラリも可能
• 利用するライブラリを一緒にアップ
ロード
- 23. アジェンダ
AWS Lambdaとは?
目的とゴール
• 2-Tier アーキテクチャ
• 画像アップロードの概要
ハンズオンの注意点
Part1
• MCにログイン
• S3バケットの作成
• Lambda Exec Role の作成
• Node.js プログラムの作成
• Lambda Function の作成
• 動作確認
Part2
• 画像アップロード用 HTML を S3 でホス
ティング
• 画像アップロード用バケットの CORS 対応
• 動作確認
Part3
• DynamoDB の作成
• Lambda Exec Role の修正
• Node.js プログラムの修正
• Cognito Unauth Role の修正
• HTML の修正
• 動作確認
- 28. アジェンダ
AWS Lambdaとは?
目的とゴール
• 2-Tier アーキテクチャ
• 画像アップロードの概要
ハンズオンの注意点
Part1
• MCにログイン
• S3バケットの作成
• Lambda Exec Role の作成
• Node.js プログラムの作成
• Lambda Function の作成
• 動作確認
Part2
• 画像アップロード用 HTML を S3 でホス
ティング
• 画像アップロード用バケットの CORS 対応
• 動作確認
Part3
• DynamoDB の作成
• Lambda Exec Role の修正
• Node.js プログラムの修正
• Cognito Unauth Role の修正
• HTML の修正
• 動作確認
- 30. ハンズオンの注意点
以下の 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
・・・
- 31. ハンズオンの注意点
資料/コード中に記載される [xxx] という部分はすべて自身で独自に決めた文字列に置き換
えてください
1. [xxx-image-uploader] と入力
・・・
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::xxx-image-uploader/*"
]
}
・・・
・・・
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::takayuki-image-uploader/*"
]
}
・・・
例)タカユキさんの場合
xxx = takayuki
takayuki-image-uploader
資料/コード中 の記載 実際に入力する値
- 33. アジェンダ
AWS Lambdaとは?
目的とゴール
• 2-Tier アーキテクチャ
• 画像アップロードの概要
ハンズオンの注意点
Part1
• MCにログイン
• S3バケットの作成
• Lambda Exec Role の作成
• Node.js プログラムの作成
• Lambda Function の作成
• 動作確認
Part2
• 画像アップロード用 HTML を S3 でホス
ティング
• 画像アップロード用バケットの CORS 対応
• 動作確認
Part3
• DynamoDB の作成
• Lambda Exec Role の修正
• Node.js プログラムの修正
• Cognito Unauth Role の修正
• HTML の修正
• 動作確認
- 40. 40
AWS Management Consoleにログインする
MFA を設定しているアカウントは Authentication Code を入力します。
• MFAの詳細は以下URLを参照 http://aws.amazon.com/jp/iam/details/mfa/
1. Authentication Code を入
力2. クリックしてサインイン
- 43. 43
S3 HTML
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
7. メタ情報
1. HTML
画像アップローダ
S3バケットを作成し設定します
- 53. 53
サムネイル画像用バケットをウェブホスティングする
Static Web Hosting 機能を Enable にします。
1. [xxx-image-uploader-thumbnail] を選
択
2. [Properties] をクリック
3. [Static Website Hosting] をクリック
3. [Enable website hosting] を選択
4. [index.html] と入力
5. [Save] をクリック
- 58. 58
S3 HTML
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
7. メタ情報
1. HTML
画像アップローダ
s3:GetObject
s3:PutObject
logs:*
Invoke Role Exec Role
Lambda が S3 の Put Get
および ログ出力するための権限を与える
- 65. 65
Exec Role の Policy を修正する
作成した Exec Role を選択します。
1. [image_uploader_exec_role] をクリック
- 66. 66
Exec Role の Policy を修正する
Inline Policy を作成します。
1. [∨] をクリック
2. [click here] をクリック
- 67. 67
Exec Role の Policy を修正する
Custom Policy を選択します。
1. [Custom Policy] を選択
2. [Select] をクリック
- 68. 68
Exec Role の Policy を修正する
内容を入力します。
1. [image_uploader_exec_policy] と入力
2. [次ページの内容] を入力
3. [Apply Policy] をクリック
- 69. 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の部分は
自身の文字列に置き換えてください
コードスニペット: [Asset] > [Part1.txt] > [Section3]
- 71. 71
S3 HTML
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
7. メタ情報
1. HTML
画像アップローダ
Node.js
プログラム
Lambda にデプロイする
プログラムを作成します
- 72. 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
モジュールを利用します
- 74. 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();
}
);
};
コードスニペット: [Asset] > [Part1.txt] > [Section4]
ImageUploader.js の内容
- 75. 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. 77
S3 HTML
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
7. メタ情報
1. HTML
画像アップローダ
Lambda Function を作成して
プログラムを設置します
- 86. 86
S3 HTML
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
7. メタ情報
1. HTML
画像アップローダ
ここまでの作業で
枠内を作成した
- 94. 94
ログが出力されていることを確認する
ログが出力されていることを確認します。
1. [logs] をクリック
2. ログを確認
正常に動作しないときはログを確認してください。
1. LambdaFunctionが実行されてからログが出力されるまで数十秒くらいかか
りますので、あせらずにデバッグしてくさい。
2. (Invoke Role, Exec Role) において xxx の部分を間違って設定している可
能性があります。
3. ImageUploader.js の作成や、zip の圧縮に失敗している可能性があります。
4. 画像ファイル名にスペースや記号が入っている場合は正常動作しません。
- 95. アジェンダ
AWS Lambdaとは?
目的とゴール
• 2-Tier アーキテクチャ
• 画像アップロードの概要
ハンズオンの注意点
Part1
• MCにログイン
• S3バケットの作成
• Lambda Exec Role の作成
• Node.js プログラムの作成
• Lambda Function の作成
• 動作確認
Part2
• 画像アップロード用 HTML を S3 でホス
ティング
• 画像アップロード用バケットの CORS 対応
• 動作確認
Part3
• DynamoDB の作成
• Lambda Exec Role の修正
• Node.js プログラムの修正
• Cognito Unauth Role の修正
• HTML の修正
• 動作確認
- 97. 97
S3 HTML
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
7. メタ情報
1. HTML
画像アップローダ
- 98. 98
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
S3 HTML
画像をマネージメントコンソー
ルからアップロードするのでは
なく、HTML(Javascript)から
アップロードできるようにする
- 100. 100
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
S3 HTML
直接HTML(JavaScript)からS3に
画像をアップロードできるように
Cognito で identity (テンポラリク
レデンシャル) を発行する
- 104. 104
Identity Pool を作成する
1. [Decide later] を選択
2. [Create a new IAM role] を選択
3. [Cognito_ImageUploaderUnauth_DefaultRole] と入力 4. [Update roles] をクリック
- 106. 106
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
s3:PutObject
Unauth_Role
S3 HTML
HTML(JavaScript)からS3に
画像をアップロードできる権限を
与える
- 114. 114
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
index.html
S3 HTML 画像をアップロードするための
HTML を作成する
Webホスティングするための
S3バケットも作成する
- 117. 117
画像アップロード HTML 用 バケットを作成する
HTML ホスティング用バケットを作成します。
1. [xxx-image-uploader-html] と入力
2. [US Standard] を選択
3. [Create] をクリック
xxxの部分は
自身の文字列に置き換えてください
- 118. 118
オリジナル画像用バケットを作成します。
画像アップロード HTML 用 バケットを作成する
1. [xxx-image-uploader-html] を選択
2. [Properties] を選択
4. [Enable website hosting] を選択
5. [index.html] と入力
3. [Static Website Hosting] を選択
6. [Save] をクリック
- 123. 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
コードスニペット: [Asset] > [Part2.txt] > [Section3]
自身の AccountId を入力
- 128. 128
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
S3 HTML
1. HTML
CORS の対応が必要
- 132. 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>
コードスニペット: [Asset] > [Part2.txt] > [Section4]
- 137. アジェンダ
AWS Lambdaとは?
目的とゴール
• 2-Tier アーキテクチャ
• 画像アップロードの概要
ハンズオンの注意点
Part1
• MCにログイン
• S3バケットの作成
• Lambda Exec Role の作成
• Node.js プログラムの作成
• Lambda Function の作成
• 動作確認
Part2
• 画像アップロード用 HTML を S3 でホス
ティング
• 画像アップロード用バケットの CORS 対応
• 動作確認
Part3
• DynamoDB の作成
• Lambda Exec Role の修正
• Node.js プログラムの修正
• Cognito Unauth Role の修正
• HTML の修正
• 動作確認
- 139. 139
8. 一覧取得
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
S3 HTML
- 140. 140
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
8. 一覧取得
S3 HTML
DynamoDB で
画像ファイルを管理する
- 142. 142
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
8. 一覧取得
S3 HTML
DynamoDB の
テーブルを作成する
- 145. 145
テーブルを作成する
“Hash and Range” Primary Key Type でテーブルを作成します。
7. [Continue] をクリック
1. [ImageUploader] と入力
2. [Hash and Range] を選択
3. [String] を選択
4. [id] と入力
5. [Number] を選択
6. [timestamp] と入力
- 152. 152
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
7. メタ情報
1. HTML
画像アップローダ
s3:GetObject
s3:PutObject
logs:*
Exec Role
dynamodb:PutItem
8. 一覧取得
S3 HTML
Lambda が DynamoDB に
PutItem する権限を与える
- 157. 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"
]
}
]
}
xxxの部分は
自身の文字列に置き換えてください
xxxの部分は
自身の文字列に置き換えてください
この部分を追記する
コードスニペット: [Asset] > [Part3.txt] > [Section1]
- 159. 159
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
Node.js
プログラム
8. 一覧取得
S3 HTML
DynamoDB にデータ登録するよ
うに プログラムを修正する
- 160. 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
・・・・・・・
この部分を追記する
コードスニペット: [Asset] > [Part3.txt] > [Section2]
- 171. 171
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
8. 一覧取得
s3:PutObject
Unauth_Role
Dynamodb:Query
S3 HTML
HTML(JavaScript)が
DynamoDB から
データを取得する権限を与える
- 176. 176
image_uploader_html_policy の内容
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": [
"arn:aws:s3:::xxx-image-uploader/*"
]
},
{
"Effect": "Allow",
"Action": [
"dynamodb:Query"
],
"Resource": [
"arn:aws:dynamodb:*:*:table/ImageUploader"
]
}
]
}
この部分を追記する
xxxの部分は
自身の文字列に置き換えてください
コードスニペット: [Asset] > [Part3.txt] > [Section3]
- 178. 178
Lambda
4. 画像アップロード
S3 Thumbnail
S3 Origin
6. 画像リサイズ
5. ファンクション実行
CloudWatch
ログ
DynamoDB
2. ゲスト認証
Cognito
3. Temporary Credential
画像アップローダ
7. メタ情報
1. HTML
8. 一覧取得
index.html
S3 HTML
HTML(JavaScript)が
DynamoDB から
データを取得できるように修正
HTML(JavaScript)が
DynamoDB から
データを取得できるように修正
- 179. 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)
この部分を追記する
赤字の部分は
自身の文字列に置き換えてください
赤字の部分は
自身の文字列に置き換えてください
この部分を追記する
コードスニペット: [Asset] > [Part3.txt] > [Section4]