fix: configure docker compose and fastify cors with .env file for local and production environment

.env

@@ -0,0 +1,7 @@
+####### LOCAL DEVELOPMENT #######
+NODE_ENV=development
+HOSTNAME=0.0.0.0
+FRONTEND_PORT=3000
+BACKEND_PORT=4000
+BACKEND=http://localhost:4000
+CORS_ALLOWED_ORIGIN=http://localhost:3000

.gitignore

@@ -32,7 +32,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+frontend/.env
+backend/.env
 
 # vercel
 .vercel

backend/server.ts

@@ -14,7 +14,7 @@ import { removeBG } from "./src/routes/removebg.route";
 const app = Fastify({ logger: true });
 
 app.register(cors, {
-  origin: "*",
+  origin: process.env.CORS_ALLOWED_ORIGIN || "*",
   exposedHeaders: "Content-Disposition",
   methods: "POST",
   allowedHeaders: "Content-Type",

docker-compose.yaml

@@ -4,13 +4,14 @@ services:
       context: ./frontend
       dockerfile: Dockerfile
     container_name: werkzeugkiste-frontend
+    env_file: .env
     environment:
-      - NODE_ENV=production
-      - HOSTNAME=0.0.0.0
-      - PORT=3000
-      - backend_url=http://backend:4000
+      - NODE_ENV=${NODE_ENV}
+      - HOSTNAME=${HOSTNAME}
+      - PORT=${FRONTEND_PORT}
+      - BACKEND_URL=${BACKEND}
     ports:
-      - "3000:3000"
+      - "${FRONTEND_PORT}:3000"
     restart: unless-stopped
 
   backend:
@@ -18,13 +19,14 @@ services:
       context: ./backend
       dockerfile: Dockerfile
     container_name: werkzeugkiste-backend
+    env_file: .env
     environment:
-      - NODE_ENV=production
-      - HOSTNAME=0.0.0.0
-      - PORT=4000
-      - CORS_ORIGIN=http://frontend:3000
+      - NODE_ENV=${NODE_ENV}
+      - HOSTNAME=${HOSTNAME}
+      - PORT=${BACKEND_PORT}
+      - CORS_ALLOWED_ORIGIN=${CORS_ALLOWED_ORIGIN}
     ports:
-      - "4000:4000"
+      - "${BACKEND_PORT}:4000"
     restart: unless-stopped
 
 networks:

frontend/next.config.ts

@@ -3,7 +3,7 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   output: "standalone",
   env: {
-    backend_url: "http://localhost:4000",
+    backend_url: process.env.BACKEND_URL || "http://localhost:4000",
   },
 };