Modified application tooling to allow for stateless production builds…

…. Environment variables will be set by AWS ECS and at container startup they will be injected into the application using a sequence of scripts integrated in the Dockerfile. This can be tested locally by using a .env.docker.local file in the .env folder and then building and running the docker image locally. This setup will allow the continued normal development using the npm run dev command. Stateful build information has been removed from the package.json as well as the corresponding .env files that are no longer necessary.

.dockerignore

@@ -2,4 +2,8 @@
 */.git
 node_modules
 */node_modules
-npm-debug.log
+npm-debug.log
+dist
+.swc
+.env
+!.env/.env

.env/.env

@@ -1 +1,17 @@
-VITE_UNITY_UI_VERSION=${npm_package_version}
+# GENERAL
+VITE_UNITY_UI_VERSION=${npm_package_version}
+VITE_ADMIN_EMAIL=ENV_UNITY_UI_ADMIN_EMAIL
+
+# Auth
+VITE_AUTH_OAUTH_CLIENT_ID=ENV_UNITY_UI_AUTH_OAUTH_CLIENT_ID
+VITE_AUTH_OAUTH_REDIRECT_URI=ENV_UNITY_UI_AUTH_OAUTH_REDIRECT_URI
+VITE_AUTH_OAUTH_LOGOUT_ENDPOINT=ENV_UNITY_UI_AUTH_OAUTH_LOGOUT_ENDPOINT
+VITE_AUTH_OAUTH_PROVIDER_URL=ENV_UNITY_UI_AUTH_OAUTH_PROVIDER_URL
+VITE_AUTH_APP_ADMIN_GROUP_NAME=ENV_UNITY_UI_AUTH_APP_ADMIN_GROUP_NAME
+VITE_AUTH_APP_APP_VIEWER_GROUP_NAME=ENV_UNITY_UI_AUTH_APP_APP_VIEWER_GROUP_NAME
+
+# ADS
+VITE_ADS_URL=ENV_UNITY_UI_ADS_URL
+
+# SPS
+VITE_SPS_WPST_ENDPOINT=ENV_UNITY_UI_SPS_WPST_ENDPOINT

.gitignore

@@ -10,6 +10,8 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.env
+!.env/.env
 
 node_modules
 dist

Dockerfile

@@ -4,7 +4,6 @@
 
 FROM node:lts-hydrogen as builder
 
-# Add git
 RUN apt-get update
 
 # Create app directory
@@ -17,23 +16,25 @@ COPY . .
 RUN npm clean-install
 
 # Build distribution
-RUN npm run build-integration
-
+RUN npm run build
 
 ############################################################
 ############################################################
 # Build Image Stage
 
 FROM ubuntu:18.04
-LABEL version="0.0.1"
+LABEL version="0.1.0"
+
+ENV UNITY_WWW_ROOT=/var/www/unity-ui
+ENV ENTRYPOINT_FOLDER=/entrypoint.d
 
 RUN apt-get update \
       && apt-get install -y apache2 \
       && rm -rf /var/lib/apt/lists/* \
       && apt-get clean
 
 # Create app directory and copy distribution code from builder stage
-WORKDIR /var/www/unity-ui
+WORKDIR ${UNITY_WWW_ROOT}
 COPY --from=builder /usr/src/app/dist ./
 
 # Configure apache2
@@ -42,7 +43,14 @@ RUN echo "ServerName localhost" >> /etc/apache2/apache2.conf
 RUN a2dissite 000-default.conf
 RUN a2ensite unity-ui.conf
 
+# Copy and set up files needed for container startup
+COPY ./entrypoint.d/* ${ENTRYPOINT_FOLDER}/
+RUN chmod 777 -R ${ENTRYPOINT_FOLDER}/* && chmod +x -R ${ENTRYPOINT_FOLDER}/*
+
 EXPOSE 80
 
-# Default command to run container
-CMD ["/usr/sbin/apachectl", "-D", "FOREGROUND", "-k", "start"]
+# Default process to run on container startup
+ENTRYPOINT ["/entrypoint.d/docker-entrypoint.sh"]
+
+# Default options to pass to apache when starting container in docker-entrypoint.sh
+CMD ["-k", "start"]

Makefile

@@ -0,0 +1,44 @@
+export IMAGE_NAME = unity-ui
+export CONTAINER_NAME = unity-ui
+export RUN_OPTIONS = 
+
+build-no-cache: RUN_OPTIONS = "--no-cache"
+build-no-cache: build
+
+build:
+	docker buildx build --progress=plain $(RUN_OPTIONS) -t ${IMAGE_NAME} -f Dockerfile .
+
+destroy-container:
+	docker container rm ${CONTAINER_NAME}
+
+destroy-image:
+	docker image rm ${IMAGE_NAME}
+
+kill:
+	docker kill ${CONTAINER_NAME}
+
+run:
+	docker run --env-file=./.env/.env.docker.local -t -i --rm -p 8080:80 --name ${CONTAINER_NAME} ${IMAGE_NAME} 
+
+start:
+	docker start ${CONTAINER_NAME}
+
+stop:
+	docker stop ${CONTAINER_NAME}
+
+# ----------------------------------------------------------------------------
+# Self-Documented Makefile
+# ref: http://marmelab.com/blog/2016/02/29/auto-documented-makefile.html
+# ----------------------------------------------------------------------------
+help:						## (DEFAULT) This help information
+	@echo ====================================================================
+	@grep -E '^## .*$$'  \
+		$(MAKEFILE_LIST)  \
+		| awk 'BEGIN { FS="## " }; {printf "\033[33m%-24s\033[0m \n", $$2}'
+	@echo
+	@grep -E '^[0-9a-zA-Z_-]+:.*?## .*$$'  \
+		$(MAKEFILE_LIST)  \
+		| awk 'BEGIN { FS=":.*?## " }; {printf "\033[36m%-24s\033[0m %s\n", $$1, $$2}'  \
+#		 | sort
+.PHONY: help
+.DEFAULT_GOAL := help

entrypoint.d/docker-entrypoint.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+#set -x; : "$0" "$@"  # Use for debugging
+
+# Inject Environment Variables for React App
+source ${ENTRYPOINT_FOLDER}/env.sh
+
+rm -f /var/run/apache2/apache2.pid
+
+# Run the main container process (from the Dockerfile CMD)
+exec /usr/sbin/apachectl -D FOREGROUND "$@"

entrypoint.d/env.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+for i in $(env | grep ENV_UNITY_UI_)
+do
+    key=$(echo $i | cut -d '=' -f 1)
+    value=$(echo $i | cut -d '=' -f 2-)
+    echo $key=$value
+    # sed All files
+    # find $UNITY_WWW_ROOT -type f -exec sed -i "s|${key}|${value}|g" '{}' +
+
+    # sed .js only
+    find $UNITY_WWW_ROOT -type f \( -name '*.js' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+done

package.json

@@ -1,14 +1,11 @@
 {
   "name": "unity-ui",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build-integration": "tsc && vite build --mode integration --base=/dashboard/",
-    "build-test": "tsc && vite build --mode test --base=/dashboard/",
-    "build-sips-test": "tsc && vite build --mode sips-test --base=/unity-sips-test/dashboard/",
-    "build-prod": "tsc && vite build --mode production",
+    "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

src/Config.tsx

@@ -24,4 +24,9 @@ const Config = {
 
 }
 
+if( import.meta.env.DEV ) {
+  // Output Configuration on every call to help with debugging only in DEV mode
+  console.log(Config)
+}
+
 export default Config;