Merge pull request #23 from sambecker/s3-presigned-url

Switch S3 to presigned url strategy
2023-11-29 22:57:38 -06:00 · 2023-11-29 22:57:38 -06:00 · 205d5fb0bf
commit 205d5fb0bf
parent 44a93880ba a1c6ef9b3f
10 changed files with 565 additions and 524 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -18,6 +18,7 @@
    "Makernote",
    "nanoids",
    "nextjs",
+    "presigner",
    "Provia",
    "qaub",
    "QRSTUVWXYZ",
--- a/README.md
+++ b/README.md
@ -91,31 +91,9 @@ Installation
     }]
     ```
   - Store configuration 
-     - Bucket name: `NEXT_PUBLIC_S3_BUCKET`
-     - Bucket region: `NEXT_PUBLIC_S3_REGION`
-2. Setup client upload credentials
-   - [Create IAM policy](https://console.aws.amazon.com/iam/home#/policies) using JSON editor:
-     ```json
-     {
-       "Version": "2012-10-17",
-       "Statement": [
-          {
-            "Effect": "Allow",
-            "Action": [
-              "s3:PutObject",
-              "s3:PutObjectACL"
-            ],
-            "Resource": [
-              "arn:aws:s3:::{BUCKET_NAME}/upload-*"
-            ]
-          }
-       ]
-     }
-     ```
-   - [Create IAM user](https://console.aws.amazon.com/iam/home#/users) by choosing "Attach policies directly." Create access key under "Security credentials," choose "Application running outside AWS," and store credentials:
-     - `NEXT_PUBLIC_S3_UPLOAD_ACCESS_KEY`
-     - `NEXT_PUBLIC_S3_UPLOAD_SECRET_ACCESS_KEY`
-3. Setup server admin credentials
+     - Bucket name: `NEXT_PUBLIC_AWS_S3_BUCKET`
+     - Bucket region: `NEXT_PUBLIC_AWS_S3_REGION`
+2. Setup credentials
   - [Create IAM policy](https://console.aws.amazon.com/iam/home#/policies) using JSON editor:
     ```json
     {
@ -138,9 +116,9 @@ Installation
       ]
     }
     ```
-   - [Create IAM user](https://console.aws.amazon.com/iam/home#/users) by choosing "Attach policies directly." Create access key under "Security credentials," choose "Application running outside AWS," and store credentials (⚠️ _Ensure admin environment variables are not prefixed with `NEXT_PUBLIC`_):
-     - `S3_ADMIN_ACCESS_KEY`
-     - `S3_ADMIN_SECRET_ACCESS_KEY`
+   - [Create IAM user](https://console.aws.amazon.com/iam/home#/users) by choosing "Attach policies directly." Create access key under "Security credentials," choose "Application running outside AWS," and store credentials (⚠️ _Ensure credential environment variables are not prefixed with `NEXT_PUBLIC`_):
+     - `AWS_S3_ACCESS_KEY`
+     - `AWS_S3_SECRET_ACCESS_KEY`

 FAQ
 -
--- a/next.config.js
+++ b/next.config.js
@ -7,10 +7,10 @@ const VERCEL_BLOB_HOSTNAME = VERCEL_BLOB_STORE_ID
  : undefined;

 const AWS_S3_HOSTNAME =
-  process.env.NEXT_PUBLIC_S3_BUCKET &&
-  process.env.NEXT_PUBLIC_S3_REGION
+  process.env.NEXT_PUBLIC_AWS_S3_BUCKET &&
+  process.env.NEXT_PUBLIC_AWS_S3_REGION
    // eslint-disable-next-line max-len
-    ? `${process.env.NEXT_PUBLIC_S3_BUCKET}.s3.${process.env.NEXT_PUBLIC_S3_REGION}.amazonaws.com`
+    ? `${process.env.NEXT_PUBLIC_AWS_S3_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_S3_REGION}.amazonaws.com`
    : undefined;

 const createRemotePattern = (hostname) => hostname
--- a/package.json
+++ b/package.json
@ -9,17 +9,18 @@
    "analyze": "ANALYZE=true next build"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.456.0",
+    "@aws-sdk/client-s3": "3.462.0",
+    "@aws-sdk/s3-request-presigner": "3.462.0",
    "@next/bundle-analyzer": "14.0.3",
    "@tailwindcss/forms": "^0.5.7",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.1.2",
    "@types/jest": "^29.5.10",
    "@types/node": "^20.10.0",
-    "@types/react": "18.2.38",
+    "@types/react": "18.2.39",
    "@types/react-dom": "18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
    "@vercel/analytics": "^1.1.1",
    "@vercel/blob": "^0.15.1",
    "@vercel/postgres": "0.5.1",
@ -29,18 +30,18 @@
    "eslint": "8.54.0",
    "eslint-config-next": "14.0.3",
    "exifr": "^7.1.3",
-    "framer-motion": "^10.16.5",
+    "framer-motion": "^10.16.7",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "nanoid": "^5.0.3",
    "next": "14.0.3",
-    "next-auth": "5.0.0-beta.3",
+    "next-auth": "5.0.0-beta.4",
    "next-themes": "^0.2.1",
    "postcss": "8.4.31",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.12.0",
-    "sonner": "^1.2.3",
+    "sonner": "^1.2.4",
    "tailwindcss": "3.3.5",
    "ts-exif-parser": "^0.2.2",
    "typescript": "5.3.2"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/api/aws-s3/presigned-url/[key]/route.ts
+++ b/src/app/api/aws-s3/presigned-url/[key]/route.ts
@ -0,0 +1,28 @@
+import { auth } from '@/auth';
+import {
+  awsS3Client,
+  awsS3PutObjectCommandForKey,
+} from '@/services/blob/aws-s3';
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+
+export const runtime = 'edge';
+
+export async function GET(
+  _: Request,
+  { params: { key } }: { params: { key: string } },
+) {
+  const session = await auth();
+  if (session?.user && key) {
+    const url = await getSignedUrl(
+      awsS3Client(),
+      awsS3PutObjectCommandForKey(key),
+      { expiresIn: 3600 }
+    );
+    return new Response(
+      url,
+      { headers: { 'content-type': 'text/plain' } },
+    );
+  } else {
+    return new Response('Unauthorized request', { status: 401 });
+  }
+}
--- a/src/app/api/route.ts
+++ b/src/app/api/route.ts
@ -19,6 +19,6 @@ export async function GET() {
      photos: photos.map(formatPhotoForApi),
    });
  } else {
-    return Response.json({ message: 'API is disabled' });
+    return new Response('API access disabled', { status: 404 });
  }
 }
--- a/src/services/blob/aws-s3.ts
+++ b/src/services/blob/aws-s3.ts
@ -7,28 +7,23 @@ import {
  PutObjectCommand,
 } from '@aws-sdk/client-s3';

-const S3_BUCKET = process.env.NEXT_PUBLIC_S3_BUCKET ?? '';
-const S3_REGION = process.env.NEXT_PUBLIC_S3_REGION ?? '';
-const S3_UPLOAD_ACCESS_KEY =
-  process.env.NEXT_PUBLIC_S3_UPLOAD_ACCESS_KEY ?? '';
-const S3_UPLOAD_SECRET_ACCESS_KEY =
-  process.env.NEXT_PUBLIC_S3_UPLOAD_SECRET_ACCESS_KEY ?? '';
-const S3_ADMIN_ACCESS_KEY =
-  process.env.S3_ADMIN_ACCESS_KEY;
-const S3_ADMIN_SECRET_ACCESS_KEY =
-  process.env.S3_ADMIN_SECRET_ACCESS_KEY;
+const AWS_S3_BUCKET = process.env.NEXT_PUBLIC_AWS_S3_BUCKET ?? '';
+const AWS_S3_REGION = process.env.NEXT_PUBLIC_AWS_S3_REGION ?? '';
+const AWS_S3_ACCESS_KEY = process.env.AWS_S3_ACCESS_KEY ?? '';
+const AWS_S3_SECRET_ACCESS_KEY = process.env.AWS_S3_SECRET_ACCESS_KEY ?? '';

-const client = () => new S3Client({
-  region: S3_REGION,
+const API_PATH_PRESIGNED_URL = '/api/aws-s3/presigned-url';
+
+export const awsS3Client = () => new S3Client({
+  region: AWS_S3_REGION,
  credentials: {
-    // Fall back on upload credentials when admin credentials aren't available
-    accessKeyId: S3_ADMIN_ACCESS_KEY ?? S3_UPLOAD_ACCESS_KEY,
-    secretAccessKey: S3_ADMIN_SECRET_ACCESS_KEY ?? S3_UPLOAD_SECRET_ACCESS_KEY,
+    accessKeyId: AWS_S3_ACCESS_KEY,
+    secretAccessKey: AWS_S3_SECRET_ACCESS_KEY,
  },
 });

 export const AWS_S3_BASE_URL =
-  `https://${S3_BUCKET}.s3.${S3_REGION}.amazonaws.com`;
+  `https://${AWS_S3_BUCKET}.s3.${AWS_S3_REGION}.amazonaws.com`;

 export const isUrlFromAwsS3 = (url: string) =>
  url.startsWith(AWS_S3_BASE_URL);
@ -37,22 +32,24 @@ const urlForKey = (key?: string) => `${AWS_S3_BASE_URL}/${key}`;

 const generateBlobId = () => generateNanoid(16);

+export const awsS3PutObjectCommandForKey = (Key: string) =>
+  new PutObjectCommand({ Bucket: AWS_S3_BUCKET, Key, ACL: 'public-read' });
+
 export const awsS3UploadFromClient = async (
  file: File | Blob,
  fileName: string,
  extension: string,
  addRandomSuffix?: boolean,
 ) => {
-  const Key = addRandomSuffix
+  const key = addRandomSuffix
    ? `${fileName}-${generateBlobId()}.${extension}`
    : `${fileName}.${extension}`;
-  return client().send(new PutObjectCommand({
-    Bucket: S3_BUCKET,
-    Key,
-    Body: file,
-    ACL: 'public-read',
-  }))
-    .then(() => urlForKey(Key));
+
+  const url = await fetch(`${API_PATH_PRESIGNED_URL}/${key}`)
+    .then((response) => response.text());
+
+  return fetch(url, { method: 'PUT', body: file })
+    .then(() => urlForKey(key));
 };

 export const awsS3Copy = async (
@ -65,8 +62,8 @@ export const awsS3Copy = async (
  const Key = addRandomSuffix
    ? `${name}-${generateBlobId()}.${extension}`
    : fileNameDestination;
-  return client().send(new CopyObjectCommand({
-    Bucket: S3_BUCKET,
+  return awsS3Client().send(new CopyObjectCommand({
+    Bucket: AWS_S3_BUCKET,
    CopySource: fileNameSource,
    Key,
    ACL: 'public-read',
@ -75,15 +72,15 @@ export const awsS3Copy = async (
 };

 export const awsS3Delete = async (Key: string) => {
-  client().send(new DeleteObjectCommand({
-    Bucket: S3_BUCKET,
+  awsS3Client().send(new DeleteObjectCommand({
+    Bucket: AWS_S3_BUCKET,
    Key,
  }));
 };

 export const awsS3List = async (Prefix: string) =>
-  client().send(new ListObjectsCommand({
-    Bucket: S3_BUCKET,
+  awsS3Client().send(new ListObjectsCommand({
+    Bucket: AWS_S3_BUCKET,
    Prefix,
  }))
    .then((data) => data.Contents?.map(({ Key }) => urlForKey(Key)) ?? []);
--- a/src/services/blob/index.ts
+++ b/src/services/blob/index.ts
@ -13,7 +13,7 @@ import {
  awsS3UploadFromClient,
  isUrlFromAwsS3,
 } from './aws-s3';
-import { HAS_AWS_S3_STORAGE_CLIENT, HAS_AWS_S3_STORAGE } from '@/site/config';
+import { HAS_AWS_S3_STORAGE, HAS_AWS_S3_STORAGE_CLIENT } from '@/site/config';

 const PREFIX_UPLOAD = 'upload';
 const PREFIX_PHOTO = 'photo';
--- a/src/site/config.ts
+++ b/src/site/config.ts
@ -35,17 +35,15 @@ export const HAS_VERCEL_BLOB =
  (process.env.BLOB_READ_WRITE_TOKEN ?? '').length > 0;

 // STORAGE: AWS S3
-// Includes separate check for client-side usage, i.e., uploading,
+// Includes separate check for client-side usage,
+// i.e., uploading, url construction
 export const HAS_AWS_S3_STORAGE_CLIENT =
-  (process.env.NEXT_PUBLIC_S3_BUCKET ?? '').length > 0 &&
-  (process.env.NEXT_PUBLIC_S3_REGION ?? '').length > 0 &&
-  (process.env.NEXT_PUBLIC_S3_UPLOAD_ACCESS_KEY ?? '').length > 0 &&
-  (process.env.NEXT_PUBLIC_S3_UPLOAD_SECRET_ACCESS_KEY ?? '').length > 0;
+  (process.env.NEXT_PUBLIC_AWS_S3_BUCKET ?? '').length > 0 &&
+  (process.env.NEXT_PUBLIC_AWS_S3_REGION ?? '').length > 0;
 export const HAS_AWS_S3_STORAGE =
  HAS_AWS_S3_STORAGE_CLIENT &&
-  (process.env.S3_ADMIN_ACCESS_KEY ?? '').length > 0 &&
-  (process.env.S3_ADMIN_SECRET_ACCESS_KEY ?? '').length > 0;
-  
+  (process.env.AWS_S3_ACCESS_KEY ?? '').length > 0 &&
+  (process.env.AWS_S3_SECRET_ACCESS_KEY ?? '').length > 0;

 // SETTINGS