Split dockerfiles to dev, prod and test

Docker/dev.Dockerfile

@@ -0,0 +1,18 @@
+FROM node:14
+
+ENV USERNAME timetracker
+ENV HOME /home/${USERNAME}
+RUN useradd -ms /bin/bash ${USERNAME}
+
+WORKDIR ${HOME}/time-tracker-ui
+COPY . .
+# RUN rm -f .env
+# COPY .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

Docker/prod.Dockerfile

@@ -0,0 +1,43 @@
+FROM node:14 AS development
+
+ENV USERNAME timetracker
+ENV HOME /home/${USERNAME}
+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
+RUN touch /var/run/nginx.pid && chown -R ${USERNAME}:${USERNAME} /var/run/nginx.pid
+
+# FIXME: Actually if we can deploy to azure in port 80 we need a root user
+# Maybe we can refactor this dockerfile to use root user directly this is not a good approach y
+# security terms. It's a good practice to have rootless in containers so for this
+# we can to refactor this dockerfile and the terraform module to deploy in other ports because
+# Ports below 1024 needs root permisions.
+
+# USER ${USERNAME}
+
+EXPOSE 80

Docker/test.Dockerfile

@@ -0,0 +1,45 @@
+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 && npm run test

Makefile

@@ -9,17 +9,17 @@ help: ## Show this help message.
 	@grep --no-filename -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
 	 sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
 
-.PHONY: build
-build: ## Create docker image with dependencies needed for development.
-	docker-compose build
+.PHONY: build_dev
+build_dev: ## Create docker image with dependencies needed for development.
+	docker-compose build timetracker_ui_dev
 
 .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_dev
 
 .PHONY: logs
 logs: ## Show logs of timetracker_ui.
@@ -55,11 +55,11 @@ publish: require-acr-arg require-image_tag-arg ## Upload a docker image to the s
 
 .PHONY: build_prod
 build_prod: ## Create docker image with dependencies needed for production.
-	docker build --target production -t timetracker_ui_prod -f Dockerfile .
+	docker-compose build timetracker_ui_prod
 
 .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,56 @@
 version: '3.9'
 services:
-  time-tracker-ui:
-    container_name: timetracker_ui
-    image: timetracker_ui
+  timetracker_ui_dev:
+    container_name: timetracker_ui_dev
+    image: timetracker_ui_dev
     build:
-      target: development
       context: .
-      dockerfile: ./Dockerfile
+      dockerfile: ./Docker/dev.Dockerfile
+    ports:
+      - 4200:4200
+      - 9876:9876
+    environment:
+      CHROME_BIN: /opt/google/chrome/google-chrome
+      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}
+
+
+  timetracker_ui_prod:
+    container_name: timetracker_ui_prod
+    image: timetracker_ui_prod
+    build:
+      # target: production
+      context: .
+      dockerfile: ./Docker/prod.Dockerfile
+    ports:
+      - 4200:4200
+      - 9876:9876
+    environment:
+      CHROME_BIN: /opt/google/chrome/google-chrome
+      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}
+
+  timetracker_ui_test:
+    container_name: timetracker_ui_test
+    image: timetracker_ui_test
+    build:
+      # target: production
+      context: .
+      dockerfile: ./Docker/test.Dockerfile
     ports:
       - 4200:4200
       - 9876:9876