From b84c98983d6f638f44327b20e4df760fd9f7dc33 Mon Sep 17 00:00:00 2001 From: Jaswanth Karani Date: Sat, 14 Sep 2024 06:57:14 +0530 Subject: [PATCH] Made cogen react ui to use runtime environment variables (#807) Signed-off-by: jaswanth8888 Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- .../docker_compose/intel/cpu/xeon/README.md | 19 +++++++++++++++++++ .../docker_compose/intel/hpu/gaudi/README.md | 9 ++++++--- CodeGen/ui/docker/Dockerfile.react | 11 ++++------- CodeGen/ui/react/.env.production | 1 + CodeGen/ui/react/env.sh | 13 +++++++++++++ 5 files changed, 43 insertions(+), 10 deletions(-) create mode 100644 CodeGen/ui/react/.env.production create mode 100644 CodeGen/ui/react/env.sh diff --git a/CodeGen/docker_compose/intel/cpu/xeon/README.md b/CodeGen/docker_compose/intel/cpu/xeon/README.md index 8ced06b57e..e5df12937b 100644 --- a/CodeGen/docker_compose/intel/cpu/xeon/README.md +++ b/CodeGen/docker_compose/intel/cpu/xeon/README.md @@ -52,6 +52,24 @@ Then run the command `docker images`, you will have the following 3 Docker Image - `opea/codegen:latest` - `opea/codegen-ui:latest` +### 8. Build CodeGen React UI Docker Image (Optional) + +Build react frontend Docker image via below command: + +**Export the value of the public IP address of your Xeon server to the `host_ip` environment variable** + +```bash +cd GenAIExamples/CodeGen/ui +docker build --no-cache -t opea/codegen-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react . +``` + +Then run the command `docker images`, you will have the following 3 Docker Images: + +- `opea/llm-tgi:latest` +- `opea/codegen:latest` +- `opea/codegen-ui:latest` +- `opea/codegen-react-ui:latest` (optional) + ## 🚀 Start Microservices and MegaService The CodeGen megaservice manages a single microservice called LLM within a Directed Acyclic Graph (DAG). In the diagram above, the LLM microservice is a language model microservice that generates code snippets based on the user's input query. The TGI service serves as a text generation interface, providing a RESTful API for the LLM microservice. The CodeGen Gateway acts as the entry point for the CodeGen application, invoking the Megaservice to generate code snippets in response to the user's input query. @@ -167,6 +185,7 @@ codegen-xeon-react-ui-server: - no_proxy=${no_proxy} - https_proxy=${https_proxy} - http_proxy=${http_proxy} + - APP_CODE_GEN_URL=${BACKEND_SERVICE_ENDPOINT} depends_on: - codegen-xeon-backend-server ports: diff --git a/CodeGen/docker_compose/intel/hpu/gaudi/README.md b/CodeGen/docker_compose/intel/hpu/gaudi/README.md index b67144525e..6e093e5c25 100644 --- a/CodeGen/docker_compose/intel/hpu/gaudi/README.md +++ b/CodeGen/docker_compose/intel/hpu/gaudi/README.md @@ -38,13 +38,15 @@ cd GenAIExamples/CodeGen/ui docker build -t opea/codegen-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . ``` -### 5. Build the React UI Docker Image +### 8. Build CodeGen React UI Docker Image (Optional) -Construct the React frontend Docker image via the command below: +Build react frontend Docker image via below command: + +**Export the value of the public IP address of your Xeon server to the `host_ip` environment variable** ```bash cd GenAIExamples/CodeGen/ui -docker build -t opea/codegen-react-ui:latest --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT -f ./docker/Dockerfile.react . +docker build --no-cache -t opea/codegen-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react . ``` Then run the command `docker images`, you will have the following 3 Docker images: @@ -160,6 +162,7 @@ codegen-gaudi-react-ui-server: - no_proxy=${no_proxy} - https_proxy=${https_proxy} - http_proxy=${http_proxy} + - APP_CODE_GEN_URL=${BACKEND_SERVICE_ENDPOINT} depends_on: - codegen-gaudi-backend-server ports: diff --git a/CodeGen/ui/docker/Dockerfile.react b/CodeGen/ui/docker/Dockerfile.react index 04bb59fa1d..49bc13124c 100644 --- a/CodeGen/ui/docker/Dockerfile.react +++ b/CodeGen/ui/docker/Dockerfile.react @@ -4,21 +4,18 @@ # Use node 20.11.1 as the base image FROM node:20.11.1 as vite-app -COPY . /usr/app +COPY react /usr/app/react WORKDIR /usr/app/react -ARG BACKEND_SERVICE_ENDPOINT -ENV VITE_CODE_GEN_URL=$BACKEND_SERVICE_ENDPOINT RUN ["npm", "install"] RUN ["npm", "run", "build"] FROM nginx:alpine -EXPOSE 80 - -COPY --from=vite-app /usr/app/react/nginx.conf /etc/nginx/conf.d/default.conf COPY --from=vite-app /usr/app/react/dist /usr/share/nginx/html +COPY ./react/env.sh /docker-entrypoint.d/env.sh -ENTRYPOINT ["nginx", "-g", "daemon off;"] \ No newline at end of file +COPY ./react/nginx.conf /etc/nginx/conf.d/default.conf +RUN chmod +x /docker-entrypoint.d/env.sh \ No newline at end of file diff --git a/CodeGen/ui/react/.env.production b/CodeGen/ui/react/.env.production new file mode 100644 index 0000000000..d3851cd494 --- /dev/null +++ b/CodeGen/ui/react/.env.production @@ -0,0 +1 @@ +VITE_CODE_GEN_URL=APP_CODE_GEN_URL \ No newline at end of file diff --git a/CodeGen/ui/react/env.sh b/CodeGen/ui/react/env.sh new file mode 100644 index 0000000000..ff6325d74d --- /dev/null +++ b/CodeGen/ui/react/env.sh @@ -0,0 +1,13 @@ +#!/bin/sh +# Copyright (C) 2024 Intel Corporation +# SPDX-License-Identifier: Apache-2.0 + +for i in $(env | grep APP_) #// Make sure to use the prefix APP_ if you have any other prefix in env.production file variable name replace it with APP_ +do + key=$(echo $i | cut -d '=' -f 1) + value=$(echo $i | cut -d '=' -f 2-) + echo $key=$value + + # sed JS and CSS only + find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' + +done