Dockerize project with client and backend support (#55)

* set redis backend url automatically for docker builds

* initial docker build config

* rename docker scripts

* fix script paths

* remove old Dockerfiles

* set vite proxy base url depending on mode

* docker build config for client/

* docker production build for client

* refactor docker files

* update nginx config to set maximum file size

* reduce docker image size

* fix demucs bug in docker

* fix proxy timeout

* add gpu capabality for api container

* add compose files for dev and prod

* add healthcheck for freqsplit-api

* add model checkpoints to api image

* set healthcheck retries to 24

client/.env

@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://localhost:8000
+VITE_WS_BASE_URL=ws://localhost:8000

client/.env.docker

@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://backend:8000
+VITE_WS_BASE_URL=ws://backend:8000

client/.gitignore

@@ -35,7 +35,6 @@ Thumbs.db
 .vite/
 
 ### Environment Variables ###
-.env
 .env.local
 .env.*.local
 

client/Dockerfile

@@ -0,0 +1,27 @@
+FROM node:20 AS builder
+
+WORKDIR /app
+
+# Copy and install dependencies
+COPY client/package.json client/package-lock.json* ./
+RUN npm install
+
+# Copy the source code
+COPY client/ .
+
+# Build the app using docker mode env
+ENV NODE_ENV=production
+RUN npm run build -- --mode docker
+
+# Stage 2: Serve with nginx
+FROM nginx:stable-alpine AS production
+
+# Copy built frontend from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+

client/vite.config.ts

@@ -1,20 +1,25 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:8000',
-        changeOrigin: true,
+export default defineConfig(({ mode }) => {
+  // Load env file based on mode (e.g. development, production, docker)
+  const env = loadEnv(mode, process.cwd())
+
+  return {
+    plugins: [react()],
+    server: {
+      proxy: {
+        '/api': {
+          target: env.VITE_API_BASE_URL,
+          changeOrigin: true,
+        },
+        '/ws': {
+          target: env.VITE_WS_BASE_URL,
+          ws: true,
+          changeOrigin: true,
+        },
       },
-      '/ws': {
-        target: "ws://localhost:8000",
-        ws: true,
-        changeOrigin: true,
-      }
     },
-  },
+  }
 })
+