スクショを取得し、S3にアップロード、マークダウン形式のリンクを発行するやーつ(Vue3、AWS Lambda Python 3.12)

はじめに

がちもとさんアドベントカレンダー 21日目の記事です。

Qiitaは、毎月100MBまでという画像アップロード制限があります。

ひとりアドベントカレンダー諦めそう @Qiita pic.twitter.com/1bDouadIr3

— がちもとさん (@sotongshi) December 20, 2023

アドベントカレンダーを諦めかけたので、スクショを取得し、S3にアップロード、マークダウン形式のリンクを発行するやつを作りました。

開発環境

  • Windows 11 PC
  • Vue3
  • AWS Lambda(Python 3.12)

導入

1.画像をS3にアップロードするAPI(Lambda関数)を作成

1lambda_function.py2import json3import boto34import base645import uuid6from datetime import datetime7import os89# 環境変数からAPIキーを取得1011api_key = os.environ.get('API_KEY')1213# AWSリソースのセットアップ1415s3 = boto3.client('s3')16 17def lambda_handler(event, context):1819    try:2021# リクエストからAPIキーを取得2223        provided_api_key = event['headers']['x-api-key']24        print(provided_api_key)2526# 提供されたAPIキーが設定されたAPIキーと一致するかを確認2728        if provided_api_key != api_key:29            return {30                'statusCode': 401,31                'body': json.dumps({'message': 'APIキーが無効です。'})32            }33            34# イベントからデータを取得3536        event_body = json.loads(event['body'])  # JSON文字列をPython辞書に変換37        image_data_base64 = event_body.get('imageData')38        bucket_name = 'gachimoto-qiita-storage'39        40# 日付とUUIDを使用してファイル名を生成4142        timestamp = datetime.now().strftime('%Y%m%d-%H%M%S')43        unique_id = str(uuid.uuid4())[:8]  # ランダムな8文字のUUID44        file_name = f'{timestamp}-{unique_id}.png'  # S3に保存するファイル名4546# Base64形式のデータをバイナリにデコード4748        image_data_binary = base64.b64decode(image_data_base64)49 50# S3にバイナリデータを直接アップロード5152        s3.put_object(53            Bucket=bucket_name,54            Key=file_name,55            Body=image_data_binary,56            ContentType='image/png'  # ContentTypeを指定57        )5859# アップロードされた画像のURLを生成6061        image_url = f'https://{bucket_name}.s3.amazonaws.com/{file_name}'6263        return {64            'statusCode': 200,65            'body': json.dumps({'message': f"![{file_name}]({image_url})"})66        }67    except Exception as e:68        return {69            'statusCode': 500,70            'body': json.dumps({'message': str(e)})71        }
20231221-165416-fa8f067d.png
20231221-165556-9750a165.png

2.Lambda関数の設定

20231221-165642-6f36fdac.png
3.ロールの設定

3.ロールの設定

20231221-165458-bd136835.png
4.S3の設定

4.S3の設定

20231221-165808-9bcdbadd.png
バケットポリシー
1{2    "Version": "2012-10-17",3    "Statement": [4        {5            "Sid": "PublicReadGetObject",6            "Effect": "Allow",7            "Principal": "*",8            "Action": "s3:GetObject",9            "Resource": "arn:aws:s3:::gachimoto-qiita-storage/*"10        }11    ]12}

ACLの有効化

20231221-170003-a8aa3df0.png
5.Vue3のアプリ作成
1App.vue
1.env2VUE_APP_API_KEY=xxxx

実行結果

20231221-162115-06354714.png

お疲れさまでした。

この記事を書いた人

aws-recipe-user