はじめに
がちもとさんアドベントカレンダー 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""})66 }67 except Exception as e:68 return {69 'statusCode': 500,70 'body': json.dumps({'message': str(e)})71 }
2.Lambda関数の設定
3.ロールの設定
4.S3の設定
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の有効化
1App.vue1.env2VUE_APP_API_KEY=xxxx実行結果
お疲れさまでした。