chore(ci): add docker for frontend

- add docker configs for front-end
- minor modification in styles.scss

Author: Mubarak Imam

.docker/docker-compose.yml

@@ -2,6 +2,7 @@ version: '3'
 
 volumes:
   nestpoc_api:
+  nestpoc_ui:
 
 services:
   backend:
@@ -18,3 +19,16 @@ services:
       - '3000:3000'
     environment:
       PORT: 3000
+
+  frontend:
+    build:
+      context: ../nestpoc-ui
+      dockerfile: ./Dockerfile
+    command: /bin/sh
+    volumes:
+      - nestpoc_ui:/home/node/app/node_modules
+      - ../nestpoc-ui:/home/node/app
+    ports:
+      - ${UI_PORT}:80
+    environment:
+      PORT: 80

.gitlab-ci.yml

@@ -16,19 +16,29 @@ variables:
   # improved performance.
   DOCKER_DRIVER: overlay2
   CI_REGISTRY_PATH: $CI_REGISTRY/$CI_USERNAME/$CI_PROJECT_NAME
+  CI_FRONTEND_IMAGE: nestpoc-ui
+  CI_BACKEND_IMAGE: nestpoc-api
 
 services:
   - docker:dind
 
 
 stages:
-  - Build Docker Image
+  - Build Backend Image
+  - Build Frontend Image
   # - Push Image to Registry
 
+before_script:
+  - docker login -u $CI_USERNAME -p $CI_ACCESS_TOKEN $CI_REGISTRY
+
 backend:
-  stage: Build Docker Image
-  before_script:
-    - docker login -u $CI_USERNAME -p $CI_ACCESS_TOKEN $CI_REGISTRY
+  stage: Build Backend Image
+  script:
+    - docker build -t $CI_REGISTRY_PATH/$CI_BACKEND_IMAGE:latest ./nestpoc-api
+    - docker push $CI_REGISTRY_PATH/$CI_BACKEND_IMAGE:latest
+
+frontend:
+  stage: Build Frontend Image
   script:
-    - docker build -t $CI_REGISTRY_PATH/$CI_BACKEND_IMG:latest ./nestpoc-api
-    - docker push $CI_REGISTRY_PATH/$CI_BACKEND_IMG:latest
+    - docker build -t $CI_REGISTRY_PATH/$CI_FRONTEND_IMAGE:latest ./nestpoc-ui
+    - docker push $CI_REGISTRY_PATH/$CI_FRONTEND_IMAGE:latest

nestpoc-ui/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:10-alpine as build
+LABEL application="nestpoc-frontend"
+ENV NODE_ENV=production
+ENV APP_DIR=/home/node/app
+RUN npm install yarn @angular/cli ng-tailwindcss -g
+RUN mkdir -p ${APP_DIR}/node_modules && chown -R node:node ${APP_DIR}
+WORKDIR ${APP_DIR}
+USER node
+COPY --chown=node:node package.json yarn.lock ./
+RUN yarn add @angular-devkit/build-angular tailwindcss --dev
+RUN yarn install
+COPY --chown=node:node ./src ./src
+COPY --chown=node:node angular.json ng-tailwind.js tailwind.config.js tsconfig.json ./
+RUN yarn build --prod
+
+FROM nginx:alpine as server
+RUN rm -rf /usr/share/nginx/html/*
+COPY --from=build /home/node/app/dist/nest-ui /usr/share/nginx/html
+
+EXPOSE 80

nestpoc-ui/src/styles.scss

@@ -1,6 +1,32 @@
 @tailwind preflight;
 
-@tailwind component;
+.container{
+  width: 100%
+}
+
+@media (min-width: 640px){
+  .container{
+    max-width: 640px
+  }
+}
+
+@media (min-width: 768px){
+  .container{
+    max-width: 768px
+  }
+}
+
+@media (min-width: 1024px){
+  .container{
+    max-width: 1024px
+  }
+}
+
+@media (min-width: 1280px){
+  .container{
+    max-width: 1280px
+  }
+}
 
 .appearance-none{
   -webkit-appearance: none;