updating svelte app to use nginx

Signed-off-by: SeanCondon <[email protected]>
opea-project · Sep 9, 2024 · 6ff0e67 · 6ff0e67
1 parent 5aca52b
commit 6ff0e67
Show file tree

Hide file tree

Showing 14 changed files with 94 additions and 46 deletions.
diff --git a/ChatQnA/docker/aipc/README.md b/ChatQnA/docker/aipc/README.md
@@ -61,7 +61,7 @@ Build frontend Docker image via below command:
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-ui:latest -f ./docker/Dockerfile .
+docker build --no-cache -t opea/chatqna-ui:latest -f ./docker/Dockerfile . --target svelte-server
 cd ../../../..
 ```
 

diff --git a/ChatQnA/docker/docker_build_compose.yaml b/ChatQnA/docker/docker_build_compose.yaml
@@ -29,12 +29,14 @@ services:
     build:
       context: ui
       dockerfile: ./docker/Dockerfile
+      target: svelte-server
     extends: chatqna
     image: ${REGISTRY:-opea}/chatqna-ui:${TAG:-latest}
   chatqna-conversation-ui:
     build:
       context: ui
-      dockerfile: ./docker/Dockerfile.react
+      dockerfile: ./docker/Dockerfile
+      target: react-server
     extends: chatqna
     image: ${REGISTRY:-opea}/chatqna-conversation-ui:${TAG:-latest}
   embedding-tei:

diff --git a/ChatQnA/docker/gaudi/README.md b/ChatQnA/docker/gaudi/README.md
@@ -129,7 +129,7 @@ Construct the frontend Docker image using the command below:
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
+docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server
 cd ../../../..
 ```
 
@@ -141,7 +141,7 @@ Build frontend Docker image that enables Conversational experience with ChatQnA
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
+docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server
 cd ../../../..
 ```
 

diff --git a/ChatQnA/docker/gpu/README.md b/ChatQnA/docker/gpu/README.md
@@ -60,7 +60,7 @@ Construct the frontend Docker image using the command below:
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
+docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server
 cd ../../../..
 ```
 
@@ -70,7 +70,7 @@ Construct the frontend Docker image using the command below:
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
+docker build --no-cache -t opea/chatqna-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server
 cd ../../../..
 ```
 

diff --git a/ChatQnA/docker/ui/docker/Dockerfile b/ChatQnA/docker/ui/docker/Dockerfile
@@ -2,9 +2,9 @@
 # SPDX-License-Identifier: Apache-2.0
 
 # Use node 20.11.1 as the base image
-FROM node:20.11.1
+FROM node:20.11.1 as svelte-base
 
-# Update package manager and install Git
+# Update package manager and install Git and nginx
 RUN apt-get update -y && apt-get install -y git
 
 # Copy the front-end code repository
@@ -19,8 +19,35 @@ RUN npm install
 # Build the front-end application
 RUN npm run build
 
-# Expose the port of the front-end application
-EXPOSE 5173
+FROM node:20.11.1 as svelte-server
 
-# Run the front-end application in preview mode
-CMD ["npm", "run", "preview", "--", "--port", "5173", "--host", "0.0.0.0"]
+RUN apt-get update -y && apt-get install -y nginx gettext
+
+COPY --from=svelte-base /home/user/svelte/build /home/user/svelte/build
+COPY --from=svelte-base /home/user/svelte/package.json /home/user/svelte
+
+WORKDIR /home/user/svelte
+
+RUN npm install --omit=dev
+
+COPY ./svelte/nginx.conf /tmp/nginx.conf
+
+ENTRYPOINT ["sh", "-c", "envsubst < /tmp/nginx.conf > /etc/nginx/conf.d/default.conf && /usr/sbin/nginx && node /home/user/svelte/build/index.js"]
+
+
+# Use node 20.11.1 as the base image
+FROM node:20.11.1 as react-base
+
+COPY ./react /usr/app/react
+WORKDIR /usr/app/react
+
+RUN ["npm", "install"]
+RUN ["npm", "run", "build"]
+
+
+FROM nginx:alpine as react-server
+
+COPY --from=react-base /usr/app/react/dist /usr/share/nginx/html
+
+COPY ./react/nginx.conf /tmp/nginx.conf
+ENTRYPOINT ["sh", "-c", "envsubst < /tmp/nginx.conf > /etc/nginx/conf.d/default.conf && /usr/sbin/nginx -g 'daemon off;'"]
diff --git a/ChatQnA/docker/ui/docker/Dockerfile.react b/ChatQnA/docker/ui/docker/Dockerfile.react
diff --git a/ChatQnA/docker/ui/svelte/.env.development b/ChatQnA/docker/ui/svelte/.env.development
@@ -0,0 +1,7 @@
+CHAT_BASE_URL = 'http://localhost:8888/v1/chatqna'
+
+UPLOAD_FILE_BASE_URL = 'http://localhost:6007/v1/dataprep'
+
+GET_FILE = 'http://localhost:6007/v1/dataprep/get_file'
+
+DELETE_FILE = 'http://localhost:6007/v1/dataprep/delete_file'
diff --git a/ChatQnA/docker/ui/svelte/nginx.conf b/ChatQnA/docker/ui/svelte/nginx.conf
@@ -0,0 +1,38 @@
+upstream sveltekit {
+  server 127.0.0.1:3000;
+  keepalive 8;
+}
+
+server {
+  listen 5173;
+
+  gzip on;
+  gzip_proxied any;
+  gzip_comp_level 6;
+  gzip_buffers 16 8k;
+  gzip_http_version 1.1;
+  gzip_types font/woff2 text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/svg+xml application/octet-stream;
+
+  location / {
+	proxy_pass http://sveltekit;
+	proxy_redirect off;
+
+	error_page 502 = @static;
+  }
+
+  location "/v1/chatqna" {
+      proxy_pass $CHAT_BASE_URL;
+  }
+
+  location "/v1/dataprep/get_file" {
+      proxy_pass $GET_FILE;
+  }
+
+  location "/v1/dataprep/delete_file" {
+      proxy_pass $DELETE_FILE;
+  }
+
+  location "/v1/dataprep" {
+      proxy_pass $UPLOAD_FILE_BASE_URL;
+  }
+}
diff --git a/ChatQnA/docker/ui/svelte/package.json b/ChatQnA/docker/ui/svelte/package.json
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@fortawesome/free-solid-svg-icons": "6.2.0",
     "@playwright/test": "^1.33.0",
-    "@sveltejs/adapter-auto": "1.0.0-next.75",
+    "@sveltejs/adapter-node": "1.3.0",
     "@sveltejs/kit": "^1.30.4",
     "@tailwindcss/typography": "0.5.7",
     "@types/debug": "4.1.7",

diff --git a/ChatQnA/docker/ui/svelte/src/lib/network/chat/Network.ts b/ChatQnA/docker/ui/svelte/src/lib/network/chat/Network.ts
@@ -12,11 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { env } from "$env/dynamic/public";
+import { CHAT_BASE_URL } from "$env/static/public";
 import { SSE } from "sse.js";
 
-const CHAT_BASE_URL = env.CHAT_BASE_URL;
-
 export async function fetchTextStream(query: string) {
 	let payload = {};
 	let url = "";

diff --git a/ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts b/ChatQnA/docker/ui/svelte/src/lib/network/upload/Network.ts
@@ -12,11 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { env } from "$env/dynamic/public";
-
-const UPLOAD_FILE_BASE_URL = env.UPLOAD_FILE_BASE_URL;
-const GET_FILE = env.GET_FILE;
-const DELETE_FILE = env.DELETE_FILE;
+import { UPLOAD_FILE_BASE_URL, GET_FILE, DELETE_FILE } from "$env/static/public";
 
 async function fetchFunc(url, init) {
 	try {

diff --git a/ChatQnA/docker/ui/svelte/svelte.config.js b/ChatQnA/docker/ui/svelte/svelte.config.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import adapter from "@sveltejs/adapter-auto";
+import adapter from "@sveltejs/adapter-node";
 import preprocess from "svelte-preprocess";
 import postcssPresetEnv from "postcss-preset-env";
 

diff --git a/ChatQnA/docker/xeon/README.md b/ChatQnA/docker/xeon/README.md
@@ -148,7 +148,7 @@ Build frontend Docker image via below command:
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
+docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server
 cd ../../../..
 ```
 
@@ -160,7 +160,7 @@ Build frontend Docker image that enables Conversational experience with ChatQnA
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
+docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server
 cd ../../../..
 ```
 

diff --git a/ChatQnA/docker/xeon/README_qdrant.md b/ChatQnA/docker/xeon/README_qdrant.md
@@ -118,7 +118,7 @@ Build frontend Docker image via below command:
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
+docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server
 cd ../../../..
 ```
 
@@ -132,7 +132,7 @@ Build frontend Docker image that enables Conversational experience with ChatQnA
 cd GenAIExamples/ChatQnA/docker/ui/
 export BACKEND_SERVICE_ENDPOINT="http://${host_ip}:8912/v1/chatqna"
 export DATAPREP_SERVICE_ENDPOINT="http://${host_ip}:6043/v1/dataprep"
-docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT --build-arg DATAPREP_SERVICE_ENDPOINT=$DATAPREP_SERVICE_ENDPOINT -f ./docker/Dockerfile.react .
+docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server
 cd ../../../..
 ```