Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8835

【AWS S3とNode.jsを連携して画像を持ってくる】

$
0
0

AWS S3のオリジン間リソース共有 (CORS) サポートを利用して、直接Node.jsでfileをダウンロードしてみたのでその時のやり方を載せておく。

この記事では、IAMの利用から、S3にある画像をnode.jsで取得できるようにする流れがわかってもらえればいいなという感じです。


【AWS側の設定】

1,S3にのみアクセスできるIAMグループを作る

今回は、AccessToS3OnlyGroup というグループをS3FullAccess権限のみをもたせて作る。

2,新しくIAMユーザの作成

IAMユーザーを新しく作り、先程作ったAccessToS3OnlyGroupというグループに割り当てます。
ちなみに、AmazonS3FullAccessポリシーの中身はこのようになっています。

{"Version":"2012-10-17","Statement":[{"Effect":"Allow","Action":"s3:*","Resource":"*"}]}//Effect → Allow or Deny (許可 or 拒否)//Action → どういった権限を与えるかなどの細かい設定 (GET, POST, など)//Resouce → どのS3を使用しているのかといった設定//Condition → このポリシーが適用される条件

3,IAMユーザでログインする

・rootユーザーでログイン
・IAM→UsersからログインしたいIAMユーザーのsecurity credentials画面へ
・Summaryにあるサインインurlからログインする。
https://~~~.signin.aws.amazon.com/console(~~~の部分がアカウントエイリアスにあたる)
→アカウントIDは、IAMユーザでログイン後、MyAccountの右にある数字の羅列なので、ログイン時にこちらを入力してもログイン可能。

4, 同画面でアクセスキーを作っておく

3番のときと同じsecurity credentials画面で、Access keys から「create access key」から、accessKeyId, secretAccessKeyを作成し、メモしておく。

5, S3に画像をUploadする


【以降はNode.js側の設定になります】

6,app.jsでS3と連携するために必要なモジュールをinstal

npm install cors
npm install aws-sdk
corsのoptionsについて
・origin ... Access-Control-Allow-Origin CORSヘッダーを設定する。どのオリジンにヘッダーを付与するか、しないかなどの設定ができる。
・credentials ... 資格情報系の許可(Cookieなど)を与えるかどうかなどの設定ができる。
今は、cookieを使わないのでfalseにしておく。

constexpress=require('express')constapp=express();constcors=require('cors')constAWS=require('aws-sdk')app.use(cors({origin:true,credentials:false}))

ちなみに、origin : falseにすると以下のようなエラーが出る。

AccesstoXMLHttpRequestat'http://localhost:8080/menu'fromorigin'http://localhost:3000'hasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'headerispresentontherequestedresource.

7, S3からファイルを取得

・S3から特定のバケット内の特定のファイルを取得する。

constparams={'Bucket':'My-app-imgs','Key':'A.jpg'}s3Client.getObject(params,(err,data)=>{if(err){console.log(err)}else{console.log(data)}})

・上記のコードを実装するときに出たエラー(気をつけましょう)
→Keyと指定したつもりだったが、keyになっており、一文字目が大文字になってなかった。

MultipleValidationErrors:Therewere2validationerrors:*MissingRequiredParameter:Missingrequiredkey'Key'inparams*UnexpectedParameter:Unexpectedkey'key'foundinparamsatParamValidator.validate

・S3の特定のバケットからファイル一覧を取得する方法

constparams={'Bucket':'My-app-imgs'}s3Client.listObjects(params,(err,datas)=>{if(err){console.log(err)}else{console.log(datas)}})

・dataの中身
Bodyにバイナリで返されるのでstringに変換する必要がある。

{AcceptRanges:'bytes',LastModified:2021-03-28T07:55:49.000Z,ContentLength:867920,ETag:'"5b6a5a0c6aea626483f3bfbda1c32da3"',ContentType:'image/jpeg',Metadata:{},Body:<Bufferffd8ffe000104a46494600010100000100010000ffdb0084000505050506050607070609090809090d0c0b0b0c0d130e0f0e...867870morebytes>
}

【おまけ imageのバイナリデータを表示する方法】
(これは、Reactのコンポーネント内で使ったときのやつです)

<imgsrc={`data:image/jpeg;base64,${data}`}/>

Viewing all articles
Browse latest Browse all 8835

Trending Articles