feat: add nginx proxy (#1073)

* feat: add nginx proxy

* fix: adjust path for websocket client to connect

Dockerfile

@@ -61,7 +61,8 @@ RUN corepack enable pnpm && pnpm build
 FROM base AS runner
 WORKDIR /app
 
-RUN apk add --no-cache redis bash
+# gettext is required for envsubst
+RUN apk add --no-cache redis nginx bash gettext
 RUN mkdir /appdata
 RUN mkdir /appdata/db
 RUN mkdir /appdata/redis
@@ -79,6 +80,11 @@ RUN chmod +x /usr/bin/homarr
 
 # Don't run production as root
 RUN chown -R nextjs:nodejs /appdata
+RUN mkdir -p /var/cache/nginx && chown -R nextjs:nodejs /var/cache/nginx && \
+    mkdir -p /var/log/nginx && chown -R nextjs:nodejs /var/log/nginx && \
+    mkdir -p /var/lib/nginx && chown -R nextjs:nodejs /var/lib/nginx && \
+    touch /run/nginx/nginx.pid && chown -R nextjs:nodejs /run/nginx/nginx.pid && \
+    mkdir -p /etc/nginx/templates /etc/nginx/ssl/certs && chown -R nextjs:nodejs /etc/nginx
 USER nextjs
 
 COPY --from=installer /app/apps/nextjs/next.config.mjs .
@@ -97,6 +103,8 @@ COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/.next/static ./apps
 COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/public ./apps/nextjs/public
 COPY --chown=nextjs:nodejs scripts/run.sh ./run.sh
 COPY --chown=nextjs:nodejs packages/redis/redis.conf /app/redis.conf
+COPY --chown=nextjs:nodejs nginx.conf /etc/nginx/templates/nginx.conf
+
 
 ENV DB_URL='/appdata/db/db.sqlite'
 ENV DB_DIALECT='sqlite'

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -20,7 +20,10 @@ import type { AppRouter } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 
 const wsClient = createWSClient({
-  url: typeof window === "undefined" ? "ws://localhost:3001" : `ws://${window.location.hostname}:3001`,
+  url:
+    typeof window === "undefined"
+      ? "ws://localhost:3001/websockets"
+      : `ws://${window.location.hostname}:${window.location.port}/websockets`,
 });
 
 export function TRPCReactProvider(props: PropsWithChildren) {

nginx.conf

@@ -0,0 +1,27 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    server {
+        listen 7575;
+
+        # Route websockets traffic to port 3001
+        location /websockets {
+            proxy_pass http://${HOSTNAME}:3001;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_set_header Host $http_host;
+        }
+
+        # Route all other traffic to port 3000
+        location / {
+            proxy_pass http://${HOSTNAME}:3000;
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+    }
+}

scripts/run.sh

@@ -1,6 +1,13 @@
 # Run migrations
 node ./db/migrations/$DB_DIALECT/migrate.cjs ./db/migrations/$DB_DIALECT
 
+# Start nginx proxy
+# 1. Replace the HOSTNAME in the nginx template file
+# 2. Create the nginx configuration file from the template
+# 3. Start the nginx server
+envsubst '${HOSTNAME}' < /etc/nginx/templates/nginx.conf > /etc/nginx/nginx.conf
+nginx -g 'daemon off;' &
+
 # Start Redis
 redis-server /app/redis.conf &