Merge pull request #2321 from rajdas98/frontend-dockerimage-change

chore(litmus-portal)- Changing litmusportal frontend Nginx image to unprivileged nginx image

.betterci/ci-k8s-manifest.yml

@@ -41,7 +41,7 @@ spec:
   ports:
     - name: http
       port: 9091
-      targetPort: 80
+      targetPort: 8080
   selector:
     component: litmusportal-frontend
 ---

.circleci/config.yml

@@ -42,6 +42,7 @@ jobs:
             echo 'export AUTHENTICATION_SERVER_IMAGE="litmusportal-auth-server"' >> workspace/env-vars
             echo 'export FRONTEND_IMAGE="litmusportal-frontend"' >> workspace/env-vars
             echo 'export SUBSCRIBER_IMAGE="litmusportal-subscriber"' >> workspace/env-vars
+            echo 'export FRONTEND_UNPRIVILEGED_IMAGE="litmusportal-unprivileged-frontend"' >> workspace/env-vars
             echo 'export IMGTAG="ci"' >> workspace/env-vars
             cat workspace/env-vars >> $BASH_ENV
             source $BASH_ENV
@@ -109,6 +110,28 @@ jobs:
           root: /tmp/workspace
           paths:
             - litmusportal-frontend.tar
+  docker-build-unprivileged-frontend:
+    machine:
+      image: circleci/classic:201808-01
+      resource_class: large
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - run: |
+          cat /tmp/workspace/env-vars >> $BASH_ENV
+          source $BASH_ENV
+      - checkout
+      - run:
+          name: Build unprivileged frontend docker image
+          command: docker build . -f Dockerfile-Unprivileged -t ${REPONAME}/${FRONTEND_UNPRIVILEGED_IMAGE}:${IMGTAG}
+          working_directory: ~/project/litmus-portal/frontend
+      - run:
+          name: Save unprivileged frontend docker image
+          command: docker save -o /tmp/workspace/${FRONTEND_UNPRIVILEGED_IMAGE}.tar ${REPONAME}/${FRONTEND_UNPRIVILEGED_IMAGE}:${IMGTAG}
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - litmusportal-unprivileged-frontend.tar
   docker-push:
     machine:
       image: circleci/classic:201808-01
@@ -127,18 +150,22 @@ jobs:
             docker load -i /tmp/workspace/${SUBSCRIBER_IMAGE}.tar
             docker load -i /tmp/workspace/${AUTHENTICATION_SERVER_IMAGE}.tar
             docker load -i /tmp/workspace/${FRONTEND_IMAGE}.tar
+            docker load -i /tmp/workspace/${FRONTEND_UNPRIVILEGED_IMAGE}.tar
       - run:
-          name: Pushing graphql server
+          name: Pushing graphql server image
           command: bash ./hack/push --TYPE=ci --REPONAME=${REPONAME} --IMGNAME=${GRAPHQL_SERVER_IMAGE} --IMGTAG=${IMGTAG}
       - run:
-          name: Pushing frontend server
+          name: Pushing frontend image
           command: bash ./hack/push --TYPE=ci --REPONAME=${REPONAME} --IMGNAME=${FRONTEND_IMAGE} --IMGTAG=${IMGTAG}
       - run:
-          name: Pushing auth server
+          name: Pushing auth server image
           command: bash ./hack/push --TYPE=ci --REPONAME=${REPONAME} --IMGNAME=${AUTHENTICATION_SERVER_IMAGE} --IMGTAG=${IMGTAG}
       - run:
-          name: Pushing subscriber server
+          name: Pushing subscriber server image
           command: bash ./hack/push --TYPE=ci --REPONAME=${REPONAME} --IMGNAME=${SUBSCRIBER_IMAGE} --IMGTAG=${IMGTAG}
+      - run:
+          name: Pushing unprivileged frontend image
+          command: bash ./hack/push --TYPE=ci --REPONAME=${REPONAME} --IMGNAME=${FRONTEND_UNPRIVILEGED_IMAGE} --IMGTAG=${IMGTAG}
   release:
     machine:
       image: circleci/classic:201808-01
@@ -157,21 +184,25 @@ jobs:
             docker load -i /tmp/workspace/${SUBSCRIBER_IMAGE}.tar
             docker load -i /tmp/workspace/${AUTHENTICATION_SERVER_IMAGE}.tar
             docker load -i /tmp/workspace/${FRONTEND_IMAGE}.tar
+            docker load -i /tmp/workspace/${FRONTEND_UNPRIVILEGED_IMAGE}.tar
       - run:
           name: Docker images
           command: docker images
       - run:
-          name: Pushing graphql server
+          name: Pushing graphql server image
           command: bash ./hack/push --TYPE=release --REPONAME=${REPONAME} --IMGNAME=${GRAPHQL_SERVER_IMAGE} --IMGTAG=${IMGTAG}
       - run:
-          name: Pushing frontend server
+          name: Pushing frontend image
           command: bash ./hack/push --TYPE=release --REPONAME=${REPONAME} --IMGNAME=${FRONTEND_IMAGE} --IMGTAG=${IMGTAG}
       - run:
-          name: Pushing auth server
+          name: Pushing auth server image
           command: bash ./hack/push --TYPE=release --REPONAME=${REPONAME} --IMGNAME=${AUTHENTICATION_SERVER_IMAGE} --IMGTAG=${IMGTAG}
       - run:
-          name: Pushing subscriber server
+          name: Pushing subscriber server image
           command: bash ./hack/push --TYPE=release --REPONAME=${REPONAME} --IMGNAME=${SUBSCRIBER_IMAGE} --IMGTAG=${IMGTAG}
+      - run:
+          name: Pushing unprivileged frontend image
+          command: bash ./hack/push --TYPE=release --REPONAME=${REPONAME} --IMGNAME=${FRONTEND_UNPRIVILEGED_IMAGE} --IMGTAG=${IMGTAG}
 
 workflows:
   version: 2
@@ -205,10 +236,21 @@ workflows:
           filters:
             tags:
               only: /.*/
+      - docker-build-unprivileged-frontend:
+          requires:
+            - setup-env
+            - backend-services-checks
+            - frontend-services-checks
+          filters:
+            branches:
+              only:
+                - master
+                - /^v.*/
       - docker-push:
           requires:
             - docker-build-backend
             - docker-build-frontend
+            - docker-build-unprivileged-frontend
           filters:
             branches:
               only:
@@ -218,6 +260,7 @@ workflows:
           requires:
             - docker-build-backend
             - docker-build-frontend
+            - docker-build-unprivileged-frontend
           filters:
             ## release jobs needs to be run for tagged releases alone & not for any branch commits
             branches:

litmus-portal/cluster-k8s-manifest.yml

@@ -39,7 +39,7 @@ spec:
           image: litmuschaos/litmusportal-frontend:ci
           imagePullPolicy: Always
           ports:
-            - containerPort: 80
+            - containerPort: 8080
           env:
             - name: AGENT_SCOPE
               valueFrom:
@@ -57,7 +57,7 @@ spec:
   ports:
     - name: http
       port: 9091
-      targetPort: 80
+      targetPort: 8080
   selector:
     component: litmusportal-frontend
 ---

litmus-portal/frontend/Dockerfile

@@ -27,5 +27,5 @@ FROM nginx:alpine
 RUN rm /etc/nginx/conf.d/default.conf
 COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
 COPY  --from=react-build /frontend/build /usr/share/nginx/html
-EXPOSE 80
+EXPOSE 8080
 CMD ["nginx", "-g", "daemon off;"]

litmus-portal/frontend/Dockerfile-Unprivileged

@@ -0,0 +1,36 @@
+# Docker Image which is used as foundation to create
+# a custom Docker Image with this Dockerfile
+FROM node:12.18.0 as react-build
+
+# Add Maintainer Info
+LABEL maintainer="LitmusChaos"
+
+# A directory within the virtualized Docker environment
+# Becomes more relevant when using Docker Compose later
+WORKDIR /frontend
+
+# Copies package.json and package-lock.json to Docker environment
+COPY package.json ./
+COPY package-lock.json ./
+
+# Installs all node packages except Cypress
+RUN CYPRESS_INSTALL_BINARY=0 npm install
+
+# Copies everything over to Docker environment
+COPY . ./
+
+# Finally runs the application
+RUN npm run build
+
+# Stage 2: the production environment
+FROM nginxinc/nginx-unprivileged
+
+# Add Maintainer Info
+LABEL maintainer="LitmusChaos"
+
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+COPY  --from=react-build /frontend/build /usr/share/nginx/html
+
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

litmus-portal/frontend/nginx/nginx.conf

@@ -1,5 +1,5 @@
 server {
-    listen       80;
+    listen       8080;
     server_name  localhost;
     #charset koi8-r;
     #access_log  /var/log/nginx/host.access.log  main;

litmus-portal/namespaced-K8s-template.yml

@@ -35,7 +35,7 @@ spec:
               memory: 400Mi
           imagePullPolicy: Always
           ports:
-            - containerPort: 80
+            - containerPort: 8080
           env:
             - name: AGENT_SCOPE
               valueFrom:
@@ -52,7 +52,7 @@ spec:
   ports:
     - name: http
       port: 9091
-      targetPort: 80
+      targetPort: 8080
   selector:
     component: litmusportal-frontend
 ---