Tt 623 refactor create frontend base docker image for dev prod

Docker/Dockerfile.dev

@@ -0,0 +1,15 @@
+FROM node:14
+
+ENV USERNAME timetracker
+ENV HOME /home/${USERNAME}
+RUN useradd -ms /bin/bash ${USERNAME}
+
+WORKDIR ${HOME}/time-tracker-ui
+COPY . .
+RUN chown ${USERNAME}:${USERNAME} -R ${HOME}/time-tracker-ui \
+    && chmod -R 777 ${HOME}/time-tracker-ui
+
+USER ${USERNAME}
+RUN npm cache clean --force && npm install
+EXPOSE 4200
+CMD npm run config && ${HOME}/time-tracker-ui/node_modules/.bin/ng serve --host 0.0.0.0 --disableHostCheck

Docker/Dockerfile.test

@@ -0,0 +1,47 @@
+FROM node:14
+
+ARG CHROME_VERSION=65.0.3325.181
+ARG CHROME_DRIVER_VERSION=2.37
+ENV USERNAME timetracker
+ENV HOME /home/${USERNAME}
+ENV CHROME_BIN /opt/google/chrome/google-chrome
+
+#Essential tools and xvfb
+RUN apt-get update && apt-get install -y \
+    software-properties-common \
+    unzip \
+    curl \
+    wget \
+    xvfb
+
+#Chrome browser to run the tests
+RUN curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add \
+      && wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
+      && dpkg -i google-chrome-stable_current_amd64.deb || true
+RUN apt-get install -y -f \
+      && rm -rf /var/lib/apt/lists/*
+
+#Disable the SUID sandbox so that chrome can launch without being in a privileged container
+RUN dpkg-divert --add --rename --divert /opt/google/chrome/google-chrome.real /opt/google/chrome/google-chrome \
+        && echo "#! /bin/bash\nexec /opt/google/chrome/google-chrome.real --no-sandbox --disable-setuid-sandbox \"\$@\"" > /opt/google/chrome/google-chrome \
+        && chmod 755 /opt/google/chrome/google-chrome
+
+#Chrome Driver
+RUN mkdir -p /opt/selenium \
+        && curl http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -o /opt/selenium/chromedriver_linux64.zip \
+        && cd /opt/selenium; unzip /opt/selenium/chromedriver_linux64.zip; rm -rf chromedriver_linux64.zip; ln -fs /opt/selenium/chromedriver /usr/local/bin/chromedriver;
+
+RUN useradd -ms /bin/bash ${USERNAME}
+
+WORKDIR ${HOME}/time-tracker-ui
+COPY . .
+RUN rm -f .env
+RUN chown ${USERNAME}:${USERNAME} -R ${HOME}/time-tracker-ui
+RUN chmod -R 777 ${HOME}/time-tracker-ui
+
+USER ${USERNAME}
+COPY .env .
+EXPOSE 4200
+EXPOSE 9876
+RUN npm cache clean --force && npm install
+CMD npm run config && npm run ci-test

Dockerfile

@@ -2,65 +2,27 @@ FROM node:14 AS development
 
 ENV USERNAME timetracker
 ENV HOME /home/${USERNAME}
-ENV CHROME_BIN /opt/google/chrome/google-chrome
-#Essential tools and xvfb
-RUN apt-get update && apt-get install -y \
-    software-properties-common \
-    unzip \
-    curl \
-    wget \
-    xvfb
-
-#Chrome browser to run the tests
-ARG CHROME_VERSION=65.0.3325.181
-RUN curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add \
-      && wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
-      && dpkg -i google-chrome-stable_current_amd64.deb || true
-RUN apt-get install -y -f \
-      && rm -rf /var/lib/apt/lists/*
-
-#Disable the SUID sandbox so that chrome can launch without being in a privileged container
-RUN dpkg-divert --add --rename --divert /opt/google/chrome/google-chrome.real /opt/google/chrome/google-chrome \
-        && echo "#! /bin/bash\nexec /opt/google/chrome/google-chrome.real --no-sandbox --disable-setuid-sandbox \"\$@\"" > /opt/google/chrome/google-chrome \
-        && chmod 755 /opt/google/chrome/google-chrome
-
-#Chrome Driver
-ARG CHROME_DRIVER_VERSION=2.37
-RUN mkdir -p /opt/selenium \
-        && curl http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -o /opt/selenium/chromedriver_linux64.zip \
-        && cd /opt/selenium; unzip /opt/selenium/chromedriver_linux64.zip; rm -rf chromedriver_linux64.zip; ln -fs /opt/selenium/chromedriver /usr/local/bin/chromedriver;
-
 RUN useradd -ms /bin/bash ${USERNAME}
-
 WORKDIR ${HOME}/time-tracker-ui
 COPY . .
-RUN rm -f .env
 RUN chown ${USERNAME}:${USERNAME} -R ${HOME}/time-tracker-ui
 RUN chmod -R 777 ${HOME}/time-tracker-ui
 
-
 USER ${USERNAME}
 RUN npm cache clean --force && npm install
-EXPOSE 4200
-EXPOSE 9876
-CMD npm run config && ${HOME}/time-tracker-ui/node_modules/.bin/ng serve --host 0.0.0.0 --disableHostCheck
-
-
 
 FROM development as build
 COPY .env .
 RUN npm run config && 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 .env /usr/share/nginx/html
 RUN chown -R ${USERNAME}:${USERNAME} /var/cache/nginx && \
     chown -R ${USERNAME}:${USERNAME} /var/log/nginx && \
     chown -R ${USERNAME}:${USERNAME} /etc/nginx/conf.d
@@ -74,4 +36,4 @@ RUN touch /var/run/nginx.pid && chown -R ${USERNAME}:${USERNAME} /var/run/nginx.
 
 # USER ${USERNAME}
 
-EXPOSE 80
+EXPOSE 80

Makefile

@@ -11,15 +11,15 @@ help: ## Show this help message.
 
 .PHONY: build
 build: ## Create docker image with dependencies needed for development.
-	docker-compose build
+	docker-compose build timetracker_ui
 
 .PHONY: cleanup
 cleanup: ## Delete image timetracker_ui
 	docker rmi timetracker_ui
 
 .PHONY: run
-run: ## Execute timetracker_ui docker containe.
-	docker-compose up -d
+run: ## Execute timetracker_ui dev docker containe.
+	docker-compose up -d timetracker_ui
 
 .PHONY: logs
 logs: ## Show logs of timetracker_ui.
@@ -40,8 +40,9 @@ remove: ## Delete container timetracker_ui.
 
 .PHONY: test
 test: ## Run all tests on docker container timetracker_ui at the CLI.
-	docker-compose -f docker-compose.yml up -d
-	docker exec timetracker_ui bash -c "npm run ci-test"
+	docker-compose build timetracker_ui_test
+	docker-compose up -d timetracker_ui_test
+	docker logs -f timetracker_ui_test
 
 .PHONY: testdev
 testdev: ## Run all tests on docker container timetracker_ui at the Dev
@@ -59,7 +60,7 @@ build_prod: ## Create docker image with dependencies needed for production.
 
 .PHONY: run_prod
 run_prod: ## Execute timetracker_ui_prod docker container.
-	docker run -d -p 4200:4200 --name timetracker_ui_prod timetracker_ui_prod
+	docker run -d -p 80:80 --env-file ./.env --name timetracker_ui_prod timetracker_ui_prod
 
 .PHONY: stop_prod
 stop_prod: ## Stop container timetracker_ui_prod.

docker-compose.yml

@@ -1,12 +1,39 @@
 version: '3.9'
 services:
-  time-tracker-ui:
+  timetracker_ui:
     container_name: timetracker_ui
     image: timetracker_ui
     build:
-      target: development
       context: .
-      dockerfile: ./Dockerfile
+      dockerfile: ./Docker/Dockerfile.dev
+    ports:
+      - 4200:4200
+      - 9876:9876
+    environment:
+      AUTHORITY: ${AUTHORITY}
+      CLIENT_ID: ${CLIENT_ID}
+      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/
+      - ./e2e:/home/timetracker/time-tracker-ui/e2e/
+      - ./coverage:/home/timetracker/time-tracker-ui/coverage
+      - ./angular.json:/home/timetracker/time-tracker-ui/angular.json
+      - ./karma.conf.js:/home/timetracker/time-tracker-ui/karma.conf.js
+      - ./package.json:/home/timetracker/time-tracker-ui/package.json
+      - ./webpack.config.js:/home/timetracker/time-tracker-ui/webpack.config.js
+  timetracker_ui_test:
+    container_name: timetracker_ui_test
+    image: timetracker_ui_test
+    build:
+      context: .
+      dockerfile: ./Docker/Dockerfile.test
     ports:
       - 4200:4200
       - 9876:9876
@@ -21,4 +48,3 @@ services:
       AUTHORITY_JSON: ${AUTHORITY_JSON}
       CLIENT_ID_JSON: ${CLIENT_ID_JSON}
       SCOPES_JSON: ${SCOPES_JSON}
-