From cd4619845b83dd7d5bcd039b7ddeaf023eb42a84 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Mon, 16 Sep 2024 18:10:58 +0200
Subject: [PATCH] feat: add nginx proxy (#1073)

* feat: add nginx proxy

* fix: adjust path for websocket client to connect
---
 Dockerfile                                    | 10 ++++++-
 .../app/[locale]/_client-providers/trpc.tsx   |  5 +++-
 nginx.conf                                    | 27 +++++++++++++++++++
 scripts/run.sh                                |  7 +++++
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 nginx.conf

diff --git a/Dockerfile b/Dockerfile
index a0e2c5949..635a03172 100644
--- a/Dockerfile
+++ b/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'
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
index 8583ac24f..c08542590 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
+++ b/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) {
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 000000000..25e571394
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/scripts/run.sh b/scripts/run.sh
index 10ac35a5e..41779881b 100644
--- a/scripts/run.sh
+++ b/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 &