外部ストレージを利用してAmazon S3にファイルをアップロードする

最終更新日: 2023/12/5

前提条件
概要
1. S3バケットの作成
2. S3バケットにCross-Origin-Resource-Sharing (CORS) の設定を追加
3. S3バケットへのアクセス権限を定義したIAMポリシーの作成
4. IAMポリシーを適用してユーザーを追加
5. 追加したユーザーの認証情報をNewtに登録
6. ファイルをアップロードして確かめてみる

このチュートリアルでは、外部ストレージを利用して、画像やその他ファイルのアップロード先をご自身のAWS S3へと切り替える手順を説明します。

前提条件

AWSアカウントが作成済みで、ログインしてコンソールにアクセスできることが前提となります。
AWSアカウントの作成については、公式ドキュメントをご覧ください。

概要

設定手順は5つのステップになります。

S3バケットの作成
S3バケットに対してCORS設定を追加
S3バケットへのアクセス権限を定義したIAMポリシーの作成
IAMポリシーを適用してユーザーを追加
追加したユーザーの認証情報をNewtに登録
ファイルをアップロードして確かめてみる

1. S3バケットの作成

まずはバケットを作成します。
AWSコンソールでS3サービスにバケット名とリージョンを選択します。今回は newt-tutorialというバケット名で、東京リージョン（ap-northeast-1）にバケットを作成しました。

スクリーンショット2022-07-2216.55.45.png

オブジェクト所有者 > ACL有効を選択します。

スクリーンショット2022-07-2216.55.56.png

このバケットのブロックパブリックアクセス設定 > パブリックアクセスをすべてブロックのチェックを外し、オブジェクトの公開を承認します。

スクリーンショット2022-07-2217.02.34.png

最後にバケットを作成します。

スクリーンショット2022-07-2217.00.33.png

2. S3バケットにCross-Origin-Resource-Sharing (CORS) の設定を追加

NewtからS3へのファイルアップロードにはPresigned URLという仕組みを利用します。NewtからS3への直接アップロードを可能にするために作成したバケットに対してCORSの設定を行いましょう。
バケット詳細ページに移動し、アクセス許可 > Cross-Origin-Resource-Sharing (CORS) > 編集をクリックし、下記JSONを貼り付け https://app.newt.so からのHEAD, GET, PUT, POST, DELETE リクエストを許可します。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://app.newt.so"
        ],
        "ExposeHeaders": []
    }
]

設定後のイメージ
スクリーンショット2022-08-1915.41.44.png

3. S3バケットへのアクセス権限を定義したIAMポリシーの作成

ユーザーにS3を操作する権限を付与するためにポリシーを作成します。
IAM > ポリシーに移動し [ポリシーを作成] をクリックします。JSONタブを開き、下記JSONを貼り付けます。 your-bucket-name となっている部分は、作成したバケット名に書き換えてください。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "statement1",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name",
                "arn:aws:s3:::your-bucket-name/*"
            ]
        }
    ]
}