Fix web socket requests can not be proxied

client/src/context/Data.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react';
 import { io, Socket } from 'socket.io-client';
 import { authContext } from '@/context';
-import { url, CollectionService, MilvusService, DatabaseService } from '@/http';
+import { CollectionService, MilvusService, DatabaseService } from '@/http';
 import {
   IndexCreateParam,
   IndexManageParam,
@@ -394,8 +394,9 @@ export const DataProvider = (props: { children: React.ReactNode }) => {
     if (isAuth) {
       // update database get from auth
       setDatabase(authReq.database);
-      // connect to socket server
-      socket.current = io(url as string);
+
+      // create socket
+      socket.current = io();
       // register client
       socket.current.emit(WS_EVENTS.REGISTER, clientId);
 

client/src/http/Axios.ts

@@ -2,12 +2,10 @@ import axios from 'axios';
 import { MILVUS_CLIENT_ID } from '@/consts';
 
 // base hots url
-const DEFAULT_HOST_URL = `http://127.0.0.1:3000`;
-
 const hostUrl: { [key: string]: string | undefined } = {
-  development: DEFAULT_HOST_URL,
+  development: ``,
   production: ((window as any)._env_ && (window as any)._env_.HOST_URL) || '',
-  electron: DEFAULT_HOST_URL,
+  electron: `http://127.0.0.1:3000`,
 };
 
 const isElectron =

client/src/http/Collection.service.ts

@@ -21,7 +21,7 @@ export class CollectionService extends BaseModel {
   static getCollections(data?: {
     type: ShowCollectionsType;
   }): Promise<CollectionObject[]> {
-    return super.findAll({ path: '/collections', params: data || {} });
+    return super.findAll({ path: `/collections`, params: data || {} });
   }
 
   static getCollection(collectionName: string) {

client/src/http/Milvus.service.ts

@@ -5,41 +5,41 @@ import { AuthReq, AuthObject } from '@server/types';
 export class MilvusService extends BaseModel {
   static connect(data: AuthReq) {
     return super.create({
-      path: '/milvus/connect',
+      path: `/milvus/connect`,
       data,
     }) as Promise<AuthObject>;
   }
 
   static closeConnection() {
-    return super.create({ path: '/milvus/disconnect' });
+    return super.create({ path: `/milvus/disconnect` });
   }
 
   static getVersion() {
-    return super.search({ path: '/milvus/version', params: {} });
+    return super.search({ path: `/milvus/version`, params: {} });
   }
 
   static check(address: string) {
     return super.search({
-      path: '/milvus/check',
+      path: `/milvus/check`,
       params: { address },
     }) as Promise<{ connected: boolean }>;
   }
 
   static getMetrics() {
     return super.search({
-      path: '/milvus/metrics',
+      path: `/milvus/metrics`,
       params: {},
     });
   }
 
   static triggerCron(data: CronJobObject) {
     return super.update({
-      path: '/crons',
+      path: `/crons`,
       data,
     });
   }
 
   static useDatabase(data: { database: string }) {
-    return super.create({ path: '/milvus/usedb', data });
+    return super.create({ path: `/milvus/usedb`, data });
   }
 }

client/src/http/Prometheus.service.ts

@@ -1,8 +1,8 @@
 import BaseModel from './BaseModel';
 
 export class PrometheusService extends BaseModel {
-  static SET_PROMETHEUS_URL = '/prometheus/setPrometheus';
-  static GET_MILVUS_HEALTHY_DATA_URL = '/prometheus/getMilvusHealthyData';
+  static SET_PROMETHEUS_URL = `/prometheus/setPrometheus`;
+  static GET_MILVUS_HEALTHY_DATA_URL = `/prometheus/getMilvusHealthyData`;
 
   static setPrometheus({
     prometheusAddress,

client/src/http/User.service.ts

@@ -13,7 +13,7 @@ import { Users, UsersWithRoles } from '@server/types';
 export class UserService extends BaseModel {
   // get user data
   static getUsers() {
-    return super.search<Users>({ path: '/users', params: {} });
+    return super.search<Users>({ path: `/users`, params: {} });
   }
 
   // get all roles
@@ -23,12 +23,12 @@ export class UserService extends BaseModel {
 
   // create user
   static createUser(data: CreateUserParams) {
-    return super.create({ path: '/users', data });
+    return super.create({ path: `/users`, data });
   }
 
   // update user (pass)
   static updateUser(data: UpdateUserParams) {
-    return super.update({ path: '/users', data });
+    return super.update({ path: `/users`, data });
   }
 
   // delete user

client/vite.config.mts

@@ -13,6 +13,16 @@ export default defineConfig({
   },
   server: {
     port: 3001,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+      '/socket.io': {
+        target: 'http://localhost:3000',
+        ws: true,
+      },
+    },
   },
   plugins: [
     reactRefresh(),

doc/use-attu-behind-proxy.md

@@ -0,0 +1,89 @@
+# Using Attu Behind a Proxy with Nginx
+
+This document provides instructions on how to configure Nginx to proxy requests to Attu, a web-based GUI for Milvus.
+
+## Prerequisites
+
+1. **Nginx**: Ensure Nginx is installed on your server. You can install it using your package manager:
+
+```bash
+sudo apt-get install nginx # For Debian/Ubuntu
+sudo yum install nginx # For CentOS/RHEL
+brew install nginx # For Mac OS
+```
+
+2. **Attu**:
+
+```bash
+docker run -p 3000:3000 -e HOST_URL=http://localhost:8080/attu zilliz/attu:dev
+```
+
+The `HOST_URL` environment variable specifies the URL where Attu is hosted. In this case, it is set to `http://localhost:8080/attu/`.
+
+## Nginx Configuration
+
+1. Open your Nginx configuration file for editing. This is typically located at `/etc/nginx/nginx.conf` or in the `/etc/nginx/sites-available/` directory.
+
+2. Add the following server block configuration:
+
+```nginx
+server {
+  listen 8080;
+  server_name localhost;
+
+  location /attu/ {
+    proxy_pass http://localhost:3000/;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "Upgrade";
+    proxy_set_header Host $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;
+  }
+
+  location /socket.io/ {
+    proxy_pass http://localhost:3000/socket.io/;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "Upgrade";
+    proxy_set_header Host $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;
+  }
+}
+```
+
+This configuration sets up a proxy for Attu running on `localhost:3000` and maps it to `localhost:8080/attu/`, directing all requests to the specified location.
+
+3. Save the configuration file and exit the editor.
+
+## Restart Nginx
+
+After updating the Nginx configuration, restart the Nginx service to apply the changes:
+
+```bash
+sudo systemctl restart nginx # for Debian/Ubuntu
+sudo systemctl restart nginx # for CentOS/RHEL
+brew services restart nginx # for Mac OS
+```
+
+## Access Attu
+
+You can now access Attu through the proxy at `http://localhost:8080/attu/`.
+
+## Troubleshooting
+
+- **Nginx Fails to Start**: Check the Nginx error logs located at `/var/log/nginx/error.log` for any configuration errors.
+- **Attu Not Accessible**: Ensure that Attu is running on the specified port and that there are no firewall rules blocking access.
+
+## Conclusion
+
+By following these steps, you can configure Nginx to proxy requests to Attu, allowing you to use Attu behind a proxy server. This setup is useful for environments where direct access to Attu is restricted or when you want to centralize access through a single entry point.
+
+For further assistance, refer to the official [Nginx documentation](https://nginx.org/en/docs/) and [Attu documentation](https://github.com/milvus-io/attu).
+
+---
+
+Feel free to modify this document according to your specific requirements.