feat(DevOps): ⚡ add nginx reverse proxy

docker-compose.yaml

@@ -3,8 +3,8 @@ services:
     image: docker.io/searxng/searxng:latest
     volumes:
       - ./searxng:/etc/searxng:rw
-    ports:
+    # ports:
-      - 4000:8080
+    #   - 4000:8080
     networks:
       - perplexica-network
 
@@ -16,8 +16,8 @@ services:
         - SEARXNG_API_URL=http://searxng:8080
     depends_on:
       - searxng
-    ports:
+    # ports:
-      - 3001:3001
+    #   - 3001:3001
     networks:
       - perplexica-network
 
@@ -26,12 +26,29 @@ services:
       context: .
       dockerfile: app.dockerfile
       args:
-        - NEXT_PUBLIC_API_URL=http://127.0.0.1:3001/api
+        - NEXT_PUBLIC_API_URL=/api
-        - NEXT_PUBLIC_WS_URL=ws://127.0.0.1:3001
+        - NEXT_PUBLIC_WS_URL=
     depends_on:
       - perplexica-backend
+    # ports:
+    #   - 3000:3000
+    networks:
+      - perplexica-network
+  
+  nginx:
+    image: nginx:latest
+    restart: always
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
+      - ./nginx/proxy.conf:/etc/nginx/proxy.conf
+      - ./nginx/conf.d:/etc/nginx/conf.d
+      #- ./nginx/ssl:/etc/ssl
+    depends_on:
+      - perplexica-frontend
+      - perplexica-backend
     ports:
-      - 3000:3000
+      - "8090:80"
+      #- "443:443"
     networks:
       - perplexica-network
 

nginx/conf.d/default.conf

@@ -0,0 +1,30 @@
+server {
+    listen 80;
+    server_name _;
+
+    location /api {
+      proxy_pass http://perplexica-backend:3001;
+      include proxy.conf;
+    }
+
+    location /ws {
+      proxy_pass http://perplexica-backend:3001;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+    }
+
+    location / {
+      proxy_pass http://perplexica-frontend:3000;
+      include proxy.conf;
+    }
+
+    # If you want to support HTTPS, please uncomment the code snippet below
+    #listen 443 ssl;
+    #ssl_certificate ./../ssl/your_cert_file.cer;
+    #ssl_certificate_key ./../ssl/your_cert_key.key;
+    #ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
+    #ssl_prefer_server_ciphers on;
+    #ssl_session_cache shared:SSL:10m;
+    #ssl_session_timeout 10m;
+}

nginx/nginx.conf

@@ -0,0 +1,24 @@
+user  nginx;
+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log  /var/log/nginx/access.log  main;
+    sendfile        on;
+    #tcp_nopush     on;
+    keepalive_timeout  65;
+    #gzip  on;
+    client_max_body_size 15M;
+    include /etc/nginx/conf.d/*.conf;
+}

nginx/proxy.conf

@@ -0,0 +1,8 @@
+proxy_set_header Host $host;
+proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto $scheme;
+proxy_http_version 1.1;
+proxy_set_header Connection "";
+proxy_buffering off;
+proxy_read_timeout 3600s;
+proxy_send_timeout 3600s;

nginx/ssl/.gitkeep

@@ -0,0 +1 @@
+

ui/components/ChatWindow.tsx

@@ -141,7 +141,11 @@ const ChatWindow = () => {
   const initialMessage = searchParams.get('q');
 
   const [isReady, setIsReady] = useState(false);
-  const ws = useSocket(process.env.NEXT_PUBLIC_WS_URL!, setIsReady);
+  const publicHostname = typeof window !== 'undefined' && window.location.hostname;
+  const publicPort = typeof window !== 'undefined' && window.location.port;
+  const publicUrl = `${publicHostname}${publicPort ? `:${publicPort}` : ''}`;
+  const webSocketUrl = process.env.NEXT_PUBLIC_WS_URL || `ws://${publicUrl}/ws`;
+  const ws = useSocket(webSocketUrl, setIsReady);
 
   const [chatHistory, setChatHistory] = useState<[string, string][]>([]);
   const [messages, setMessages] = useState<Message[]>([]);