build: credential ui docker env variables defined in run time (#579)

* fix: docker env variables defined in run time * refactor: simplyfied way to handle env variables on runtime * fix: removed unnecesary copy instruction from Dockerfile
cardano-foundation · Jul 17, 2024 · 954382c · 954382c
1 parent daf3fa0
commit 954382c
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 22 deletions.
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -54,10 +54,10 @@ services:
     build:
       context: ./services/credential-server-ui
       dockerfile: ./Dockerfile
-      args:
-        - REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL=http://localhost:3001
-        - REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT=3001
     restart: unless-stopped
+    environment:
+      - REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL=http://localhost
+      - REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT=3001
     ports:
       - 3000:80
 

diff --git a/services/credential-server-ui/.dockerignore b/services/credential-server-ui/.dockerignore
@@ -5,6 +5,4 @@
 dist
 build
 node_modules
-npm-debug.log
-
-.env
+npm-debug.log
diff --git a/services/credential-server-ui/.env b/services/credential-server-ui/.env
@@ -0,0 +1,2 @@
+REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL=http://localhost
+REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT=3001
diff --git a/services/credential-server-ui/.gitignore b/services/credential-server-ui/.gitignore
@@ -21,3 +21,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Temporary env files
+env-config.js
+
+# Override rule from root .gitignore
+!.env
diff --git a/services/credential-server-ui/Dockerfile b/services/credential-server-ui/Dockerfile
@@ -1,19 +1,29 @@
 FROM node:lts-alpine as build
+
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
 COPY . .
 
-ARG REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL
-ENV REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL $REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL
-
-ARG REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT
-ENV REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT $REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT
-
 RUN npm run build
 
 
 FROM nginx:alpine
+
+# Nginx config
+RUN rm -rf /etc/nginx/conf.d
+COPY conf /etc/nginx
+
 COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy .env file and shell script to container
+WORKDIR /usr/share/nginx/html
+COPY ./env.sh .
+
+# Make our shell script executable
+RUN chmod +x env.sh
+
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+
+# Start Nginx server
+CMD ["/bin/sh", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
diff --git a/services/credential-server-ui/conf/conf.d/default.conf b/services/credential-server-ui/conf/conf.d/default.conf
@@ -0,0 +1,13 @@
+server {
+  listen 80;
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+    expires -1; # Set it to different value depending on your standard requirements
+  }
+  error_page   500 502 503 504  /50x.html;
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}
diff --git a/services/credential-server-ui/conf/conf.d/gzip.conf b/services/credential-server-ui/conf/conf.d/gzip.conf
@@ -0,0 +1,24 @@
+gzip on;
+gzip_http_version  1.0;
+gzip_comp_level    5; # 1-9
+gzip_min_length    256;
+gzip_proxied       any;
+gzip_vary          on;
+
+# MIME-types
+gzip_types
+  application/atom+xml
+  application/javascript
+  application/json
+  application/rss+xml
+  application/vnd.ms-fontobject
+  application/x-font-ttf
+  application/x-web-app-manifest+json
+  application/xhtml+xml
+  application/xml
+  font/opentype
+  image/svg+xml
+  image/x-icon
+  text/css
+  text/plain
+  text/x-component;
diff --git a/services/credential-server-ui/env.sh b/services/credential-server-ui/env.sh
@@ -0,0 +1,6 @@
+#!/bin/sh
+echo "window._env_ = {" > ./env-config.js
+for var in $(env | grep ^REACT_APP_); do
+  echo "  \"${var%%=*}\": \"${var#*=}\"," >> ./env-config.js
+done
+echo "};" >> ./env-config.js
diff --git a/services/credential-server-ui/public/index.html b/services/credential-server-ui/public/index.html
@@ -18,6 +18,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <script src="%PUBLIC_URL%/env-config.js"></script>
+
     <title>Credential Issuance Testing Tool</title>
   </head>
   <body>

diff --git a/services/credential-server-ui/src/config.ts b/services/credential-server-ui/src/config.ts
@@ -1,11 +1,10 @@
-// eslint-disable-next-line no-undef
-const port = process.env.REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT
-  ? Number(process.env.PORT)
-  : 3001;
-// eslint-disable-next-line no-undef
-const endpoint =
-  process.env.REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL ??
-  `http://127.0.0.1:${port}`;
+// @ts-ignore
+const port = window._env_?.REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT || process.env.REACT_APP_CREDENTIAL_ISSUANCE_SERVER_PORT || "3001";
+
+// @ts-ignore
+const url = window._env_?.REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL || process.env.REACT_APP_CREDENTIAL_ISSUANCE_SERVER_URL || "http://localhost";
+const endpoint = `${url}:${port}`;
+
 const config = {
   endpoint: endpoint,
   endpoints: [endpoint],
@@ -32,4 +31,4 @@ const config = {
   },
 };
 
-export { config };
+export { config };