chore: Set up S3 bucket for media

Author: felixmokross

.github/workflows/build.yml

@@ -20,8 +20,7 @@ env:
   NODE_VERSION: 22
   FLYCTL_VERSION: 0.3.55
   WEBSITE_INTERNAL_PORT: 3000
-  # PREVIEW_MEDIA_S3_BUCKET: lapuertahostels-media-preview
-  # MEDIA_S3_REGION: eu-west-3
+  MEDIA_S3_REGION: eu-west-3
 
 jobs:
   website-lint:
@@ -219,6 +218,8 @@ jobs:
             --app ${{ needs.define-env.outputs.fly_app_website }} \
             --config fly.website.toml \
             --image ${{ needs.website-build-push.outputs.image }} \
+            --env MEDIA_S3_REGION=${{ env.MEDIA_S3_REGION }} \
+            --env MEDIA_S3_BUCKET=${{ needs.define-env.outputs.s3_bucket }} \
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
 
@@ -301,7 +302,7 @@ jobs:
       fly_app_website: ${{ steps.define-env.outputs.fly_app_website }}
       # analytics_domain_website: ${{ steps.define-env.outputs.analytics_domain_website }}
       canonical_hostname_website: ${{ steps.define-env.outputs.canonical_hostname_website }}
-      # s3_bucket: ${{ steps.define-env.outputs.s3_bucket }}
+      s3_bucket: ${{ steps.define-env.outputs.s3_bucket }}
     steps:
       - name: Define environment
         run: |
@@ -322,7 +323,7 @@ jobs:
               echo "fly_app_website=fxmk-staging" >> "$GITHUB_OUTPUT"
               # echo "analytics_domain_website=staging.lapuertahostels.co" >> "$GITHUB_OUTPUT"
               echo "canonical_hostname_website=fxmk-staging.fly.dev" >> "$GITHUB_OUTPUT"
-              # echo "s3_bucket=lapuertahostels-media-staging" >> "$GITHUB_OUTPUT"
+              echo "s3_bucket=fxmk-media-staging" >> "$GITHUB_OUTPUT"
               ;;
           esac
         id: define-env

apps/website/.env.example

@@ -12,3 +12,8 @@ NEXT_PUBLIC_SERVER_URL=http://localhost:3000
 
 # Secret used to authenticate cron jobs
 CRON_SECRET=YOUR_CRON_SECRET_HERE
+
+MEDIA_S3_BUCKET=
+MEDIA_S3_REGION=
+MEDIA_S3_ACCESS_KEY_ID=
+MEDIA_S3_SECRET_ACCESS_KEY=

apps/website/package.json

@@ -29,6 +29,7 @@
     "@payloadcms/plugin-search": "latest",
     "@payloadcms/plugin-seo": "latest",
     "@payloadcms/richtext-lexical": "latest",
+    "@payloadcms/storage-s3": "^3.16.0",
     "@payloadcms/ui": "latest",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",

apps/website/src/payload.config.ts

@@ -65,10 +65,7 @@ export default buildConfig({
   collections: [Pages, Posts, Media, Categories, Users],
   cors: [getServerSideURL()].filter(Boolean),
   globals: [Header, Footer],
-  plugins: [
-    ...plugins,
-    // storage-adapter-placeholder
-  ],
+  plugins,
   secret: process.env.PAYLOAD_SECRET,
   sharp,
   typescript: {

apps/website/src/plugins/index.ts

@@ -14,6 +14,7 @@ import {
 } from "@payloadcms/richtext-lexical";
 import { searchFields } from "@/search/fieldOverrides";
 import { beforeSyncWithSearch } from "@/search/beforeSync";
+import { s3Storage } from "@payloadcms/storage-s3";
 
 import { Page, Post } from "@/payload-types";
 import { getServerSideURL } from "@/utilities/getURL";
@@ -100,4 +101,18 @@ export const plugins: Plugin[] = [
     },
   }),
   payloadCloudPlugin(),
+
+  s3Storage({
+    collections: {
+      media: true,
+    },
+    bucket: process.env.MEDIA_S3_BUCKET!,
+    config: {
+      credentials: {
+        accessKeyId: process.env.MEDIA_S3_ACCESS_KEY_ID!,
+        secretAccessKey: process.env.MEDIA_S3_SECRET_ACCESS_KEY!,
+      },
+      region: process.env.MEDIA_S3_REGION!,
+    },
+  }),
 ];