Merge pull request #92 from seanmorley15/development

CDN implementation for S3 clients

.env.example

@@ -5,5 +5,5 @@ DATABASE_URL=
 
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
-AWS_S3_ENDPOINT=
+VITE_AWS_S3_ENDPOINT=
 AWS_REGION=

docker-compose.yml

@@ -11,9 +11,9 @@ services:
       - SKIP_DB_WAIT=false
       - AWS_ACCESS_KEY_ID=minioadmin
       - AWS_SECRET_ACCESS_KEY=minioadmin
-      - AWS_S3_ENDPOINT=http://minio:9000
-      # MINIO_CLIENT_OVERRIDE: Only necessary if using minio here with this docker compose file. This is becaues the client needs a different endpoint than the server because its not in the docker network.
-      - MINIO_CLIENT_OVERRIDE=http://localhost:9000
+      - VITE_AWS_S3_ENDPOINT=http://minio:9000
+      # VITE_MINIO_CLIENT_OVERRIDE: Only necessary if using minio here with this docker compose file. This is becaues the client needs a different endpoint than the server because its not in the docker network.
+      - VITE_MINIO_CLIENT_OVERRIDE=http://localhost:9000
       - BODY_SIZE_LIMIT=Infinity # change this to a smaller value if you want to limit the size of uploaded files!
 
     depends_on:

src/lib/components/UserAvatar.svelte

@@ -15,7 +15,7 @@
   <div class="avatar placeholder">
     <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
       {#if user.icon}
-        <img src={user.icon} alt="" />
+        <img src={`/cdn/profile-pics/${user.icon}`} alt="" />
       {:else}
         <span class="text-2xl -mt-1">{user.first_name[0]}</span>
       {/if}

src/lib/server/s3.ts

@@ -19,7 +19,7 @@ const s3Config: S3ClientConfig = {
     accessKeyId: env.AWS_ACCESS_KEY_ID as string,
     secretAccessKey: env.AWS_SECRET_ACCESS_KEY as string,
   },
-  endpoint: env.AWS_S3_ENDPOINT, // Add the endpoint
+  endpoint: env.VITE_AWS_S3_ENDPOINT, // Add the endpoint
   forcePathStyle: true,
 };
 
@@ -53,7 +53,7 @@ export const ensureBucketExists = async (bucketName: string): Promise<void> => {
           {
             Effect: "Allow",
             Principal: "*", // This allows anyone (public)
-            Action: ["s3:GetBucketLocation", "s3:ListBucket"],
+            Action: "s3:GetBucketLocation",
             Resource: `arn:aws:s3:::${bucketName}`,
           },
           {
@@ -146,10 +146,10 @@ export const deleteObject = async (bucketName: string, fileName: string) => {
 export const getObjectUrl = (bucketName: string, fileName: string): string => {
   let objectUrl: string;
   let endpoint: string = "";
-  if (env.MINIO_CLIENT_OVERRIDE) {
-    endpoint = env.MINIO_CLIENT_OVERRIDE as string;
+  if (env.VITE_MINIO_CLIENT_OVERRIDE) {
+    endpoint = env.VITE_MINIO_CLIENT_OVERRIDE as string;
   } else {
-    endpoint = env.AWS_S3_ENDPOINT as string;
+    endpoint = env.VITE_AWS_S3_ENDPOINT as string;
   }
 
   // This code is not as clean as it could be, but it works for whats needed. Help is welcome to clean it up!

src/routes/api/upload/+server.ts

@@ -106,9 +106,11 @@ export async function POST(event: RequestEvent): Promise<Response> {
       Buffer.from(fileBuffer)
     );
 
+    const newKey = objectUrl.split("/").pop() as string;
+
     console.log(`File uploaded to ${objectUrl}`);
 
-    return new Response(JSON.stringify({ objectUrl }), {
+    return new Response(JSON.stringify({ objectUrl, key: newKey }), {
       status: 200,
       headers: {
         "Content-Type": "application/json",

src/routes/cdn/[bucket]/[key]/+page.server.ts

@@ -0,0 +1,14 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad, RouteParams } from "../../../$types";
+import { getObjectUrl } from "$lib/server/s3";
+
+export const load = (async (event) => {
+  const key = event.params.key as string;
+  const bucket = event.params.bucket as string;
+
+  const url = getObjectUrl(bucket, key);
+
+  console.log(`Redirecting to ${url}`);
+
+  return redirect(302, url);
+}) satisfies PageServerLoad;

src/routes/profile/+page.svelte

@@ -17,6 +17,7 @@
 {#if data.user.icon}
   <div class="avatar flex items-center justify-center">
     <div class="w-24 rounded">
+      <!-- svelte-ignore a11y-missing-attribute -->
       <img src={data.user.icon} class="w-24 rounded-full" />
     </div>
   </div>

src/routes/settings/+page.server.ts

@@ -79,8 +79,8 @@ export const actions: Actions = {
       });
 
       const data = await response.json();
-      console.log("DATA" + data.objectUrl);
-      icon = data.objectUrl;
+      console.log("DATA" + data.key);
+      icon = data.key;
 
       if (data.error) {
         throw error(400, {