Merge pull request #28 from theoleuthardt/fix/deployment

fix: frontend and backend now get variables at build time not runtime

.github/workflows/deploy.yml

@@ -39,6 +39,8 @@ jobs:
           context: ./frontend
           push: true
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/werkzeugkiste-frontend:latest
+          build-args: |
+            NEXT_PUBLIC_BACKEND_URL=${{ secrets.NEXT_PUBLIC_BACKEND_URL }}
 
       - name: Build and Push Backend
         uses: docker/build-push-action@v6
@@ -46,6 +48,8 @@ jobs:
           context: ./backend
           push: true
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/werkzeugkiste-backend:latest
+          build-args: |
+            CORS_ALLOWED_ORIGIN=${{ secrets.CORS_ALLOWED_ORIGIN }}
 
   deploy-on-server:
     needs: docker-build-push

backend/Dockerfile

@@ -61,7 +61,11 @@ USER fastify
 
 EXPOSE 4000
 
+ARG CORS_ALLOWED_ORIGIN
+ENV CORS_ALLOWED_ORIGIN=$CORS_ALLOWED_ORIGIN
+
 ENV PORT=4000
 ENV HOSTNAME="0.0.0.0"
 
+
 CMD ["node", "dist/server.js"]

backend/server.ts

@@ -10,10 +10,6 @@ import { generateQRCode } from "./src/routes/generateqrcode.route";
 import { wordCounter } from "./src/routes/wordcounter.route";
 import { videoToAudio } from "./src/routes/videotoaudio.route";
 import { removeBG } from "./src/routes/removebg.route";
-import dotenv from "dotenv";
-import path from "node:path";
-
-dotenv.config({ path: path.resolve(__dirname, "../.env") });
 
 const app = Fastify({ logger: true });
 
@@ -38,4 +34,5 @@ console.log("Starting Fastify server...");
 const PORT = process.env.BACKEND_PORT;
 app.listen({ port: Number(PORT), host: "0.0.0.0" }, () => {
   console.log(`🚀Fastify is live on http://localhost:${PORT}`);
+  console.log(`Allowed origin: ${process.env.CORS_ALLOWED_ORIGIN}`);
 });

docker-compose.yaml

@@ -1,30 +1,32 @@
 services:
   frontend:
+    env_file: .env
     build:
       context: ./frontend
       dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_BACKEND_URL: ${NEXT_PUBLIC_BACKEND_URL}
     container_name: werkzeugkiste-frontend
-    env_file: .env
     environment:
       - NODE_ENV=${NODE_ENV}
       - HOSTNAME=${HOSTNAME}
       - PORT=${FRONTEND_PORT}
-      - NEXT_PUBLIC_BACKEND_URL=${NEXT_PUBLIC_BACKEND_URL}
     ports:
       - "${FRONTEND_PORT}:3000"
     restart: unless-stopped
 
   backend:
+    env_file: .env
     build:
       context: ./backend
       dockerfile: Dockerfile
+      args:
+        CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
     container_name: werkzeugkiste-backend
-    env_file: .env
     environment:
       - NODE_ENV=${NODE_ENV}
       - HOSTNAME=${HOSTNAME}
       - PORT=${BACKEND_PORT}
-      - CORS_ALLOWED_ORIGIN=${CORS_ALLOWED_ORIGIN}
     ports:
       - "${BACKEND_PORT}:4000"
     restart: unless-stopped

frontend/Dockerfile

@@ -24,6 +24,9 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+ARG NEXT_PUBLIC_BACKEND_URL
+ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
@@ -52,13 +55,15 @@ RUN adduser --system --uid 1001 nextjs
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
-USER nextjs
+USER root
 
 EXPOSE 3000
 
 ENV PORT=3000
-
-# server.js is created by next build from the standalone output
-# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
 ENV HOSTNAME="0.0.0.0"
-CMD ["node", "server.js"]
+
+COPY entrypoint.sh /entrypoint.sh
+
+RUN chmod +x /entrypoint.sh
+
+CMD ["/entrypoint.sh"]

frontend/entrypoint.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+echo "NEXT_PUBLIC_BACKEND_URL: $NEXT_PUBLIC_BACKEND_URL"
+exec node server.js

frontend/next.config.ts

@@ -1,7 +1,4 @@
 import type { NextConfig } from "next";
-import dotenv from "dotenv";
-
-dotenv.config({ path: "../.env" });
 
 const nextConfig: NextConfig = {
   output: "standalone",