ReactとNode.jsを使用して画像アップロード機能を実装する ①

概要

ReactとNode.jsを使用して画像アップロード機能を実装します！
今回はNode.jsでAWS上にある自分のS3バケットを表示させるところまでを実装します。

AWS SDKをインストールする

yarn add aws-sdk

アクセスキーを取得する

1. AWSコンソールにログインしてIAMを検索する
2. アクセスキーの作成をクリックし、CSVファイルをダウンロードする

.envファイルの作成

先ほどダウンロードしてきたCSVファイルにあるアクセスキーの情報を入力します。

//認証情報を提供する
AWS_ACCESS_KEY_ID= XXXXXXXXXXXX
AWS_SECRET_ACCESS_KEY= XXXXXXXXXXXXXXX

環境変数から Node.js への認証情報のロード

AWS上にあるS3バケットを一覧表示する

indes.jsファイルを作成し、AWS上にあるS3バケットを一覧表示させてみましょう。

const AWS = require('aws-sdk');
const s3 = new AWS.S3();

//.envに入力した認証情報を使用
const AWS_ACCESS_KEY_ID = process.env.AWS_ACCESS_KEY_ID;
const AWS_SECRET_ACCESS_KEY = process.env.AWS_SECRET_ACCESS_KEY;

AWS.config.update({
 accessKeyId: AWS_ACCESS_KEY_ID,
 secretAccessKey: AWS_SECRET_ACCESS_KEY,
});

s3.listBuckets((err, data) => {
 if (err) {
  console.log('Error', err);
 } else {
  //バケット一覧表示
  console.log('Success', data.Buckets);
 }
});

上記を入力しターミナルでnode index.jsを実行してみましょう。

画像のようにS3バケットが表示されれば成功です！

さいごに

今回、AWSの認証情報を使用してS3バケットの一覧を確認しました。

次回はメソッドを使用してS3バケットに画像を保存できるようにしていきます！