DEV Community

nao
nao

Posted on • Edited on

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/*"
            ]
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode 
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::WebBucketName/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Webホスティングの設定

CORS設定

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]
Enter fullscreen mode Exit fullscreen mode

イベント通知の設定

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
Enter fullscreen mode Exit fullscreen mode

画像圧縮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/*"
            ]
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode 
###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>
Enter fullscreen mode Exit fullscreen mode 
###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));
        },
    });
}
Enter fullscreen mode Exit fullscreen mode 
#####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>
Enter fullscreen mode Exit fullscreen mode 
######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();
            }
        );
    });
}
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description
Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Top comments (0)