adding security in Docker container with ci cd

.github/workflows/cicd.yml

@@ -3,15 +3,13 @@ name: Ci and Cd
 on:
   push:
     branches:
-      - develop
-      - main
-      - fixenv
+      - "*"
 
 jobs:
-  develop:
+  linting:
     name: Test and linting
     runs-on: ubuntu-latest
-  
+
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -29,34 +27,56 @@ jobs:
         working-directory: ./project
         run: npm run lint
 
-  staging:
+  build:
     name: Push to docker hub
     runs-on: ubuntu-22.04
-    if: ${{github.ref == 'refs/heads/fixenv'}}
+    needs: linting
+    if: ${{github.ref == 'refs/heads/main'}} || ${{github.ref == 'refs/heads/develop'}}
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+
+      - name: Linting Dockerfile
+        uses: hadolint/[email protected]
+        with:
+          dockerfile: Dockerfile
+          verbose: true
+          format: json
+
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
-          
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-
-      - name: Login into docker hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{secrets.DOCKER_USERNAME}}
-          password: ${{secrets.DOCKER_PASSWORD}}
 
       - name: Deploy frontend app to dockerhub
+        env:
+          DOCKER_CONTENT_TRUST: 1
         uses: docker/build-push-action@v5
         with:
           context: "{{defaultContext}}:project"
-          push: true
+          push: false
           tags: ${{secrets.DOCKER_USERNAME}}/portofolio:${{secrets.DOCKER_PORTOFOLIO_TAGS_APP}}
           secrets: |
             "VITE_SERVICE_ID=${{secrets.VITE_SERVICE_ID}}"
             "VITE_PUBLIC_KEY=${{secrets.VITE_PUBLIC_KEY}}"
-            "VITE_TEMPLATE_ID=${{secrets.VITE_TEMPLATE_ID}}"
+            "VITE_TEMPLATE_ID=${{secrets.VITE_TEMPLATE_ID}}"
+
+      - name: Run Trivy vulnerability scanner in fs mode
+        uses: aquasecurity/[email protected]
+        with:
+          scan-type: 'image'
+          scan-ref: ${{secrets.DOCKER_USERNAME}}/portofolio:${{secrets.DOCKER_PORTOFOLIO_TAGS_APP}}
+          trivy-config: trivy.yaml
+
+      - name: Login into docker hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{secrets.DOCKER_USERNAME}}
+          password: ${{secrets.DOCKER_PASSWORD}}
+
+      - name: Push Docker image to Docker Hub
+        run: |
+          docker push ${{ secrets.DOCKER_USERNAME }}/portofolio:${{ secrets.DOCKER_PORTOFOLIO_TAGS_APP }}

project/Dockerfile

@@ -22,13 +22,27 @@ RUN --mount=type=secret,id=VITE_TEMPLATE_ID,required=true,mode=0666 \
 # Use a lightweight web server to serve the app
 FROM nginx:alpine
 
+# Create a non-root user
+RUN addgroup -S runner && adduser -S syfikk -G runner
+
 COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 
 # Copy the build output to the Nginx web server directory
 COPY --from=build /app/dist /usr/share/nginx/html
 
+# Change ownership
+RUN chown -R syfikk:runner /usr/share/nginx/html /etc/nginx
+
 # Expose the port on which the app will run
+
+# Switch to non-root user
+USER syfikk
+
 EXPOSE 80
 
+# Adding healthcheck to container
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD curl --fail http://localhost:80/ || exit 1
+
 # Start Nginx server
 CMD ["nginx", "-g", "daemon off;"]

project/src/components/Achievement/AchievementImage.jsx

@@ -32,30 +32,20 @@ const AchievementImage = ({ src, title }) => {
         data-aos="zoom-in"
       />
       {modalBox && (
-        <div className="fixed top-28 z-40 " ref={modalRef}>
-          <div
-            className="shadow-xl minilaptop:flex hidden flex-col bg-white rounded-xl p-1 w-1/2"
-            style={{
-              top: "50%",
-              right: "50%",
-              transform: "translateX(50%)",
-            }}
-            data-aos="zoom-in"
-          >
-            <div className="w-full flex relative p-3 items-center justify-start flex-wrap">
-              <h1 className="minilaptop:text-lg text-sm font-bold text-black">
-                {title}
-              </h1>
-              <button
-                onClick={() => setModalBox(false)}
-                className="absolute hover:bg-purple-300 font-bold rounded-lg z-50 py-0  px-1 bottom-2 minilaptop:py-1 minilaptop:px-2 text-center hp:text-xl text-sm minilaptop:text-3xl text-black right-1"
-              >
-                x
-              </button>
-            </div>
-            <div className="flex w-full">
-              <img src={src} className="rounded-md border border-white" />
-            </div>
+        <div
+          className="fixed z-10 top-28 bg-white minilaptop:flex rounded-lg hidden"
+          style={{right: "400px"}}
+          ref={modalRef}
+        >
+          <div className="flex p-3 flex-col items-center justify-start flex-wrap">
+            <h1 className="minilaptop:text-lg py-2 text-sm font-bold text-wrap text-black">
+              {title}
+            </h1>
+            <img
+              src={src}
+              className="rounded-md border border-white"
+              width={"500px"}
+            />
           </div>
         </div>
       )}

project/src/components/Services/TechService.jsx

@@ -32,7 +32,7 @@ const TechService = ({
     <>
       <div
         onClick={() => setModalBox(true)}
-        className="lg:w-1/4 minilaptop:w-1/3 w-4/5 hp:m-0 mx-auto bg-white flex flex-wrap tablet:justify-start justify-center flex-col minilaptop:items-start items-center shadow-xl rounded-lg p-4 border-solid hover:bg-gray-300"
+        className="lg:w-1/4 cursor-pointer minilaptop:w-1/3 w-4/5 hp:m-0 mx-auto bg-white flex flex-wrap tablet:justify-start justify-center flex-col minilaptop:items-start items-center shadow-xl rounded-lg p-4 border-solid hover:bg-gray-300"
       >
         <div className="flex w-full text-left pb-3 tablet:items-start items-center flex-col justify-center">
           <h4 className="font-bold text-xl text-left">{title}</h4>
@@ -43,8 +43,8 @@ const TechService = ({
         </div>
       </div>
       {modalBox && (
-        <div className="fixed z-10" ref={modalRef}>
-          <div className="bg-white shadow-lg p-5 flex gap-10 rounded-lg">
+        <div className="fixed z-10 max-w-2xl" ref={modalRef}>
+          <div className="bg-white shadow-lg p-5 flex-wrap justify-center flex gap-10 rounded-lg">
             {icon.map((i) => {
               return (
                 <div

project/src/pages/Achievement.jsx

@@ -1,13 +1,14 @@
 import AchievementImage from "../components/Achievement/AchievementImage";
 import Headers from "../utils/Headers";
-import sertiSolid from "../assets/serti_solid.png"
+import sertiSolid from "../assets/serti_solid.png";
+import sertiFitcom from "../assets/serti_fitcom.png";
 import sertiAWSCloud from "../assets/sertidicodingaws.jpg";
 import sertiDicodingDasar from "../assets/sertidicodingdasar.jpg";
 import sertiGoogleCloud from "../assets/sertidicodinggooglecloud.jpg";
 import sertiProgrammingLogic from "../assets/sertidicodinglogic.jpg";
 import sertiJS from "../assets/sertidicodingjs.png";
 import sertiBackend from "../assets/sertibackend.png";
-import sertiC from "../assets/sertiC.png"
+import sertiC from "../assets/sertiC.png";
 
 const Achievement = () => {
   return (
@@ -50,9 +51,19 @@ const Achievement = () => {
             src={sertiC}
             title={"Sertificate Completed C basic"}
           />
-          <AchievementImage 
-          src={sertiSolid}
-          title={"Sertificate Completed Solid Principle"}
+          <AchievementImage
+            src={sertiSolid}
+            title={"Sertificate Completed Solid Principle"}
+          />
+        </div>
+      </div>
+      <div className="w-full px-10 pt-16 flex flex-col justify-center text-white">
+        <h1 className="font-bold text-2xl pb-2">Competition</h1>
+        <hr className="w-full text-xl font-bold" />
+        <div className="flex minilaptop:justify-start justify-center mx-auto items-center p-8 minilaptop:gap-20 gap-5 flex-wrap">
+          <AchievementImage
+            src={sertiFitcom}
+            title={"Sertificate Finalis Fitcom In STIKOM Surabaya"}
           />
         </div>
       </div>

project/src/pages/Services.jsx

@@ -1,7 +1,6 @@
 import {
   SiAnsible,
   SiArchlinux,
-  SiC,
   SiDocker,
   SiGit,
   SiGithub,
@@ -18,12 +17,12 @@ import {
   SiRust,
   SiUbuntu,
   SiVercel,
-  SiCircleci,
   SiVuedotjs,
   SiPhp,
   SiReact,
   SiIstio,
   SiNginx,
+  SiSwagger,
 } from "react-icons/si";
 import {
   BiLogoTailwindCss,
@@ -36,7 +35,7 @@ import {
   BiServer,
 } from "react-icons/bi";
 import { SiMysql, SiMongodb, SiExpress } from "react-icons/si";
-import { FaBootstrap, FaJira, FaTrello } from "react-icons/fa";
+import { FaBootstrap, FaGitlab, FaTrello } from "react-icons/fa";
 import TechService from "../components/Services/TechService";
 import Headers from "../utils/Headers";
 
@@ -56,11 +55,11 @@ const Services = () => {
           icon={[
             {
               icon: <BiLogoHtml5 size={"40px"} color="red" />,
-              name: "HTML5",
+              name: "HTML",
             },
             {
               icon: <BiLogoCss3 size={"40px"} color="blue" />,
-              name: "CSS3",
+              name: "CSS",
             },
             {
               icon: <BiLogoJavascript size={"40px"} color="yellow" />,
@@ -72,7 +71,7 @@ const Services = () => {
             },
             {
               icon: <BiLogoTailwindCss size={"40px"} color="skyBlue" />,
-              name: "TailwindCSS",
+              name: "Tailwind",
             },
             {
               icon: <FaBootstrap size={"40px"} color="blue" />,
@@ -86,11 +85,11 @@ const Services = () => {
           icon={[
             {
               icon: <BiLogoNodejs size={"40px"} color="green" />,
-              name: "Node.js",
+              name: "NodeJS",
             },
             {
               icon: <SiExpress size={"40px"} color="black" />,
-              name: "Express.js",
+              name: "ExpressJS",
             },
             {
               icon: <SiNestjs size={"40px"} color="red" />,
@@ -141,18 +140,17 @@ const Services = () => {
               icon: <SiVuedotjs size="40px" color="darkgreen" />,
               name: "VueJS",
             },
-            { icon: <SiReact size={"40px"} color="lightblue" /> },
+            { icon: <SiReact size={"40px"} color="lightblue" />, name: "ReactJS" },
           ]}
           description="I can build frontend app with NextJS"
         />
         <TechService
           title={"Others"}
           icon={[
             { icon: <SiGit size={"40px"} color="red" />, name: "Git" },
-
+            {icon: <SiSwagger size={"40px"} color="black"/> , name: "Swagger"},
             { icon: <SiGithub size={"40px"} color="black" />, name: "Github" },
             { icon: <FaTrello size={"40px"} color="blue" />, name: "Trello" },
-            { icon: <FaJira size={"40px"} color="blue" />, name: "Jira" },
           ]}
           description="I knows VCS, and Project management tools"
         />
@@ -199,8 +197,8 @@ const Services = () => {
               name: "Github Actions",
             },
             {
-              icon: <SiCircleci size={"40px"} color="black" />,
-              name: "CircleCI",
+              icon: <FaGitlab size={"40px"} color="red" />,
+              name: "Gitlab",
             },
             {
               icon: <SiIstio size={"40px"} color="lightblue"/>,
@@ -236,7 +234,6 @@ const Services = () => {
               name: "PHP",
             },
             { icon: <SiRust size={"40px"} color="black" />, name: "Rust" },
-            { icon: <SiC size={"40px"} color="darkBlue" />, name: "C" },
           ]}
           description="I am familiar with these programming languages"
         />

trivy.yaml

@@ -0,0 +1,5 @@
+format: table
+exit-code: 1
+severity: CRITICAL
+ignore-unfixed: false
+vuln-type: 'os, library'