Tta 67 refactor tt UI secrets injection and ci cd pipelines (#890)

* first comit

* feat: TTA-66 create new environment

* fixing stange char in env

* using npm run build-legacy  for deploying TT-UI legacy in production mode

* stage changes

Co-authored-by: Jimmy Jaramillo <[email protected]>

Author: rodolfoIOET

.env

@@ -28,9 +28,11 @@ jobs:
 
     - name: Inject Secrets
       env:
+        AUTHORITY: ${{ secrets.authority }}
+        API_URL: ${{ secrets.api_url }}
         SCOPES: ${{ secrets.scopes }}
         CLIENT_ID: ${{ secrets.client_id }}
-        AUTHORITY: ${{ secrets.authority }}
+        CLIENT_URL: ${{ secrets.client_url }}
         STACK_EXCHANGE_ID: ${{ secrets.stack_exchange_id }}
         STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.stack_exchange_access_token }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.azure_app_configuration_connection_string }}
@@ -44,7 +46,7 @@ jobs:
         source .env
         set +a
         npm install
-        npm run build --prod --if-present
+        npm run build-legacy --if-present
         cp scripts/default-static-site.js ${BUILD_PATH}
 
     - name: 'Deploy to Azure Web App'

.github/workflows/CD-time-tracker-ui.yml

@@ -41,9 +41,11 @@ jobs:
 
     - name: Inject Secrets
       env:
+        AUTHORITY: ${{ secrets.AUTHORITY }}
+        API_URL : ${{ secrets.API_URL }}
         SCOPES: ${{ secrets.SCOPES }}
         CLIENT_ID: ${{ secrets.CLIENT_ID }}
-        AUTHORITY: ${{ secrets.AUTHORITY }}
+        CLIENT_URL : ${{ secrets.CLIENT_URL }}
         STACK_EXCHANGE_ID: ${{ secrets.STACK_EXCHANGE_ID }}
         STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STACK_EXCHANGE_ACCESS_TOKEN }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING }}

.github/workflows/CI-time-tracker-ui.yml

@@ -30,7 +30,16 @@ jobs:
         creds: ${{ secrets.AZURE_CREDENTIALS }}
 
     - name: Build the docker image
-      run: make build_prod
+      run: |-
+        docker build \
+          --target production  -t timetracker_ui \
+          --build-arg API_URL="${{secrets.API_URL_STAGE}}" \
+          --build-arg AUTHORITY="${{secrets.AUTHORITY}}" \
+          --build-arg CLIENT_ID="${{secrets.CLIENT_ID_STAGE}}" \
+          --build-arg CLIENT_URL="${{ secrets.CLIENT_URL_STAGE}}" \
+          --build-arg SCOPES="${{secrets.SCOPES}}" \
+          --build-arg AZURE_APP_CONFIGURATION_CONNECTION_STRING="${{secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING}}" \
+          .
 
     - name: Publish docker image to stage azure container registry
       run: |

.github/workflows/time-tracker-ui-cd-stage.yml

@@ -32,11 +32,13 @@ jobs:
 
     - name: Inject Secrets
       env:
-        SCOPES: ${{ secrets.SCOPES }}
-        CLIENT_ID: ${{ secrets.CLIENT_ID }}
         AUTHORITY: ${{ secrets.AUTHORITY }}
-        STACK_EXCHANGE_ID: ${{ secrets.STACK_EXCHANGE_ID }}
-        STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STACK_EXCHANGE_ACCESS_TOKEN }}
+        API_URL: ${{ secrets.STAGE_API_URL}}
+        SCOPES: ${{ secrets.SCOPES }}
+        CLIENT_ID: ${{ secrets.STAGE_CLIENT_ID }}
+        CLIENT_URL: ${{ secrets.STAGE_CLIENT_URL }}
+        STACK_EXCHANGE_ID: ${{ secrets.STAGE_STACK_EXCHANGE_ID }}
+        STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STAGE_STACK_EXCHANGE_ACCESS_TOKEN }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING }}
       run: |
         chmod +x ./scripts/populate-keys.sh

.github/workflows/time-tracker-ui-ci.yml

@@ -1,4 +1,4 @@
-FROM node:14 AS development
+FROM node:14 AS building
 
 ENV USERNAME timetracker
 ENV HOME /home/${USERNAME}
@@ -12,21 +12,30 @@ USER ${USERNAME}
 RUN npm cache clean --force && npm install
 EXPOSE 4200
 EXPOSE 9876
-CMD ${HOME}/time-tracker-ui/node_modules/.bin/ng serve --host 0.0.0.0 --disableHostCheck
+ARG API_URL
+ARG AUTHORITY
+ARG CLIENT_ID
+ARG CLIENT_URL
+ARG SCOPES
+ARG AZURE_APP_CONFIGURATION_CONNECTION_STRING
+
+RUN API_URL=${API_URL} \
+    AUTHORITY=${AUTHORITY} \
+    CLIENT_ID=${CLIENT_ID} \
+    CLIENT_URL=${CLIENT_URL} \
+    SCOPES=${SCOPES} \
+    AZURE_APP_CONFIGURATION_CONNECTION_STRING=${AZURE_APP_CONFIGURATION_CONNECTION_STRING}
 
-
-
-FROM development as build
-COPY .env .
 RUN npm run build
 
+
 FROM nginx:1.21 AS production
 
 ENV USERNAME app
 RUN useradd -ms /bin/bash ${USERNAME}
 
 COPY nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /home/timetracker/time-tracker-ui/dist/time-tracker /usr/share/nginx/html
+COPY --from=building /home/timetracker/time-tracker-ui/dist/time-tracker /usr/share/nginx/html
 COPY .env /usr/share/nginx/html
 RUN chown -R ${USERNAME}:${USERNAME} /var/cache/nginx && \
     chown -R ${USERNAME}:${USERNAME} /var/log/nginx && \

Dockerfile

@@ -55,12 +55,20 @@ publish: require-acr-arg require-image_tag-arg ## Upload a docker image to the s
 	docker push $(acr).azurecr.io/timetracker_ui:$(image_tag)
 
 .PHONY: build_prod
-build_prod: ## Create docker image with dependencies needed for production.
-	docker build --target production -t timetracker_ui_prod -f Dockerfile .
+build_prod: ## Create docker image with dependencies needed for production -- to test locally only
+	docker build \
+		--target production  -t timetracker_ui_prod \
+		--build-arg API_URL="${API_URL}" \
+		--build-arg AUTHORITY="${AUTHORITY}" \
+		--build-arg CLIENT_ID="${CLIENT_ID}" \
+		--build-arg CLIENT_URL="${CLIENT_URL}" \
+		--build-arg SCOPES="${SCOPES}" \
+		--build-arg AZURE_APP_CONFIGURATION_CONNECTION_STRING="${AZURE_APP_CONFIGURATION_CONNECTION_STRING}" \
+		.
 
 .PHONY: run_prod
-run_prod: ## Execute timetracker_ui_prod docker container.
-	docker run -d -p 80:80 --env-file ./.env --name timetracker_ui_prod timetracker_ui_prod
+run_prod: ## Execute timetracker_ui_prod docker container -- to test locally only
+	docker run -d -p 80:80 --name timetracker_ui_prod timetracker_ui_prod
 
 .PHONY: stop_prod
 stop_prod: ## Stop container timetracker_ui_prod.

Makefile

@@ -78,6 +78,34 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "productionlegacy": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prodlegacy.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
             }
           }
         },

angular.json

@@ -11,14 +11,13 @@ services:
       - 9876:9876
     environment:
       AUTHORITY: ${AUTHORITY}
+      API_URL: ${API_URL}
       CLIENT_ID: ${CLIENT_ID}
+      CLIENT_URL: ${CLIENT_URL}
       SCOPES: ${SCOPES}
       STACK_EXCHANGE_ID: ${STACK_EXCHANGE_ID}
       STACK_EXCHANGE_ACCESS_TOKEN: ${STACK_EXCHANGE_ACCESS_TOKEN}
       AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${AZURE_APP_CONFIGURATION_CONNECTION_STRING}
-      AUTHORITY_JSON: ${AUTHORITY_JSON}
-      CLIENT_ID_JSON: ${CLIENT_ID_JSON}
-      SCOPES_JSON: ${SCOPES_JSON}
     volumes:
       - ./src:/home/timetracker/time-tracker-ui/src/
       - ./scripts:/home/timetracker/time-tracker-ui/scripts/
@@ -39,12 +38,11 @@ services:
       - 9876:9876
     environment:
       CHROME_BIN: /opt/google/chrome/google-chrome
+      API_URL: ${API_URL}
       AUTHORITY: ${AUTHORITY}
       CLIENT_ID: ${CLIENT_ID}
+      CLIENT_URL: ${CLIENT_URL}
       SCOPES: ${SCOPES}
       STACK_EXCHANGE_ID: ${STACK_EXCHANGE_ID}
       STACK_EXCHANGE_ACCESS_TOKEN: ${STACK_EXCHANGE_ACCESS_TOKEN}
       AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${AZURE_APP_CONFIGURATION_CONNECTION_STRING}
-      AUTHORITY_JSON: ${AUTHORITY_JSON}
-      CLIENT_ID_JSON: ${CLIENT_ID_JSON}
-      SCOPES_JSON: ${SCOPES_JSON}