gh action auto deploy setup

Author: nil1729

.github/workflows/codeql-analysis.yml

@@ -1,23 +1,33 @@
-name: Deploy to My Server
+name: Build & Deploy
+
 on:
   push:
     branches: [master]
+
 jobs:
   build:
-    name: Build
+    name: Building Image
     runs-on: ubuntu-latest
     steps:
-      - name: Deploying Poll App to the Production
+      - uses: actions/checkout@v3
+      - name: Login to Container Registry
+        run: echo ${{ secrets.REGISTRY_PASSWORD }} | docker login ${{ secrets.CONTAINER_REGISTRY }} -u ${{ secrets.REGISTRY_USERNAME }} --password-stdin
+
+      - name: Build the latest Docker image
+        run: docker build  --tag ${{ secrets.IMAGE_NAME }} .
+
+      - name: Push the latest Docker image
+        run: docker push ${{ secrets.IMAGE_NAME }}
+
+  deploy:
+    name: Deploying Image
+    runs-on: ubuntu-latest
+    needs: [build]
+    steps:
+      - name: Deploying application to remote host
         uses: appleboy/ssh-action@master
         with:
-          host: ${{ secrets.SSH_HOST }}
-          username: ${{ secrets.SSH_USERNAME }}
-          password: ${{ secrets.SSH_PASSWORD }}
-          port: ${{ secrets.SSH_PORT }}
-          script: |
-            export NVM_DIR="$HOME/.nvm"
-            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-            cd poll-app
-            git pull origin master
-            npm install
-            pm2 restart poll_app
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USERNAME }}
+          password: ${{ secrets.SERVER_PASSWORD }}
+          script: bash sync.sh ${{ secrets.APPLICATION_NAME }}

.github/workflows/deploy.yml

@@ -1,4 +1,6 @@
 node_modules
 default.json
 production.json
-.env
+.env
+package-lock.json
+.vscode

.gitignore

@@ -1,16 +1,16 @@
 /* Just To Remove Comment */
-@import url("https://fonts.googleapis.com/css2?family=MuseoModerno&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Sriracha&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
 .home {
   user-select: none;
 }
 .home h1 {
-  font-family: "MuseoModerno", cursive;
+  font-family: 'Merriweather', serif;
   color: rgb(240, 40, 40);
   text-shadow: 0 0 2px rgb(68, 67, 67);
 }
 .home h3 {
-  font-family: "Sriracha", cursive;
+  font-family: 'Sriracha', cursive;
   color: rgb(79, 107, 231);
 }
 @media only screen and (max-width: 600px) {

public/styles/home.css

@@ -4,14 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Survey Poll App</title>
-    <script
-      src="https://kit.fontawesome.com/57aeb32e6c.js"
-      crossorigin="anonymous"
-    ></script>
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
+    <script src="https://kit.fontawesome.com/57aeb32e6c.js" crossorigin="anonymous"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
@@ -41,7 +35,7 @@
               class="brand-logo center header-title red-text"
               style="
                 letter-spacing: 1px;
-                font-family: 'MuseoModerno', cursive;
+                font-family: 'Merriweather', serif;
                 text-shadow: 0 0 2px rgb(68, 67, 67);
               "
               >Survey Poll App</span
@@ -68,10 +62,7 @@
       <ul id="slide-out" class="sidenav">
         <% if(typeof user === 'undefined') {%>
         <li>
-          <a
-            class="btn waves-effect waves-light red darken-2"
-            href="/auth/google"
-          >
+          <a class="btn waves-effect waves-light red darken-2" href="/auth/google">
             <i class="fab fa-google white-text"></i>
             <span>Login With Google</span>
           </a>
@@ -94,20 +85,12 @@
         <% }else{ %>
         <li class="d-flex-start p-1-2">
           <div class="avatar-stamp">
-            <img
-              src="<%= user.avatar  %>"
-              alt=""
-              class="circle responsive-img"
-            />
+            <img src="<%= user.avatar  %>" alt="" class="circle responsive-img" />
           </div>
-          <p class="center flow-text ml-1">
-            <%= user.firstName %> <%= user.lastName %>
-          </p>
+          <p class="center flow-text ml-1"><%= user.firstName %> <%= user.lastName %></p>
         </li>
         <li>
-          <a href="/users/dashboard"
-            ><i class="fas fa-2x fa-user-cog"></i> Dashboard</a
-          >
+          <a href="/users/dashboard"><i class="fas fa-2x fa-user-cog"></i> Dashboard</a>
         </li>
         <li>
           <a href="/users/survey/<%= user._id  %>"
@@ -116,14 +99,11 @@
         </li>
         <li>
           <a href="/survey/public"
-            ><i class="material-icons left" style="font-size: 2.5em">poll</i
-            >Public Surveys</a
+            ><i class="material-icons left" style="font-size: 2.5em">poll</i>Public Surveys</a
           >
         </li>
         <li>
-          <a href="/auth/logout"
-            ><i class="fas fa-2x fa-sign-out-alt"></i>Logout</a
-          >
+          <a href="/auth/logout"><i class="fas fa-2x fa-sign-out-alt"></i>Logout</a>
         </li>
         <% } %>
       </ul>