JavaScript Amazon S3からデータを取得するサンプル
環境
Amazon S3
操作方法
1.公開S3バケットの作成
1).Amazon S3画面に移動する
2).「バケットを作成」をクリックします。
3).バケットを作成画面が表示されます。
バケット名：testbuket
AWSリージョン： アジアバシフィック(東京)ap-northeast-1
オブジェクト所有者：ACL無効
パブリックアクセスをすべて ブロック項目のチェックを外します
その他の設定はデフォルトのままで「バケットを作成」します。
4).テストファイルをアップロードします
例 data.json
サンプルデーt
{ “city": “tokyo", “name": “山田 太郎" ,"age",26 }
2.バケットポリシーを設定
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Statement1",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:GetObjectVersion"
],
"Resource": "xxxx/*"
}
]
}
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Statement1",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:GetObjectVersion"
],
"Resource": "xxxx/*"
}
]
}
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Statement1",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:GetObjectVersion"
],
"Resource": "xxxx/*"
}
]
}
3.S3でCORSを設定
バケットの「アクセス許可」タブよりCORSを設定します。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
4.JavaScriptコード
fetch("https://xxxdata.json").then((data)=>{
data.json().then((obj)=>{
console.log(obj);
})
})
fetch("https://xxxdata.json").then((data)=>{
data.json().then((obj)=>{
console.log(obj);
})
})
fetch("https://xxxdata.json").then((data)=>{
data.json().then((obj)=>{
console.log(obj);
})
})