Run the GUI next.js application using docker compose (#1092)

* Configure docker compose with the next.js app

* Modify the documentation for running gui

* Add brief installation method using docker compose at the README.md

Author: vkehfdl1

README.md

@@ -43,6 +43,12 @@ Your Optimized RAG pipeline is just a few clicks away.
 
 Click the docs to use the AutoRAG GUI beta version! [AutoRAG GUI Docs](https://docs.auto-rag.com/gui/gui.html).
 
+### GUI Installation
+
+1. Clone the repository
+2. Run Docker Compose `docker compose up -d`
+3. Access the GUI at `http://localhost:3000`
+
 ---
 
 ## YouTube Tutorial

api/app.py

@@ -66,17 +66,19 @@
 )
 logger = logging.getLogger(__name__)
 
+cors_list = ["http://localhost:3000", "http://app:3000"]
+
 # CORS 설정
 app = cors(
     app,
-    allow_origin=["http://localhost:3000"],
+    allow_origin=cors_list,
     allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
     allow_headers=["Content-Type", "Authorization"],
     allow_credentials=True,
     max_age=3600,
 )
 
-print("CORS enabled for http://localhost:3000")
+print("CORS enabled for http://localhost:3000 and http://app:3000")
 
 ROOT_DIR = os.path.dirname(os.path.dirname(os.path.realpath(__file__)))
 ENV = os.getenv("AUTORAG_API_ENV", "dev")
@@ -106,7 +108,7 @@
 @app.after_request
 def add_cors_headers(response):
     origin = request.headers.get("Origin")
-    if origin == "http://localhost:3000":
+    if origin in cors_list:
         response.headers["Access-Control-Allow-Origin"] = origin
         response.headers["Access-Control-Allow-Credentials"] = "true"
         response.headers["Access-Control-Allow-Headers"] = "Content-Type, Authorization"
@@ -122,7 +124,7 @@ def add_cors_headers(response):
 async def options_handler(path=""):
     response = await make_response("")
     origin = request.headers.get("Origin")
-    if origin == "http://localhost:3000":
+    if origin in cors_list:
         response.headers["Access-Control-Allow-Origin"] = origin
         response.headers["Access-Control-Allow-Credentials"] = "true"
         response.headers["Access-Control-Allow-Headers"] = "Content-Type, Authorization"
@@ -1009,9 +1011,9 @@ async def delete_environment_variable(key: str):
 
 
 @click.command()
-@click.option("--host", type=str, default="127.0.0.1", help="Host IP address")
+@click.option("--host", type=str, default="0.0.0.0", help="Host IP address")
 @click.option("--port", type=int, default=8000, help="Port number")
-def main(host: str = "127.0.0.1", port: int = 8000):
+def main(host: str = "0.0.0.0", port: int = 8000):
     uvicorn.run("app:app", host=host, port=port, reload=True, loop="asyncio")
 
 

autorag-frontend

@@ -5,6 +5,8 @@ services:
     image: redis:latest
     ports:
       - "6379:6379"
+    networks:
+      - app-network
 
   api:
     build:
@@ -27,9 +29,10 @@ services:
       - CELERY_RESULT_BACKEND=redis://redis:6379/0
       - LOG_LEVEL=DEBUG     # 로그 레벨 설정
       - PYTHONUNBUFFERED=1  # Python 출력 버퍼링 비활성화
-
     depends_on:
       - redis
+    networks:
+      - app-network
 
   flower:
     image: mher/flower
@@ -44,6 +47,27 @@ services:
     depends_on:
       - redis
       - api
+    networks:
+      - app-network
+
+  app:
+    build:
+      context: ./autorag-frontend
+      dockerfile: Dockerfile
+      args:
+        - NEXT_PUBLIC_API_URL=http://localhost:8000
+        - NEXT_PUBLIC_HOST_URL=http://localhost
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_API_URL=http://localhost:8000
+      - NEXT_PUBLIC_HOST_URL=http://localhost
+    restart: unless-stopped
+    depends_on:
+      - api
+    networks:
+      - app-network
 
 volumes:
   redis_data:

docker-compose.yml

@@ -18,7 +18,7 @@ Your Optimized RAG pipeline is just a few clicks away.
 
 ## Installation
 
-### Use Docker (from source)
+### Use Docker Compose (from source)
 You can install AutoRAG GUI using Docker and the source from Github.
 
 #### 1. Clone the repository with submodules
@@ -34,7 +34,24 @@ cd AutoRAG
 docker compose up
 ```
 
-#### 3. Build an GUI application and run it
+#### 3. Access the GUI
+
+You can use the GUI by accessing `http://localhost:3000` in your web browser right away.
+
+The project files will be stored in the 'projects' directory in the root directory that you cloned the repository.
+
+## Newbie & Pro version
+
+There are two versions of AutoRAG GUI: Newbie and Pro.
+The Pro version is under construction.
+
+The Newbie version is for the users who are not familiar with RAG or AI at all.
+It provides a simple setting to optimize the RAG pipeline and use it.
+If you are a newbie, feel free to check out the Newbie version.
+
+## Run the GUI application from source
+
+#### 1. Build an GUI application and run it
 
 First, go to the autorag-frontend directory.
 
@@ -57,12 +74,3 @@ npm run start
 ```
 
 That's it!
-
-## Newbie & Pro version
-
-There are two versions of AutoRAG GUI: Newbie and Pro.
-The Pro version is under construction.
-
-The Newbie version is for the users who are not familiar with RAG or AI at all.
-It provides a simple setting to optimize the RAG pipeline and use it.
-If you are a newbie, feel free to check out the Newbie version.