Dockerize the frontend

codescalers · Jan 22, 2024 · b764748 · b764748
1 parent e507c54
commit b764748
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 9 deletions.
diff --git a/client/.env b/client/.env
@@ -4,7 +4,7 @@ VITE_FAVICON="https://placehold.co/32/steelblue/white?text=CS"
 VITE_LOGO="https://placehold.co/128/steelblue/white?text=CS"
 
 # Server Related
-VITE_CSHR_API="http://127.0.0.1:8000/api"
+CSHR_API="http://127.0.0.1:8000/api"
 
 # Development Related
-VITE_DEBUG=false
+# VITE_DEBUG=false
diff --git a/client/Dockerfile b/client/Dockerfile
@@ -0,0 +1,26 @@
+# build stage
+FROM node:18.18.2 as build-stage
+WORKDIR /app
+
+ENV CSHR_API=$CSHR_API
+
+COPY ./package*.json ./
+RUN npm i -g pnpm
+COPY client/ .
+RUN pnpm install
+RUN chmod +x /app/scripts/build-env.sh
+RUN pnpm build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+COPY ./nginx/prod.conf /temp/prod.conf
+
+# Use the environment variable in the configuration file
+RUN envsubst '$CSHR_API' < /temp/prod.conf > /etc/nginx/conf.d/default.conf
+
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/scripts/build-env.sh /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["/bin/sh", "-c", "/usr/share/nginx/html/build-env.sh && nginx -g \"daemon off;\""]
diff --git a/client/env.d.ts b/client/env.d.ts
@@ -5,5 +5,5 @@ interface ImportMetaEnv {
   VITE_TITLE: string
   VITE_FAVICON: string
   VITE_LOGO: string
-  VITE_CSHR_API: string
+  CSHR_API: string
 }
diff --git a/client/index.html b/client/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/x-icon" href="%VITE_FAVICON%" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_TITLE%</title>
+    <script src="/config.js"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/client/public/config.js b/client/public/config.js
@@ -0,0 +1,3 @@
+window.env = {
+  CSHR_API: '$CSHR_API',
+};
diff --git a/client/scripts/build-env.sh b/client/scripts/build-env.sh
@@ -0,0 +1,17 @@
+#!/bin/sh
+
+#!/bin/sh
+set -ex
+values="
+window.env = {
+  CSHR_API: '$CSHR_API',
+};
+"
+# decide the config file path
+file="/usr/share/nginx/html/config.js"
+echo $values > $file
+echo -e "\e[1;32m$values"
+
+echo "++++++++++++++++++++++++++++++++++++++++++++"
+echo "file=$file"
+echo "++++++++++++++++++++++++++++++++++++++++++++"
diff --git a/client/src/clients/index.ts b/client/src/clients/index.ts
@@ -4,6 +4,6 @@ import { ApiClient } from './api'
 
 export const $api = new ApiClient({
   $http: axios.create({
-    baseURL: import.meta.env.VITE_CSHR_API
+    baseURL: window.env.CSHR_API
   })
 })
diff --git a/client/src/index.ts b/client/src/index.ts
@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  interface Window {
+    env: {
+      CSHR_API: string;
+    };
+  }
+}
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -30,17 +30,25 @@ services:
       - redis
       - postgres
 
+    volumes:
+      - backend_media:/server_dir/server/mediafiles/profile_image
+    networks:
+      - cshr-network
+
   frontend:
     build:
-      context: ./client
+      context: .
+      dockerfile: client/Dockerfile
     ports:
       - "8080:8080"
     environment:
-      - SSH_KEY=ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQCF3JezThwSchTvkF2oPtn8X6chevNsfE58dIY3/eg5zK9tKgNYIB2saoFh12a0AJU424sAeLO0HghhNhe/Co62xkzHhk6EpXWNSFkrlzw+FVn1FKDZbbOZH47sC3n6p5a3YhM4dALssZ/aZdpaKBgXkzk91usJ+GVa+eOnpMRBlHgi9PpvowyzPSKeH9ZcVRBPnVU+nQGyV+kd6RahNBoNgNrHu/QFI92yg/y/7Szus1IS0U92cWKf/K/Sot7O10kSjmj06lMGOO8zdENk/xrtUtRHzemCj+mq0Q/3KUMCGvdb/tH0TDeNenxvibummiym4VTcnYqbm+RDXWG8HUc/RPfEVBl8p1NGZnkBt6QJl5hddHaYwx8CCmf3maSrQFcmrWYtlUDBXYkPyrv0qmy2gM1PScntF/X9zhIfnELlyAVAKXfzVwixrBh7oOIAqefydSVcwWtCXoH38F5q/zo9bQv+eHntI83mZrUUT7JGirQF64fpJKbCZPhv0kUm9bF7DVQMiyRZdk748cgVp7dEzMVlrfZ2eIvZag5zmuJTPB7bw00+Ik9jNaOIhEoCWEaYBw7KmrLonesV8rWUkEAwWPe28bXCVmUZlgZbWJi7BFWCst2Z/j2WgScHbdAv28gAcneDW4yQmt2YaYqXqmwgSVCaD/irq5FSO4upmo5u0Q== [email protected]
-      - SERVER_BASE_URL=https://cshrserver.gent01.dev.grid.tf
-      - NODE_ENV=production
+      - CSHR_API=https://cshrserver.gent01.dev.grid.tf
     depends_on:
       - backend
+    networks:
+      - cshr-network
+    links: 
+      - backend
 
   redis:
     image: "redis:latest"
@@ -64,4 +72,8 @@ services:
 
 volumes:
   postgres_data:
-  redis_data:
+  redis_data:
+  backend_media:
+
+networks:
+  cshr-network:
diff --git a/nginx/prod.conf b/nginx/prod.conf
@@ -0,0 +1,10 @@
+server {
+  listen 80;
+  server_name _ default_server;
+
+  root /usr/share/nginx/html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}
diff --git a/terraform/terraform.md b/terraform/terraform.md
@@ -0,0 +1,4 @@
+# Terraform script
+
+- This version is deprecated
+- It was implemented for the intern people to learn how to build a machine from our Grid