S3を導入していこうと思う

はじめに

お疲れ様です。今回は画像も投稿できるようにするためにS3のバケットを作り、基本的な設定をしていきます。
S3について詳しく知りたい方はこちらの記事をみるのがよいと思います
(https://qiita.com/c60evaporator/items/da47620d69f84a9be7dc)

前提

AWSアカウントを持っていて、IAMユーザーでログインしている。
フロントはTypeScript(React)、バックエンドはRails　API
Docker環境

実際に導入していく

まず、AWSの上の検索欄でS3と打ち、一番上のS3をクリックする。

すると、バケットを作成というボタンがあるのでこれを押します。
バケット名を適当に決めたら、あとの設定はデフォルトのまま一番下までスクロールしバケットを作成を押します。

次は、クロスオリジン(CORS)設定を行います。
先ほど作ったバケットを押し、アクセス許可という項目に行きます。
その中で
Cross-Origin Resource Sharing (CORS)
という欄があるので、その中で

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

というように編集をしたらCROS設定はOKです。
これはどこのドメインから、どのリクエストを許可するかというような設定を行っているみたいです。

Presigned URL

次はPresigned URLを発行する。
Presigned URLというのは、画像を直接S3にアップロードするために使う使い捨てのURLのようなものらしいです。S3のアクセスキーを公開せずに直接アップロードできるので必須だと思います。

まず、gemfileにs3用のものを追加する

gem 'aws-sdk-s3', '~> 1.130'

そのあとしっかりbundle installしてください。

次に、.envファイル内に環境変数を設定する。

AWS_ACCESS_KEY_ID=xxxxxxxx
AWS_SECRET_ACCESS_KEY=yyyyyyyy
AWS_REGION=ap-northeast-1
AWS_BUCKET_NAME=your-app-uploads

dockercompose.yml内を修正

services:
  backend:
    env_file:
      - ./backend/.env  //ここを追加

環境変数がばれると大変なので.envファイルをgitignoreで指定するのを忘れないでください！！

これで基本的な設定はできたと思います！