JavaScriptのfetchメソッドでAWSのS3からデータ取得

JavaScriptのfetchメソッドを使ってAWSのS3からデータを取得する手順です。

オンプレやローカルのjsファイルからS3へ保存してあるデータを取得することができます。

JavaScriptでS3からデータを取得する手順

JavaScriptでS3からデータを取得する手順

公開用S3バケットの作成

取得するデータを保存するバケットを作成します。

適当な名前でS3バケットを作成します。

作成の際に「ブロックパブリックアクセスの設置」の全ての項目のチェックを外し、作成したバケットを一般公開できるようにしておきます。

その他の設定はデフォルトのままで「バケットを作成」します。

作成後取得したいデータのファイルもアップロードしておいてください。

今回は適当なJSONファイルを格納します。

sample.jsonを格納しました。

サンプルデータは下記の通り

{ "name": "Tanaka", "age": 26 }

バケットポリシーの設定

作成したバケットの「アクセス許可」タブよりバケットポリシーを設定します。

「編集」からバケットポリシーを設定します。

一例として作成したバケットの全てのファイルのGetを許可する内容です。

下記コードをバケットポリシーへ貼り付け、「作成したバケットのARN」の部分を自身のバケットARNに修正した上で「変更の保存」します。

{
　"Version": "2012-10-17",
　"Statement": [
　　{
　　　"Sid": "Statement1",
　　　"Effect": "Allow",
　　　"Principal": "*",
　　　"Action": [
　　　　"s3:GetObject",
　　　　"s3:GetObjectVersion"
　　　],
　　　"Resource": "作成したバケットのARN/*"
　　}
　]
}

S3でCORSの設定

通常とあるWebサイトからダウンロードしたHTMLファイルやjsファイルから、

それ以外のサーバ(HTMLファイルやjsファイルをダウンロードしたサーバ以外)とデータのやり取りは制限がかかっています。

CORS の設定 - Amazon Simple Storage Service

バケットで XML または JSON CORS 設定を作成します。

そのため、作成したプログラムから直接S3へデータを取得しに行こうとするとエラーとなってしまいます。

それを回避するためにS3のバケットにてCORSの設定を行います。

作成したバケットの「アクセス許可」タブよりCORSを設定します。

「編集」より下記コードを貼り付けて保存します。

[
　{
　　"AllowedHeaders": [
　 　"*"
　 ],
　 "AllowedMethods": [
　 　"GET"
　 ],
　 "AllowedOrigins": [
　 　"*"
　 ],
　 "ExposeHeaders": []
 }
]

AllowedMethodsにてGETメソッドのみを許可しています。必要に応じて変更します。

AllowedOriginsにて全てサーバから取得したファイルからのアクセスを許可しています。本来であれば全てを許可するのはセキュリティ上好ましくないので、”*”ではなくWebサーバのドメインを指定してやります。”xxx@example.com”のような感じで記載します。

JavaScriptの記述

S3バケットの準備ができたのでJavaScriptで取得してみます。

S3に保存したデータをjsのfetchメソッドで取得してみます。

fetch("s3へ格納したファイルのURL").then((data)=>{
　data.json().then((obj)=>{
　　console.log(obj);
　})
})

なお、「s3へ格納したファイルのURL」は、格納データのオブジェクトURLからコピーしてください

実際に取得できるかどうか試してみます。

検証時のファイルは下記の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　<title>get s3test</title>
</head>
<body>
　<h1>test Page</h1>
　<script>
　　fetch("https://examplebukket.s3.ap-northeast-1.amazonaws.com/sample.json").then((data)=>{
　　　data.json().then((obj)=>{
　　　　console.log(obj);
　　　})
　　})
　</script>
</body>
</html>

ページを表示したタイミングでconsoleへs3から取得したJSONデータを表示します。