lambda IAM role
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "logs:CreateLogGroup",
"Resource": "arn:aws:logs:ap-northeast-1:468249393587:*"
},
{
"Effect": "Allow",
"Action": [
"logs:CreateLogStream",
"logs:PutLogEvents"
],
"Resource": [
"arn:aws:logs:ap-northeast-1:ID:log-group:/aws/lambda/CompLambdaName:*"
]
},
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::UploadBucket",
"arn:aws:s3:::UoloadBucket/*",
"arn:aws:s3:::CompressedBucket",
"arn:aws:s3:::CompressedBucket/*"
]
}
]
}
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::WebBucketName/*"
}
]
}
Webホスティングの設定
CORS設定
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"HEAD",
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"ETag"
]
}
]
イベント通知の設定
from PIL import Image
import urllib.parse
import boto3
import os
TARGET_BUCKET_PATH = os.environ['TARGET_BUCKET_PATH']
QUALITY_IMAGE = int(os.environ['QUALITY_IMAGE'])
s3 = boto3.client('s3')
def lambda_handler(event, context):
bucket = event['Records'][0]['s3']['bucket']['name']
source_key = urllib.parse.unquote_plus(event['Records'][0]['s3']['object']['key'], encoding='utf-8')
destination_key = 'compressed' + source_key
source_file = u'/tmp/' + os.path.basename(source_key)
destination_file = source_file
file_paths = os.path.splitext(source_key)
file_path = file_paths[0]
file_extension = file_paths[1][1:].lower()
try:
s3.download_file(Bucket=bucket, Key=source_key, Filename=source_file)
img = Image.open(source_file, 'r')
img.save(destination_file, file_extension, quality = QUALITY_IMAGE)
s3.upload_file(Filename=destination_file,
Bucket=TARGET_BUCKET_PATH,
Key=destination_key)
return source_key
except Exception as e:
print(e)
raise e
画像圧縮lambda
環境変数
インポートにはlambdaレイヤーを利用した
テストフォルダーが見えている
実際に保存されている画像
Cognito authenticated User
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Statement1",
"Effect": "Allow",
"Action": [
"s3:ListBucket",
"s3:GetObject",
"s3:AbortMultipartUpload",
"s3:DeleteObject",
"s3:PutObject"
],
"Resource": [
"arn:aws:s3:::CompressBucketName",
"arn:aws:s3:::CompressBucketName/*",
"arn:aws:s3:::UploadBucketName",
"arn:aws:s3:::UploadBucketName/*"
]
}
]
}
###signin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</meta>
<title>CognitoAuthenticateUser</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1489.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/amazon-cognito-identity-js@4.3.3/dist/amazon-cognito-identity.min.js"></script>
<script src="signin.js"></script>
</head>
<body>
<h1>CognitoAuthenticateUser</h1>
<span style="display: inline-block; width: 100px;">Email</span>
<input type="text" id="email" placeholder="Email Address">
<br />
<span style="display: inline-block; width: 100px;">Password</span>
<input type="password" id="password" placeholder="Password">
<br /><br />
<input type="button" value="CognitoAuthenticateUser" onclick="OnCognitoAuthenticateUser();">
</body>
</html>
###signin.js
function OnCognitoAuthenticateUser() {
var username = document.getElementById("email").value;
var password = document.getElementById("password").value;
var authenticationData = {
Username: username,
Password: password,
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
authenticationData
);
var poolData = {
UserPoolId: 'ap-northeast-1_xxxxxx', // Your user pool id here
ClientId: '5g6xxxxxxxxxxxxxxxxxxxxx', // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username: username,
Pool: userPool,
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
var idToken = result.getIdToken().getJwtToken(); // IDトークン
var accessToken = result.getAccessToken().getJwtToken(); // アクセストークン
var refreshToken = result.getRefreshToken().getToken(); // 更新トークン
console.log("idToken : " + idToken);
console.log("accessToken : " + accessToken);
console.log("refreshToken : " + refreshToken);
//POTENTIAL: Region needs to be set if not already set previously elsewhere.
AWS.config.region = 'ap-northeast-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'ap-northeast-1:xxxxxxxxxxxxxxxxxxxxxxxxx', // your identity pool id here
Logins: {
// Change the key below according to the specific region your user pool is in.
'cognito-idp:ap-northeast-1:accountID:userpool/ap-northeast-1_xxxxxxxx': result
.getIdToken()
.getJwtToken(),
},
});
//refreshes credentials using AWS.CognitoIdentity.getCredentialsForIdentity()
AWS.config.credentials.refresh(error => {
if (error) {
console.error(error);
} else {
// Instantiate aws sdk service objects now that the credentials have been updated.
// example: var s3 = new AWS.S3();
console.log('Successfully logged!');
}
});
location.href = "ImageCompService.html";
},
onFailure: function (err) {
alert(err.message || JSON.stringify(err));
},
});
}
#####ImageCompService.html
<!DOCTYPE html>
<html>
<head>
<!-- **DO THIS**: -->
<link href="favicon.ico" rel="icon">
<!-- Replace SDK_VERSION_NUMBER with the current SDK version number -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1489.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/amazon-cognito-identity-js@4.3.3/dist/amazon-cognito-identity.min.js"></script>
<script src="ImageCompService.js"></script>
<script>
function getHtml(template) {
return template.join('\n');
}
listAlbums();
</script>
</head>
<body>
<h1>This is your image compression service!</h1>
<div id="app"></div>
</body>
</html>
######ImageCompService.js
var originalBucketName = "UploadBucketName";
var compBucketName = "CompressBucketName";
var bucketRegion = "ap-northeast-1";
var REGION = "ap-northeast-1";
var IDENTITY_POOL_ID = "ap-northeast-1:xxxxxxxxxxxxx";
var APP_CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxx'
var USER_POOL_ID = 'ap-northeast-1_xxxxxxxxxx'
var poolData = {
UserPoolId: USER_POOL_ID,
ClientId: APP_CLIENT_ID
}
userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
AWS.config.region = REGION;
const LOGINS_KEY = `cognito-idp.${REGION}.amazonaws.com/${USER_POOL_ID}`
var cognitoUser = new AmazonCognitoIdentity.CognitoUserPool(poolData).getCurrentUser();
if (!cognitoUser) {
document.location.href = 'signin.html'
}
cognitoUser.getSession(function (err, result) {
if (err) {
console.error(err);
return
}
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: IDENTITY_POOL_ID,
Logins: {
[LOGINS_KEY]: result.getIdToken().getJwtToken()
},
})
AWS.config.credentials.refresh(function (err) {
if (err) {
console.error(err)
return
}
console.log('Refreshing AWS credentials is succeed')
listAlbums()
})
})
var s3 = new AWS.S3({
apiVersion: "2006-03-01",
params: { Bucket: originalBucketName },
});
var s3comp = new AWS.S3({
apiVersion: "2006-03-01",
params: { Bucket: compBucketName },
});
function listAlbums() {
var albums = [];
var albumscomp = [];
// S3バケットからアルバムのリストを取得
s3.listObjects({ Delimiter: "/" }, function (err, data) {
if (err) {
return alert("Error listing folders in 'UploadBucketName' bucket: " + err.message);
} else {
albums = data.CommonPrefixes.map(function (commonPrefix) {
var prefix = commonPrefix.Prefix;
var albumName = decodeURIComponent(prefix.replace("/", ""));
return getHtml([
"<li>",
"<span onclick=\"deleteAlbum('" + albumName + "', 'UploadBucket')\">X</span>",
"<span onclick=\"viewAlbum('" + albumName + "', 'UploadBucket')\">",
albumName,
"</span>",
"</li>"
]);
});
updatePage();
}
});
// S3compバケットからアルバムのリストを取得
s3comp.listObjects({ Delimiter: "/" }, function (err, data) {
if (err) {
return alert("Error listing albums in 'CompressBucket' bucket: " + err.message);
} else {
albumscomp = data.CommonPrefixes.map(function (commonPrefix) {
var prefix = commonPrefix.Prefix;
var albumName = decodeURIComponent(prefix.replace("/", ""));
return getHtml([
"<li>",
"<span onclick=\"viewAlbumcomp('" + albumName + "', 'CompressBucketName')\">",
albumName,
"</span>",
"</li>"
]);
});
updatePage();
}
});
function updatePage() {
// 両方のバケットから取得したアルバムリストを結合して表示
var allAlbums = albums.concat(albumscomp);
var message = albums.length
? getHtml([
"<p>Click on an folder name to view it.</p>",
"<p>Click on the X to delete the folder.</p>"
])
: "<p>You do not have any folders. Please create an folder.";
var messagecomp = albumscomp.length
? getHtml([
"<p>Click on an folder name to view it.</p>"
])
: "<p>You do not have any folders. Please create an folder.";
var htmlTemplate = [
"<h2>Compressed Folders</h2>",
messagecomp,
"<ul>",
getHtml(albumscomp),
"</ul>",
"<h2>Original Folders</h2>",
message,
"<ul>",
getHtml(albums),
"</ul>",
"<button onclick=\"createAlbum(prompt('Enter Folder Name:'))\">",
"Create New Folder",
"</button>"
];
document.getElementById("app").innerHTML = getHtml(htmlTemplate);
}
}
function createAlbum(albumName) {
albumName = albumName.trim();
if (!albumName) {
return alert("Folder names must contain at least one non-space character.");
}
if (albumName.indexOf("/") !== -1) {
return alert("Folder names cannot contain slashes.");
}
var albumKey = encodeURIComponent(albumName);
s3.headObject({ Key: albumKey }, function (err, data) {
if (!err) {
return alert("Folder already exists.");
}
if (err.code !== "NotFound") {
return alert("There was an error creating your folder: " + err.message);
}
s3.putObject({ Key: albumKey }, function (err, data) {
if (err) {
return alert("There was an error creating your folder: " + err.message);
}
alert("Successfully created folder.");
viewAlbum(albumName);
});
});
}
function viewAlbumcomp(albumName) {
var albumPhotosKey = encodeURIComponent(albumName) + "/";
s3comp.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
if (err) {
return alert("There was an error viewing your folder: " + err.message);
}
// 'this' references the AWS.Response instance that represents the response
var href = this.request.httpRequest.endpoint.href;
var bucketUrl = href + originalBucketName + "/";
var photos = data.Contents.map(function (photo) {
var photoKey = photo.Key;
var photoUrl = bucketUrl + encodeURIComponent(photoKey);
return getHtml([
"<span>",
"<div>",
"<span onclick=\"downloadphoto('" +
albumName +
"','" +
photoKey +
"')\">",
"download",
"</span>",
"<span>",
photoKey.replace(albumPhotosKey, ""),
"</span>",
"</div>",
"</span>"
]);
});
var message = photos.length
? "<p>Click on the download to download the image</p>"
: "<p>You do not have any images in this album. Please add images.</p>";
var htmlTemplate = [
"<h2>",
"Album: " + albumName,
"</h2>",
message,
"<div>",
getHtml(photos),
"</div>",
'<button onclick="listAlbums()">',
"Back To Folders",
"</button>"
];
document.getElementById("app").innerHTML = getHtml(htmlTemplate);
});
}
function viewAlbum(albumName) {
var albumPhotosKey = encodeURIComponent(albumName) + "/";
s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
if (err) {
return alert("There was an error viewing your folder: " + err.message);
}
// 'this' references the AWS.Response instance that represents the response
var href = this.request.httpRequest.endpoint.href;
var bucketUrl = href + originalBucketName + "/";
var photos = data.Contents.map(function (photo) {
var photoKey = photo.Key;
var photoUrl = bucketUrl + encodeURIComponent(photoKey);
return getHtml([
"<span>",
"<div>",
"<span onclick=\"deletePhoto('" +
albumName +
"','" +
photoKey +
"')\">",
"X",
"</span>",
"<span>",
photoKey.replace(albumPhotosKey, ""),
"</span>",
"</div>",
"</span>"
]);
});
var message = photos.length
? "<p>Click on the X to delete the image</p>"
: "<p>You do not have any images in this folder. Please add images.</p>";
var htmlTemplate = [
"<h2>",
"Album: " + albumName,
"</h2>",
message,
"<div>",
getHtml(photos),
"</div>",
'<input id="photoupload" type="file" accept="image/*">',
'<button id="addphoto" onclick="addPhoto(\'' + albumName + "')\">",
"Add Image",
"</button>",
'<button onclick="listAlbums()">',
"Back To Folders",
"</button>"
];
document.getElementById("app").innerHTML = getHtml(htmlTemplate);
});
}
function downloadphoto(albumname, photoKey) {
var ObjectParams = {
Bucket: compBucketName,
Key: photoKey,
Expires: 3600,
};
var preurl = s3.getSignedUrl('getObject', ObjectParams);
var downloadLink = document.createElement('a');
downloadLink.href = preurl;
console.log(preurl);
downloadLink.download = photoKey;
downloadLink.click()
}
function addPhoto(albumName) {
var files = document.getElementById("photoupload").files;
if (!files.length) {
return alert("Please choose a file to upload first.");
}
var file = files[0];
var fileName = file.name;
var albumPhotosKey = encodeURIComponent(albumName) + "/";
var photoKey = albumPhotosKey + fileName;
// Use S3 ManagedUpload class as it supports multipart uploads
var upload = new AWS.S3.ManagedUpload({
params: {
Bucket: originalBucketName,
Key: photoKey,
Body: file
}
});
var promise = upload.promise();
promise.then(
function (data) {
alert("Successfully uploaded image.");
viewAlbum(albumName);
},
function (err) {
return alert("There was an error uploading your image: ", err.message);
}
);
}
function deletePhoto(albumName, photoKey) {
s3.deleteObject({ Key: photoKey }, function (err, data) {
if (err) {
return alert("There was an error deleting your image: ", err.message);
}
alert("Successfully deleted image.");
viewAlbum(albumName);
});
}
function deleteAlbum(albumName) {
var albumKey = encodeURIComponent(albumName) + "/";
s3.listObjects({ Prefix: albumKey }, function (err, data) {
if (err) {
return alert("There was an error deleting your folder: ", err.message);
}
var objects = data.Contents.map(function (object) {
return { Key: object.Key };
});
s3.deleteObjects(
{
Delete: { Objects: objects, Quiet: true }
},
function (err, data) {
if (err) {
return alert("There was an error deleting your folder: ", err.message);
}
alert("Successfully deleted folder.");
listAlbums();
}
);
});
}
Top comments (0)