Merge pull request #56 from dqualizer/Add-Docker-Build

Add docker build
dqualizer · Aug 14, 2023 · 6f7be22 · 6f7be22
2 parents 51d5d1c + 2878d00
commit 6f7be22
Show file tree

Hide file tree

Showing 19 changed files with 178 additions and 65 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules /
+    dist
+test.json
+Dockerfile
+npm - debug.log
diff --git a/.env b/.env
@@ -1 +1,2 @@
+# Please provide the Url for dqApi
 VITE_BACKEND_URL=http://localhost:8099/api/v1
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,42 @@
+FROM --platform=$BUILDPLATFORM node:19-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM --platform=$BUILDPLATFORM nginx:1.22-alpine AS runtime 
+COPY --from=builder /app/dist/app /usr/share/nginx/html
+
+# Adding the env-File and the Shell-Script
+WORKDIR /usr/share/nginx/html
+COPY ./env.sh .
+COPY .env .
+
+COPY entrypoint.sh /usr/bin/
+
+# Adding nginx-config
+COPY nginx.conf  /etc/nginx/conf.d/default.conf
+
+RUN chmod +x /usr/bin/entrypoint.sh
+
+# Add bash
+RUN apk add --no-cache bash
+
+RUN chmod +x env.sh
+
+# Executing the Shell-Skript
+CMD ["entrypoint.sh"]
diff --git a/entrypoint.sh b/entrypoint.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# Check if the VITE_BACKEND_URL environment variable is set
+if [ -z "$VITE_BACKEND_URL" ]; then
+  echo "Error: 
+       The environment variable VITE_BACKEND_URL is not set.
+       Please enter a valid URL, for example, '-e VITE_BACKEND_URL=http://localhost:8080' on 'docker run'."
+  exit 1
+fi
+
+# Run the env.sh script
+source /usr/share/nginx/html/env.sh
+
+# Start nginx
+nginx -g "daemon off;" -c "/data/conf/"
diff --git a/env.sh b/env.sh
@@ -0,0 +1,28 @@
+#!/bin/bash
+
+# Recreate config file
+rm -rf ./env-config.js
+touch ./env-config.js
+
+# Add assignment - window._env_ will contain all Environment-Variables, defined in .env 
+echo "window._env_ = {" >> ./env-config.js
+
+# Read each line in .env file
+# Each line represents key=value pairs
+while read -r line || [[ -n "$line" ]];
+do
+  # Split env variables by character `=`
+  if printf '%s\n' "$line" | grep -q -e '='; then
+    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
+    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
+  fi
+
+  # Read value of current variable if exists as Environment variable
+  value=$(printf '%s\n' "${!varname}")
+  # Otherwise use value from .env file
+  [[ -z $value ]] && value=${varvalue}
+
+  # Append configuration property to JS file
+  echo "  $varname: \"$value\"," >> ./env-config.js
+done < .env
+echo "}" >> ./env-config.js
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
+  <script type="module" src="/src/main.jsx"></script>
 </body>
 
 </html>
diff --git a/nginx.conf b/nginx.conf
@@ -0,0 +1,44 @@
+server {                                    
+    listen       80;                                           
+    server_name  localhost;                                   
+
+    #access_log  /var/log/nginx/host.access.log  main;                
+
+    location / {                       
+        root   /usr/share/nginx/html;                                   
+        index  index.html index.html;                          
+        try_files $uri $uri/ /index.html;                             
+    }                                  
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #                                                                   
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {                                     
+        root   /usr/share/nginx/html;
+    }                                  
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80       
+    #                                  
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}                                                         
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #                  
+    #location ~ \.php$ {                                                
+    #    root           html;                                           
+    #    fastcgi_pass   127.0.0.1:9000;                                 
+    #    fastcgi_index  index.php;                                      
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;  
+    #    include        fastcgi_params;                               
+    #}                                                                  
+
+    # deny access to .htaccess files, if Apache's document root       
+    # concurs with nginx's one                                          
+    #                                                                   
+    #location ~ /\.ht {                                        
+    #    deny  all;                                                   
+    #}                                                                
+}  
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.4.0",
     "dagre": "^0.8.5",
+    "dotenv": "^16.3.1",
     "flowbite-react": "^0.4.11",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
@@ -32,7 +33,6 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
-    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.14",
@@ -41,7 +41,6 @@
     "source-map-loader": "^4.0.1",
     "tailwindcss": "^3.3.2",
     "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
     "vite": "^4.2.0"
   }
 }
diff --git a/public/werkstatt.png → src/assets/werkstatt.png b/public/werkstatt.png → src/assets/werkstatt.png
diff --git a/src/main.tsx → src/main.jsx b/src/main.tsx → src/main.jsx
@@ -1,20 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import ReactTooltip from "react-tooltip";
+
 import App, { damLoader } from "./pages/App";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./pages/Home";
-import {
-  QueryClient,
-  QueryClientProvider,
-  useQuery,
-} from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import DqEdit from "./pages/DqEdit";
-import { getDomainById } from "./queries/dam.js";
 import Domains from "./pages/Domains";
-import Contexts from "./pages/Contexts";
 import { Link } from "react-router-dom";
 import NewDomain from "./pages/NewDomain";
 import CreateBlankDomain from "./pages/CreateBlankDomain";
@@ -122,7 +116,7 @@ const router = createBrowserRouter([
   },
 ]);
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />

diff --git a/src/pages/App.tsx → src/pages/App.jsx b/src/pages/App.tsx → src/pages/App.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo } from "react";
+import { useState, useRef, useMemo } from "react";
 import "reactflow/dist/style.css";
 import {
   Background,
@@ -14,12 +14,10 @@ import Sidebar from "../components/Sidebar";
 import IconNode from "../nodes/IconNode";
 import { createInitialElements } from "../utils/createInitialElements";
 import { getLayoutedElements } from "../utils/layoutElements";
-import { RouteObject, useLoaderData, useParams } from "react-router-dom";
+import { useLoaderData, useParams } from "react-router-dom";
 import { getAllRqas } from "../queries/rqa";
 import { getDamById } from "../queries/dam";
 
-import { AppLoaderProps } from "../interfaces/AppLoaderProps";
-import { ReactJSXIntrinsicAttributes } from "@emotion/react/types/jsx-namespace";
 import { string } from "prop-types";
 import loadtestSpecs from "../data/loadtest-specs.json";
 import { useQuery } from "@tanstack/react-query";

diff --git a/src/pages/Home.tsx → src/pages/Home.jsx b/src/pages/Home.tsx → src/pages/Home.jsx
@@ -1,7 +1,6 @@
 import dqLogo from "../assets/dqualizer_logo.png";
-
+import WerkstattScreenshot from "../assets/werkstatt.png";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-
 import { Link, useLoaderData } from "react-router-dom";
 import { getAllDams } from "../queries/dam";
 
@@ -24,7 +23,7 @@ export default function Home() {
             <Link to={`/analyzer/${dam.id}`}>
               <div className="w-60 h-60 border-2 border-cyan-400 relative hover:scale-110">
                 <img
-                  src="http://localhost:5173/werkstatt.png"
+                  src={WerkstattScreenshot}
                   alt=""
                   className="w-full h-full object-cover"
                 />

diff --git a/src/queries/dam.js b/src/queries/dam.js
@@ -3,7 +3,6 @@ const backend = import.meta.env.VITE_BACKEND_URL;
 
 
 export const getAllDams = () => {
-    console.log(backend);
     return axios.get(`${backend}/dam/`)
         .then(res => res.data);
 }

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tsconfig.node.json b/tsconfig.node.json
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,20 @@
+import dotenv from 'dotenv';
+dotenv.config();
+
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+
+export default ({ mode }) => {
+    const env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };
+    return defineConfig({
+        plugins: [react()],
+        build: {
+            outDir: 'dist/app',
+        },
+        define: {
+            __VITE_BACKEND_URL__: JSON.stringify(env.VITE_BACKEND_URL)
+        },
+    })
+
+};
diff --git a/vite.config.ts b/vite.config.ts