Trying option of loading website into nginx container

docker-compose.prod.yml

@@ -4,7 +4,6 @@ services:
     environment:
       REACT_APP_CLIENT_ID: ${CLIENT_ID}
       REACT_APP_TENANT_ID: ${TENANT_ID}
-      WDS_SOCKET_PORT: 3000
     image: azureipam.azurecr.io/ipam-ui:latest
   ipam-engine:
     environment:

ui/Dockerfile.nginx

@@ -23,9 +23,19 @@ RUN npm run build
 # Stage 2 - Configure Nginx
 FROM nginx:alpine
 
-COPY ../default.nginx.conf /etc/nginx/conf.d/default.conf
+# Copy Nginx Config & IPAM Engine Code
+COPY ./default.nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=ipam-ui-build /app/build /usr/share/nginx/html
 
 EXPOSE 80
 
-CMD ["nginx", "-g", "daemon off;"]
+# Execute Init Script
+# CMD ["./init.sh"]
+
+# CMD ["nginx", "-g", "daemon off;"]
+
+CMD echo "window.env = {" >> /usr/share/nginx/html/env.js && \
+    echo \"REACT_APP_CLIENT_ID\": \"$CLIENT_ID\", >> /usr/share/nginx/html/env.js && \
+    echo \"REACT_APP_TENANT_ID\": \"$TENANT_ID\" >> /usr/share/nginx/html/env.js && \
+    echo "}" >> /usr/share/nginx/html/env.js && \
+    nginx -g "daemon off;"

ui/default.nginx.conf

@@ -1,24 +1,24 @@
-# This is a default site configuration which will simply return 404, preventing
-# chance access to any other virtualhost.
-
-server {
-    listen 80 default_server;
-    listen [::]:80 default_server;
-
-    # Frontend
-    location / {
-        root      /usr/share/nginx/html;
-        index     index.html index.htm;
-        try_files $uri /index.html;
-    }
-
-    # Backend
-    location /api {
-        proxy_pass http://ipam-engine;
-    }
-
-    # You may need this to prevent return 404 recursion.
-    location = /404.html {
-        internal;
-    }
-}
+# This is a default site configuration which will simply return 404, preventing
+# chance access to any other virtualhost.
+
+server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+
+    # Backend
+    location /api {
+        proxy_pass http://ipam-engine;
+    }
+
+    # Frontend
+    location / {
+        root      /usr/share/nginx/html;
+        index     index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    # You may need this to prevent return 404 recursion.
+    location = /404.html {
+        internal;
+    }
+}

ui/init.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+echo "window.env = {" >> /app/build/env.js
+echo \"REACT_APP_CLIENT_ID\": \"$CLIENT_ID\", >> /app/build.env.js
+echo \"REACT_APP_TENANT_ID\": \"$TENANT_ID\" >> /app/build.env.js
+echo "}" >> /app/build/env.js
+
+nginx -g daemon off;

ui/src/msal/authConfig.js

@@ -20,9 +20,7 @@ export const msalConfig = {
 export const loginRequest = {
     // scopes: ["api://91067a4d-14ca-48e5-99cc-001fe07f3a94/.default"],
     scopes: ["https://management.azure.com/user_impersonation"],
-    extraScopesToConsent: ["User.Read", "Directory.Read.All"],
-    // scopes: ["User.Read"],
-    // extraScopesToConsent: ["api://ad9e3e8b-fbfd-4916-b9a9-eee3b3e94930/access_as_user"],
+    extraScopesToConsent: ["User.Read", "Directory.Read.All"]
 };
 
 // Add the endpoints here for Microsoft Graph API services you'd like to use.