[Python3 x React.js] S3にアップロードしたjsonファイルをリアルタイムで読み込む

pythonでS3にアップロードします
 L S3 full accessのcredentialは別ファイルからimportにします。

import boto3
import json
import credentials

str = {
	"speech":"最高"
}

with open("sample.json", "w") as f:
	json.dump(str, f, ensure_ascii=False)

s3 = boto3.client('s3', aws_access_key_id=credentials.Accesskey, aws_secret_access_key= credentials.Secretkey, region_name=credentials.Region)
 
filename = "sample.json"
bucket_name = "hogehoge"
 
s3.upload_file(filename,bucket_name,filename, ExtraArgs={'ContentType': "application/json",'ACL':'public-read'})
print("upload {0}".format(filename))

React.jsでJsonをsetIntervalで読み込みます

function App(){
			const [data, setData] = React.useState([]);

			React.useEffect(() => {
				const fetchData = async() => {
				fetch("https://hoge.s3.ap-northeast-1.amazonaws.com/sample.json")
					.then((res) => res.json())
					.then((data) =>{
						setData(data);
				});
				}

				const id = setInterval(() => {
				    fetchData();
				 }, 2000);
				
			}, []);

			console.log(data);

			return(
				<h1>コメント:{data.speech}</h1>
			);
		}

		const target = document.getElementById('app');
		ReactDOM.render(<App />, target);

pythonでuploadしたワードがブラウザの更新なくHTML側に表示されます。
OK、後はUIを作っていく

[Python3] jsonを生成してS3にuploadする

strのところは、mufj, 1375で作ってますが、本来はpython3で処理した値をuploadする想定です。

import boto3
import json

accesskey = ""
secretkey = ""
region = ""

// 機械学習等の処理

str = {
	"三菱UFJフィナンシャル・グループ":668.3,
	"日経ダブルインバース上場投信":367
}

with open("stock.json", "w") as f:
	json.dump(str, f, ensure_ascii=False)

 
s3 = boto3.client('s3', aws_access_key_id=accesskey, aws_secret_access_key= secretkey, region_name=region)
 
filename = "stock.json"
bucket_name = "speech-dnn"
 
s3.upload_file(filename,bucket_name,filename, ExtraArgs={'ACL':'public-read'})
print("upload {0}".format(filename))

result
{“三菱UFJフィナンシャル・グループ”: 668.3, “日経ダブルインバース上場投信”: 367}

OK これをreactと接続して、インタラクティブに表示されるか確認する

### 修正
‘ContentType’: “application/json”で指定しないと、jsonファイルとして保存されない

s3.upload_file(filename,bucket_name,filename, ExtraArgs={'ContentType': "application/json",'ACL':'public-read'})

[Python3] botoでS3にpublicでuploadする方法

s3.upload_file で、 ExtraArgs={‘ACL’:’public-read’}を追加する

s3 = boto3.client('s3', aws_access_key_id=accesskey, aws_secret_access_key= secretkey, region_name=region)
 
filename = "a.json"
bucket_name = "hoge"
 
s3.upload_file(filename,bucket_name,filename, ExtraArgs={'ACL':'public-read'})
print("upload {0}".format(filename))

※追加しないとaccess denyとなるので注意が必要

[AWS S3Client] ListObjectsで1000件以上取得する書き方

Aws\S3\S3Clientで画像を取得する際に、1000件を超えると、1000件までしか取得できない。

-> ListAllObjectsを使おうとするとエラーになる。
-> $s3client->getPaginatorを使用する。

$s3client = new Aws\S3\S3Client([
    'credentials' => [
        'key' => $key,
        'secret' => $secret,
    ],
    'region' => 'ap-northeast-1',
    'version' => 'latest',
]);

$results = $s3client->getPaginator('ListObjects',[
    'Bucket' => $bucket,
    'Prefix' => $prefix,
    'Delimiter' => "/"
]);


$list = array();

foreach ($results as $result) {
    foreach($result["Contents"] as $object) {
        if(substr($object['Key'],-1,1) != "/"){
            array_push($list, substr($object['Key'], 4));
        }
    }
}
echo count($list);

$ php app.php
1069

参考ページ: https://docs.aws.amazon.com/ja_jp/sdk-for-php/v3/developer-guide/guide_paginators.html

焦るがなー 画像ファイル側に何かあったのかと思って冷や汗かいたわ。

[AWS S3] 静的ファイルをホスティングする

S3に静的ファイルをホスティングできるらしい。
S3でホームページやサービスを運営してるってあまり聞かないような印象だが試しにやってみたい。

### bucketの作成
適当にバケットを作成します。
– static-s3-test

バケットにtest.htmlを配置し、make publicとします。

アクセスできるようになりました。

ルーティングはわからんが。。
一通りできると安心するね。

[AWS S3] バケットに保存している複数画像を丸ごと一気にダウンロードする方法

コンソールログインだと、S3のバケットに保存している画像は1枚ずつしかダウンロードできません。
そんな馬鹿な。。。

1枚ずつ処理とか、プログラマーは絶対にやりません。そこを妥協するようであれば、プログラミング辞めるわ。
と言うことで、Cyberduckを使えば一括ダウンロードできるみたいなので、CyberDuckを使いたいと思います。

cyberduckで接続にsftpではなくAmazon S3を選ぶと、アクセスキーとシークレットキーを入れれば、バケットにアクセスできるようになります。

素晴らしい! 早く言ってよ。

[AWS AIM & S3] Get Onlyのポリシー&ユーザを作成する

特定のBucketで全ての操作ができるポリシーを作っています。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "s3:*",
      "Resource": [
          "arn:aws:s3:::${BucketName}",
          "arn:aws:s3:::${BucketName}/*"
      ]
    }
  ]
}

上記とは別に、get onlyのポリシー&ユーザを作りたい。こうかな。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:Get*",
        "s3:List*"
     ],
      "Resource": [
          "arn:aws:s3:::${BucketName}",
          "arn:aws:s3:::${BucketName}/*"
      ]
    }
  ]
}

うん、これで、指定したbucketのget(bucketの表示、ダウンロード)のみができるようになります。
OK, Let’s Go

[Laravel8.16.0] S3へのアップロード・取得

// まずシンボリックリンクを貼ります
$ php artisan storage:link

// 続いてflysystem install
$ composer require league/flysystem-aws-s3-v3 ~1.0
$ composer require league/flysystem-cached-adapter ~1.0

.envの設定

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=ap-northeast-1
AWS_BUCKET=

config/filesystem.php

'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

controller test
-> 取得できているか確認。filesystemでstorage_path(‘app’)となっているので、storage/app/にテストファイルを置く

public function file(){
        $file = Storage::get('test.jpg');
        dd($file);
    }

putFileAs

public function file(){
        $file1 = storage_path('app/test.jpg');
        $filename = 'hoge.jpg';
        Storage::disk('s3')->putFileAs('/', $file1, $filename, 'public');
        echo "done";
    }

ファイルパスの取得

public function file(){
        $path = Storage::disk('s3')->url('test.jpg');
        echo $path;
    }

あ、思い出した。

[AWS S3] バケットの画像パス一覧を取得する

S3に画像が置いてあり、view側では画像のファイル名のみわかっており、拡張子が不明だった場合に、view側からS3に画像があるか判定して、画像があれば拡張子を取得して表示する、という仕組みを作りたかった。

globやfile_get_contentsでワイルドカードを使って拡張子を取得しようとしたが上手くいかない。
よって、画像パス一覧を取得してDBに格納する方法に切り替える。

### バケットの画像パス一覧を取得

require_once "./vendor/autoload.php";

$prefix = "test/";
$s3client = new Aws\S3\S3Client([
    'credentials' => [
        'key' => $key,
        'secret' => $secret,
    ],
    'region' => 'ap-northeast-1',
    'version' => 'latest',
]);

$objects = $s3client->listObjects([
	'Bucket' => $bucket,
	'Prefix' => $prefix,
	'Delimiter' => "/"
]);

$list = array();
foreach($objects["Contents"] as $object) {
    if(substr($object['Key'],-1,1) != "/"){
        array_push($list, substr($object['Key'], 5));
    }
}

print("<pre>");
var_dump($list);
print("</pre>");

ここからDBにpdoで入れる方法を考えます。

[AWS AIM&S3] 特定のバケットのみ操作を許可するポリシー

1. ポリシー作成
まずrootユーザでpolicyを作成します。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "s3:*",
      "Resource": [
          "arn:aws:s3:::${BucketName}",
          "arn:aws:s3:::${BucketName}/*"
      ]
    }
  ]
}

2. ユーザ作成
続いて、ユーザに作成したpolicyをattachします。

3. ログイン
https://aws.amazon.com/jp/console/
アカウントID:
ユーザ名:
パスワード:

!!Danger!!
ログインして、S3に行こうとすると、「You don’t have permissions to list buckets」と表示される。
※jsonが間違っている訳ではないので注意が必要

以下のURLに直接アクセスしないとbucketは表示されない。
https://s3.console.aws.amazon.com/s3/buckets/${BucketName}?region=ap-northeast-1&tab=objects

あせったーーーーーーー
さー手順書作るかー