update customer react + CD frontend react

CarolinaOliiveira · Jan 29, 2024 · 7837f0a · 7837f0a
1 parent 1c2d80d
commit 7837f0a
Show file tree

Hide file tree

Showing 17 changed files with 433 additions and 78 deletions.
diff --git a/.ci/build-publish.sh b/.ci/build-publish.sh
@@ -0,0 +1,13 @@
+: "${USERNAME:?USERNAME not set or empty}"
+: "${REPO:?REPO not set or empty}"
+: "${TAG:?TAG not set or empty}"
+
+docker buildx create --use
+
+docker buildx build \
+    --platform=linux/amd64,linux/arm64 \
+    -t "${USERNAME}/${REPO}:${TAG}" \
+    -t "${USERNAME}/${REPO}:latest" \
+    "${@:2}" \
+    --push \
+    "$1"
diff --git a/.github/workflows/backend-cd.yml b/.github/workflows/backend-cd.yml
@@ -20,7 +20,7 @@ jobs:
           POSTGRES_DB: customer
         ports:
           - 5332:5432
-        options: >-
+        options:
           --health-cmd pg_isready
           --health-interval 10s
           --health-timeout 5s
@@ -69,10 +69,10 @@ jobs:
       - name: Update Dockerrun.aws.json api image tag with build number
         run: |
           echo "Dockerrun.aws.json before updating tag"
-          cat Dockerrun.aws.json
-          sed -i -E 's_(pg47101/amigoscode-api:)([^"]*)_\1'${{steps.build-number.outputs.BUILD_NUMBER}}'_' Dockerrun.aws.json
+          cat ../Dockerrun.aws.json
+          sed -i -E 's_(pg47101/amigoscode-api:)([^"]*)_\1'${{steps.build-number.outputs.BUILD_NUMBER}}'_' ../Dockerrun.aws.json
           echo "Dockerrun.aws.json after updating tag"
-          cat Dockerrun.aws.json
+          cat ../Dockerrun.aws.json
       - name: Send Slack Message
         run: >
           curl -X POST -H 'Content-type: application/json' 
@@ -90,7 +90,7 @@ jobs:
           version_label: ${{ steps.build-number.outputs.BUILD_NUMBER }}
           version_description: ${{ github.SHA }}
           region: ${{ secrets.EB_REGION }}
-          deployment_package: backend/Dockerrun.aws.json
+          deployment_package: Dockerrun.aws.json
       - name: Send Slack Message
         run: >
           curl -X POST -H 'Content-type: application/json' 
@@ -102,7 +102,7 @@ jobs:
         run: |
           git config user.name github-actions
           git config user.email [email protected]
-          git add .
+          git add ../Dockerrun.aws.json
           git commit -m "Update Dockerrun.aws.json docker image with new tag ${{ steps.build-number.outputs.BUILD_NUMBER }}"
           git push
       - name: Send Slack Message

diff --git a/.github/workflows/frontend-react-cd.yml b/.github/workflows/frontend-react-cd.yml
@@ -0,0 +1,102 @@
+name: CD - Deploy React Frontend
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - frontend/react/**
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend/react
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Slack commit message and sha
+        run: >
+          curl -X POST -H 'Content-type: application/json' --data '{"text":" :github:  https://github.com/CarolinaOliiveira/spring-boot-fullstack/commit/${{ github.sha }} - ${{ github.event.head_commit.message }}"}' ${{ secrets.SLACK_WEBHOOK_URL }}
+      - name: Send Slack Message
+        run: >
+          curl -X POST -H 'Content-type: application/json' --data '{"text":"Deployment started :progress_bar: :fingerscrossed:"}' ${{ secrets.SLACK_WEBHOOK_URL }}
+      - name: Set build number
+        id: build-number
+        run: echo "BUILD_NUMBER=$(date '+%d.%m.%Y.%H.%M.%S')" >> $GITHUB_OUTPUT
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Docker Build and Push
+        run: |
+          chmod +x ../../.ci/build-publish.sh
+          USERNAME=pg47101 \
+          REPO=amigoscode-react \
+          TAG=%{{ steps.build-number.outputs.BUILD_NUMBER }} \
+          ../../.ci/build-publish.sh .\
+            --build-arg api_base_url=http://amigoscode-api-env.eba-ugqm2msm.eu-west-3.elasticbeanstalk.com:8080
+      - name: Send Slack Message
+        run: >
+          curl -X POST -H 'Content-type: application/json' 
+          --data '
+          {"text":":docker: Image tag: ${{steps.build-number.outputs.BUILD_NUMBER}} pushed to docker hub"}
+          ' 
+          ${{ secrets.SLACK_WEBHOOK_URL }}
+      - name: Update Dockerrun.aws.json api image tag with build number
+        run: |
+          echo "Dockerrun.aws.json before updating tag"
+          cat ../Dockerrun.aws.json
+          sed -i -E 's_(pg47101/amigoscode-react:)([^"]*)_\1'${{steps.build-number.outputs.BUILD_NUMBER}}'_' ../../Dockerrun.aws.json
+          echo "Dockerrun.aws.json after updating tag"
+          cat ../Dockerrun.aws.json
+      - name: Send Slack Message
+        run: >
+          curl -X POST -H 'Content-type: application/json' 
+          --data '
+          {"text":":aws: Starting deployment to EBS"}
+          ' 
+          ${{ secrets.SLACK_WEBHOOK_URL }}
+      - name: Deploy to Elastic Bean stalk
+        uses: einaregilsson/beanstalk-deploy@v21
+        with:
+          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          application_name: ${{ secrets.EB_APPLICATION_NAME }}
+          environment_name: ${{ secrets.EB_ENVIRONMENT_NAME }}
+          version_label: ${{ steps.build-number.outputs.BUILD_NUMBER }}
+          version_description: ${{ github.SHA }}
+          region: ${{ secrets.EB_REGION }}
+          deployment_package: Dockerrun.aws.json
+          wait_for_environment_recovery: 60
+      - name: Send Slack Message
+        run: >
+          curl -X POST -H 'Content-type: application/json' 
+          --data '
+          {"text":":githubloading: Commiting to repo"}
+          ' 
+          ${{ secrets.SLACK_WEBHOOK_URL }}
+      - name: Commit push Dockerrun.aws.json
+        run: |
+          git config user.name github-actions
+          git config user.email [email protected]
+          git add ../../Dockerrun.aws.json
+          git commit -m "Update Dockerrun.aws.json docker image with new tag ${{ steps.build-number.outputs.BUILD_NUMBER }}"
+          git push
+      - name: Send Slack Message
+        run: >
+          curl -X POST -H 'Content-type: application/json' 
+          --data '
+          {"text":":party_blob Deployment and commit complete"}
+          ' 
+          ${{ secrets.SLACK_WEBHOOK_URL }}
+      - name: Send Slack Message
+        if: always()
+        run: >
+          curl -X POST -H 'Content-type: application/json' 
+          --data '{"text":"Job Status ${{ job.status }}"}' 
+          ${{ secrets.SLACK_WEBHOOK_URL }}
+
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/backend/Dockerrun.aws.json → Dockerrun.aws.json b/backend/Dockerrun.aws.json → Dockerrun.aws.json
@@ -1,21 +1,33 @@
 {
   "AWSEBDockerrunVersion": 2,
   "containerDefinitions": [
+    {
+      "name": "amigoscode-react",
+      "image": "pg47101/amigoscode-react:aws",
+      "essential": true,
+      "memory": 256,
+      "portMappings": [
+        {
+          "hostPort": 80,
+          "containerPort": 5173
+        }
+      ]
+    },
     {
       "name": "amigoscode-api",
-      "image": "pg47101/amigoscode-api:latest",
+      "image": "pg47101/amigoscode-api:25.01.2024.22.13.22",
       "essential": true,
       "memory": 512,
       "portMappings": [
         {
-          "hostPort": 80,
+          "hostPort": 8080,
           "containerPort": 8080
         }
       ],
       "environment": [
         {
           "name": "SPRING_DATASOURCE_URL",
-          "value": "jdbc:postgresql://awseb-e-cpppbiucth-stack-awsebrdsdatabase-mo7vu79g2xpj.crmoqeq2mqmz.eu-west-3.rds.amazonaws.com:5432/customer"
+          "value": "jdbc:postgresql://awseb-e-cpppbiucth-stack-awsebrdsdatabase-xpib9s8sdsnw.crmoqeq2mqmz.eu-west-3.rds.amazonaws.com:5432/customer"
         }
       ]
     }

diff --git a/backend/notas terminal.txt b/backend/notas terminal.txt
@@ -28,3 +28,9 @@ eb restore e-cpppbiucth
 Comandos para criar a base de dados customer (correr na instancia EC2)
 - docker run --rm -it postgres:alpine bach
 - pqsl -U amigoscode -d postgres -h link_db
+
+correr docker frontend
+- docker run --rm --name frontend-react -p 3000:5173 pg47101/amigoscode-react
+
+criar imagem frontend para funcionar no deployment:
+- docker build . -t pg47101/amigoscode-react:aws --build-arg api_base_url=http://amigoscode-api-env.eba-ugqm2msm.eu-west-3.elasticbeanstalk.com:8080
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -25,6 +25,19 @@ services:
     depends_on:
       - db
     restart: unless-stopped
+  amigoscode-react:
+    container_name: amigoscode-react
+    image: pg47101/amigoscode-react
+    build:
+      context: frontend/react
+      args:
+        api_base_url: http://localhost:8088
+    ports:
+      - "3000:5173"
+    depends_on:
+      - amigoscode-api
+    restart: unless-stopped
+
 
 networks:
   db:

diff --git a/frontend/react/.dockerignore b/frontend/react/.dockerignore
@@ -0,0 +1,4 @@
+node_modules
+Dockerfile
+.env
+.dockerignore
diff --git a/frontend/react/Dockerfile b/frontend/react/Dockerfile
@@ -0,0 +1,9 @@
+FROM --platform=linux/arm64 node:19-alpine
+ARG api_base_url
+WORKDIR /app
+COPY package*.json .
+RUN npm i --silent
+COPY . .
+RUN echo "VITE_API_BASE_URL=${api_base_url}" > .env
+EXPOSE 5173
+CMD ["npm", "run", "dev"]
diff --git a/frontend/react/package.json b/frontend/react/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

diff --git a/frontend/react/src/App.jsx b/frontend/react/src/App.jsx
@@ -3,7 +3,7 @@ import SidebarWithHeader from './components/shared/SideBar.jsx'
 import  { useEffect, useState } from 'react'
 import { getCustomers } from './services/client.js'
 import CardWithImage from './components/Card.jsx'
-import DrawerForm from './components/DrawerForm.jsx'
+import CreateCustomerDrawer from './components/CreateCustomerDrawer.jsx'
 import {errorNotification } from './services/notification.js'
 
 function App() {
@@ -17,12 +17,13 @@ function App() {
         setLoading(true)
         getCustomers().then(res => {
             setCustomers(res.data)
-        }).catch(err =>{
-            setErr(err.response.data.message)
+        }).catch(error =>{
+            console.log(error)
+            /*setErr(err.response.data.message)
             errorNotification(
                 err.code,
                 err.response.data.message
-            )
+            )*/
         }).finally(() => {
             setLoading(false)
         })
@@ -49,7 +50,7 @@ function App() {
     if(err){
         return (
             <SidebarWithHeader>
-                <DrawerForm
+                <CreateCustomerDrawer
                     fetchCustomers={fetchCustomers}
                 />
                 <Text mt={5}> Ooops there was an error</Text>
@@ -60,7 +61,7 @@ function App() {
     if(customers.length <= 0) {
         return (
             <SidebarWithHeader>
-                <DrawerForm
+                <CreateCustomerDrawer
                     fetchCustomers={fetchCustomers}
                 />
                 <Text mt={5}>No customers available</Text>
@@ -71,7 +72,7 @@ function App() {
     //opção em que temos customers
     return (
         <SidebarWithHeader>
-            <DrawerForm
+            <CreateCustomerDrawer
                 fetchCustomers={fetchCustomers}
             />
             <Wrap justify={"center"} spacing ={'30px'}>