nao

Posted on Nov 13, 2023 • Updated on Nov 19, 2023

test post

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();
            }
        );
    });
}

DEV Community

test post

Top comments (0)

Read next

AgentQL Launch Week starts next week—Here's what's coming!

The effective Pull Request checklist

string

Bind variables in Oracle SQL