S3

バケットの作成

AWSダッシュボード / S3 / バケットを作成

入力が必要なのは「バケット名」のみ。他はデフォルトの設定でいい

IAMユーザー

AWSダッシュボード / IAM /ユーザー / ユーザーの作成

S3を使うので「AmazonS3FullAccess」を付与し、ユーザーを作成

アクセスキーの作成

ユーザーが作成が作成できたら「アクセスキーを作成」ボタンが表示される

アクセスキーの「ユースケース」は「ローカルコード」

ここまま行うと、S3のパブリックアクセスを許可 & 外部（匿名ユーザー）がファイルを読めるようにバケットポリシーを追加すると、ローカルのNextjsアプリからCRUDできるようになる。

しかし、Cloudfrontを経由した方が良い

Cloudfront

AWSダッシュボード/「ディストリビューションを作成」

入力・選択が必要な部分は、「Distribution name」と「オリジン」で作成したS3バケットを選ぶ

*「セキュリティ - ウェブアプリケーションファイアウォール (WAF)」というやつはOFFにした

S3のバケットポリシー

に戻り以下をペースト（大文字の部分を書き換え）

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontServicePrincipalReadOnly",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DISTRIBUTION_ID"
        }
      }
    }
  ]
}

ここまでで、CloudfrontのURLを使ってローカルからCRUDできるようになる。

ローカルからCRUD

npm i @aws-sdk/client-s3

取得

  const imageUrl = `https://xxx.cloudfront.net/${fileName}`;

next.config.ts に xxx.cloudfront.net の画像取得許可を追加

投稿

環境変数

# S3
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=ap-northeast-1 //東京
AWS_BUCKET_NAME=

route.ts

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { NextRequest, NextResponse } from "next/server";

const s3 = new S3Client({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
});

export async function POST(req: NextRequest) {
  try {
    const formData = await req.formData();
    const file = formData.get("file") as File;

    if (!file) {
      return NextResponse.json({ message: "No file provided" }, { status: 400 });
    }

    const arrayBuffer = await file.arrayBuffer();

    await s3.send(
      new PutObjectCommand({
        Bucket: process.env.AWS_BUCKET_NAME!,
        Key: file.name,
        Body: new Uint8Array(arrayBuffer),
        ContentType: file.type,
      })
    );

    return NextResponse.json({ message: "Uploaded!" });
  } catch (err) {
    console.error(err);
    return NextResponse.json({ message: "Upload failed", error: err }, { status: 500 });
  }
}

page.tsx

"use client";
import { useState } from "react";

export default function UploadPage() {
  const [file, setFile] = useState<File | null>(null);
  const [message, setMessage] = useState("");

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.[0]) setFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);

    const res = await fetch("/api/s3", {
      method: "POST",
      body: formData,
    });

    const data = await res.json();
    setMessage(data.message);
  };

  return (
    <div className="p-4">
      <h1>Upload Image to S3</h1>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <button onClick={handleUpload} className="ml-2 px-4 py-2 bg-blue-500 text-white rounded">
        Upload
      </button>
      {message && <p>{message}</p>}
    </div>
  );
}

AWS：S3ストレージ

AWS：S3ストレージ