feat: store images on DB

Author: Fraguinha

Makefile

@@ -20,32 +20,18 @@ dev:
 	@echo "Building website image..."
 	@docker build --pull --no-cache -t fraguinha/a50passos.com:latest src/website
 
-	@echo "Building assets image..."
-	@docker build --pull --no-cache -t fraguinha/a50passos.com-assets:latest -f src/website/Dockerfile.assets .
-
 	@echo "Tagging website image..."
 	@docker tag fraguinha/a50passos.com localhost:10000/fraguinha/a50passos.com:latest
 
-	@echo "Tagging assets image..."
-	@docker tag fraguinha/a50passos.com-assets localhost:10000/fraguinha/a50passos.com-assets:latest
-
 	@echo "Pushing website image..."
 	@docker push localhost:10000/fraguinha/a50passos.com:latest
 
-	@echo "Pushing assets image..."
-	@docker push localhost:10000/fraguinha/a50passos.com-assets:latest
-
 	@echo "Capturing website image digest..."; \
 	WEBSITE_SHA=$$(docker inspect --format='{{index .RepoDigests 0}}' fraguinha/a50passos.com:latest | cut -d'@' -f2); \
 	echo "Website SHA: $$WEBSITE_SHA"; \
 	\
-	echo "Capturing assets image digest..."; \
-	ASSETS_SHA=$$(docker inspect --format='{{index .RepoDigests 0}}' fraguinha/a50passos.com-assets:latest | cut -d'@' -f2); \
-	echo "Assets SHA: $$ASSETS_SHA"; \
-	\
 	echo "Patching kubernetes manifests with SHA digests..."; \
 	sed -i '' "s|a50passos.com:latest|a50passos.com:latest@$$WEBSITE_SHA|g" local/website.yml; \
-	sed -i '' "s|a50passos.com-assets:latest|a50passos.com-assets:latest@$$ASSETS_SHA|g" local/website.yml; \
 	\
 	echo "Applying kubernetes manifests..."; \
 	kubectl apply -k local/
@@ -71,4 +57,4 @@ clean:
 
 mongo-shell:
 	@echo "Connecting to MongoDB shell..."
-	@docker exec -it mongodb mongosh
+	@docker exec -it mongodb mongosh

k8s/website.yml

@@ -23,31 +23,6 @@ spec:
     alphabetical:
       order: asc
 ---
-apiVersion: image.toolkit.fluxcd.io/v1
-kind: ImageRepository
-metadata:
-  name: a50passos-website-assets-image
-  namespace: flux-system
-spec:
-  image: fraguinha/a50passos.com-assets
-  interval: 1m0s
----
-apiVersion: image.toolkit.fluxcd.io/v1
-kind: ImagePolicy
-metadata:
-  name: a50passos-website-assets-policy
-  namespace: flux-system
-spec:
-  digestReflectionPolicy: Always
-  interval: 1m0s
-  imageRepositoryRef:
-    name: a50passos-website-assets-image
-  filterTags:
-    pattern: '^latest$'
-  policy:
-    alphabetical:
-      order: asc
----
 apiVersion: apps/v1
 kind: Deployment
 metadata:
@@ -63,20 +38,6 @@ spec:
       labels:
         app: website
     spec:
-      initContainers:
-        - name: create-uploads-dir
-          image: busybox
-          command: ['sh', '-c', 'mkdir -p /app/dist/public/images/uploads && chmod -R 755 /app/dist/public/images/uploads']
-          volumeMounts:
-            - name: images
-              mountPath: /app/dist/public/images
-        - name: copy-image-assets
-          image: fraguinha/a50passos.com-assets:latest@sha256:0df2dfb11aedd0be1735e61a9724f475730fd2a05892fd2883a485b97340204a # {"$imagepolicy": "a50passos:a50passos-website-assets-policy"}
-          imagePullPolicy: Always
-          command: ['sh', '-c', 'cp -r /assets/* /app/dist/public/images/']
-          volumeMounts:
-            - name: images
-              mountPath: /app/dist/public/images
       containers:
         - name: website
           image: fraguinha/a50passos.com:latest@sha256:733675b0a356cc9ca9273893b7c211d25f6a86e9d4de75f0a967ab4c801fe8cb # {"$imagepolicy": "a50passos:a50passos-website-policy"}
@@ -100,13 +61,6 @@ spec:
                 secretKeyRef:
                   name: a50passos-secrets
                   key: SESSION_SECRET
-          volumeMounts:
-            - name: images
-              mountPath: /app/dist/public/images
-      volumes:
-        - name: images
-          persistentVolumeClaim:
-            claimName: a50passos-images-pvc
 ---
 apiVersion: v1
 kind: Service
@@ -117,20 +71,4 @@ spec:
   selector:
     app: website
   ports:
-    - port: 8080
-      targetPort: 8080
----
-apiVersion: v1
-kind: PersistentVolumeClaim
-metadata:
-  name: a50passos-images-pvc
-  namespace: a50passos
-  annotations:
-    recurring-job.longhorn.io/default: enabled
-spec:
-  accessModes:
-    - ReadWriteMany
-  storageClassName: longhorn
-  resources:
-    requests:
-      storage: 1Gi
+    - port: 8080

local/website.yml

@@ -13,20 +13,6 @@ spec:
       labels:
         app: website
     spec:
-      initContainers:
-        - name: create-uploads-dir
-          image: busybox
-          command: ['sh', '-c', 'mkdir -p /app/dist/public/images/uploads && chmod -R 755 /app/dist/public/images/uploads']
-          volumeMounts:
-            - name: images
-              mountPath: /app/dist/public/images
-        - name: copy-image-assets
-          image: k3d-a50passos-registry:10000/fraguinha/a50passos.com-assets:latest
-          imagePullPolicy: Always
-          command: ['sh', '-c', 'cp -r /assets/* /app/dist/public/images/']
-          volumeMounts:
-            - name: images
-              mountPath: /app/dist/public/images
       containers:
         - name: website
           image: k3d-a50passos-registry:10000/fraguinha/a50passos.com:latest
@@ -50,13 +36,6 @@ spec:
                 secretKeyRef:
                   name: a50passos-secrets
                   key: SESSION_SECRET
-          volumeMounts:
-            - name: images
-              mountPath: /app/dist/public/images
-      volumes:
-        - name: images
-          persistentVolumeClaim:
-            claimName: a50passos-images-pvc
 ---
 apiVersion: v1
 kind: Service
@@ -67,17 +46,4 @@ spec:
   selector:
     app: website
   ports:
-    - port: 8080
-      targetPort: 8080
----
-apiVersion: v1
-kind: PersistentVolumeClaim
-metadata:
-  name: a50passos-images-pvc
-  namespace: a50passos
-spec:
-  accessModes:
-    - ReadWriteOnce
-  resources:
-    requests:
-      storage: 1Gi
+    - port: 8080

src/website/Dockerfile

@@ -10,7 +10,6 @@ RUN npm ci --verbose
 COPY . .
 
 RUN npm run deploy
-RUN rm -rf /app/dist/public/images
 
 FROM node:22-slim
 

src/website/Dockerfile.assets

@@ -8,7 +8,7 @@
     "start": "node dist/server.js",
     "build": "tsc",
     "views": "cp -r src/views dist",
-    "public": "cp -r src/public dist; mkdir -p dist/public/images/uploads",
+    "public": "cp -r src/public dist",
     "dist": "npm run views; npm run public",
     "deploy": "npm run build; npm run dist",
     "clean": "rm -rf dist",

src/website/package.json

@@ -1,10 +1,12 @@
 import express from 'express'
 import admin from './routes/admin.js'
 import auth from './routes/auth.js'
+import images from './routes/images.js'
 
 const router = express.Router()
 
 router.use('/admin', admin)
 router.use('/auth', auth)
+router.use('/images', images)
 
 export default router

src/website/src/api/api.ts

@@ -1,17 +1,13 @@
 import express from 'express'
-import fs from 'fs'
-import path from 'path'
 import authenticator from '../../lib/middleware/authentication.js'
 import rateLimiter from '../../lib/middleware/rate-limiter.js'
 import {
-  dist,
-  imagesDirectory,
   imageSizeBig,
   imageSizeSmall,
-  uploadDirectory,
 } from '../../lib/constants/constants.js'
 import House from '../../models/house-model.js'
 import Meta from '../../models/meta-model.js'
+import TemporaryPhoto from '../../models/temporary-photo-model.js'
 import sharp from 'sharp'
 import uploader from '../../lib/middleware/uploader.js'
 
@@ -40,43 +36,40 @@ router.post(
       return res.status(400).redirect('/')
     }
 
-    let photoCounter = 1
-
     for (const photo of files) {
-      await sharp(photo.buffer)
+      const buffer = await sharp(photo.buffer)
         .resize({
           width: imageSizeBig,
           height: imageSizeSmall,
         })
         .rotate(90)
         .webp({ quality: 80 })
-        .toFile(
-          path.join(dist, uploadDirectory, `/photo${photoCounter++}.webp`)
-        )
+        .toBuffer()
+
+      const temporaryPhoto = new TemporaryPhoto({
+        data: buffer,
+        contentType: 'image/webp',
+      })
+      await temporaryPhoto.save()
     }
 
     res.status(201).redirect('/')
   }
 )
 
 router.post('/clearPhotos', rateLimiter, authenticator, async (_req, res) => {
-  fs.readdir(path.join(dist, uploadDirectory), (_err, files) => {
-    for (const file of files) {
-      fs.unlinkSync(path.join(dist, uploadDirectory, file))
-    }
-
-    res.status(200).redirect('/')
-  })
+  await TemporaryPhoto.deleteMany({}).exec()
+  res.status(200).redirect('/')
 })
 
 router.post('/addHouse', rateLimiter, authenticator, async (req, res) => {
-  let num_photos = fs.readdirSync(path.join(dist, uploadDirectory)).length
+  const temporaryPhotos = await TemporaryPhoto.find().exec()
 
-  if (num_photos >= 1) {
+  if (temporaryPhotos.length >= 1) {
     let id = req.body.id
 
     if (!id) {
-      id = Date.now()
+      id = Date.now().toString()
     }
 
     const house = new House({
@@ -94,19 +87,15 @@ router.post('/addHouse', rateLimiter, authenticator, async (req, res) => {
       dinningroom: !!req.body.dinningroom,
       balcony: !!req.body.balcony,
       gardin: !!req.body.gardin,
-      photos: num_photos,
+      photos: temporaryPhotos.length,
+      images: temporaryPhotos.map((p) => ({
+        data: p.data,
+        contentType: p.contentType,
+      })),
     })
 
-    fs.mkdirSync(path.join(dist, imagesDirectory, id))
-    const files = fs.readdirSync(path.join(dist, uploadDirectory))
-    for (const file of files) {
-      fs.renameSync(
-        path.join(dist, uploadDirectory, file),
-        path.join(dist, imagesDirectory, id, file)
-      )
-    }
-
     await house.save()
+    await TemporaryPhoto.deleteMany({}).exec()
 
     res.redirect('/')
   } else {
@@ -136,18 +125,7 @@ router.post('/toggleHouse', rateLimiter, authenticator, async (req, res) => {
 })
 
 router.post('/removeHouse', rateLimiter, authenticator, async (req, res) => {
-  const directory = path
-    .join(dist, imagesDirectory, req.body.id)
-    .replace(/^(\.\.(\/|\\|$))+/, '')
-
   await House.deleteOne({ id: req.body.id }).exec()
-
-  const files = fs.readdirSync(directory)
-  for (const file of files) {
-    fs.unlinkSync(path.join(directory, file))
-  }
-  fs.rmdirSync(directory)
-
   res.redirect('/')
 })
 

src/website/src/api/routes/admin.ts

@@ -0,0 +1,29 @@
+import express from 'express'
+import House from '../../models/house-model.js'
+import TemporaryPhoto from '../../models/temporary-photo-model.js'
+
+const router = express.Router()
+
+router.get('/temporary/:index', async (req, res) => {
+  const index = parseInt(req.params.index) - 1
+  const temporaryPhotos = await TemporaryPhoto.find().exec()
+  if (temporaryPhotos && temporaryPhotos[index]) {
+    res.contentType(temporaryPhotos[index].contentType)
+    res.send(temporaryPhotos[index].data)
+  } else {
+    res.status(404).end()
+  }
+})
+
+router.get('/house/:id/:index', async (req, res) => {
+  const index = parseInt(req.params.index) - 1
+  const house = await House.findOne({ id: req.params.id }).exec()
+  if (house && house.images && house.images[index]) {
+    res.contentType(house.images[index].contentType)
+    res.send(house.images[index].data)
+  } else {
+    res.status(404).end()
+  }
+})
+
+export default router

src/website/src/api/routes/images.ts

@@ -1,10 +1,5 @@
 import path from 'path'
 
-const dist = path.resolve('dist')
-
-const imagesDirectory = '/public/images'
-const uploadDirectory = imagesDirectory + '/uploads'
-
 const numberItems = 9
 const paginationNumber = 5
 
@@ -17,9 +12,6 @@ const ROOM = 1
 const APARTMENT = 2
 
 export {
-  dist,
-  imagesDirectory,
-  uploadDirectory,
   numberItems,
   paginationNumber,
   imageSizeSmall,