Milestone 2 hg 9

.github/workflows/deplow_new_ci_cd.yml

@@ -0,0 +1,91 @@
+name: Deploy Front to Amazon ECS
+
+on:
+  push:
+    branches: ["new-deploy-hg-8"]
+
+env:
+  AWS_REGION: us-east-1 #OK
+  ECR_REPOSITORY: home9/hg8_front_email_app_repository #OK
+  ECS_SERVICE: hg8_front_email_app_service #
+  ECS_CLUSTER: email_app_home_9 #OK
+  ECS_TASK_DEFINITION: .github/workflows/hg8_front_email_app_task_definition-revision1.json #OK
+  CONTAINER_NAME: hg8_front_email_app_container #OK
+
+jobs:
+  # test:
+  #   name: Run Tests
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout code
+  #       uses: actions/checkout@v2
+
+  #     - name: Install dependencies
+  #       run: npm install
+
+  #     - name: Run tests
+  #       run: npm test
+  deploy:
+    # needs: test
+    name: Deploy
+    runs-on: ubuntu-latest
+    environment: production
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Create .env file
+        run: |
+          echo "VITE_BACKEND_URL=${{ secrets.HG8_NEW_BASE_BACKEND_URL }}" > .env
+
+      - name: Create .env.production file
+        run: |
+          echo "VITE_BACKEND_URL=${{ secrets.HG8_NEW_BASE_BACKEND_URL }}" > .env.production
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ env.AWS_REGION }}
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v1
+
+      - name: Build, tag, and push image to Amazon ECR
+        id: build-image
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          IMAGE_TAG: ${{ github.sha }}
+        run: |
+          # Build a docker container and
+          # push it to ECR so that it can
+          # be deployed to ECS.
+
+          echo "$ECR_REGISTRY este es el registro"
+          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
+          echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" >> $GITHUB_OUTPUT
+
+          # aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws/l8x0d6p9
+          # docker build -t macv9620/forest-app-repository . PRUEBA
+          # docker tag macv9620/forest-app-repository:latest public.ecr.aws/l8x0d6p9/macv9620/forest-app-repository:latest
+          # docker push public.ecr.aws/l8x0d6p9/macv9620/forest-app-repository:latest
+          # echo "image=public.ecr.aws/l8x0d6p9/macv9620/forest-app-repository:latest" >> $GITHUB_OUTPUT
+      - name: Fill in the new image ID in the Amazon ECS task definition
+        id: task-def
+        uses: aws-actions/amazon-ecs-render-task-definition@v1
+        with:
+          task-definition: ${{ env.ECS_TASK_DEFINITION }}
+          container-name: ${{ env.CONTAINER_NAME }}
+          image: ${{ steps.build-image.outputs.image }}
+
+      - name: Deploy Amazon ECS task definition
+        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+        with:
+          task-definition: ${{ steps.task-def.outputs.task-definition }}
+          service: ${{ env.ECS_SERVICE }}
+          cluster: ${{ env.ECS_CLUSTER }}
+          wait-for-service-stability: true

.github/workflows/hg8_front_email_app_task_definition-revision1.json

@@ -0,0 +1,72 @@
+{
+    "taskDefinitionArn": "arn:aws:ecs:us-east-1:637423626700:task-definition/hg8_front_email_app_task_definition:1",
+    "containerDefinitions": [
+        {
+            "name": "hg8_front_email_app_container",
+            "image": "637423626700.dkr.ecr.us-east-1.amazonaws.com/home9/hg8_front_email_app_repository",
+            "cpu": 0,
+            "portMappings": [
+                {
+                    "name": "hg8_front_email_app_container-80-tcp",
+                    "containerPort": 80,
+                    "hostPort": 80,
+                    "protocol": "tcp",
+                    "appProtocol": "http"
+                }
+            ],
+            "essential": true,
+            "environment": [],
+            "environmentFiles": [],
+            "mountPoints": [],
+            "volumesFrom": [],
+            "ulimits": [],
+            "systemControls": []
+        }
+    ],
+    "family": "hg8_front_email_app_task_definition",
+    "taskRoleArn": "arn:aws:iam::637423626700:role/ecsTaskExecutionRole",
+    "executionRoleArn": "arn:aws:iam::637423626700:role/ecsTaskExecutionRole",
+    "networkMode": "awsvpc",
+    "revision": 1,
+    "volumes": [],
+    "status": "ACTIVE",
+    "requiresAttributes": [
+        {
+            "name": "com.amazonaws.ecs.capability.ecr-auth"
+        },
+        {
+            "name": "com.amazonaws.ecs.capability.task-iam-role"
+        },
+        {
+            "name": "ecs.capability.execution-role-ecr-pull"
+        },
+        {
+            "name": "com.amazonaws.ecs.capability.docker-remote-api.1.18"
+        },
+        {
+            "name": "ecs.capability.task-eni"
+        }
+    ],
+    "placementConstraints": [],
+    "compatibilities": [
+        "EC2",
+        "FARGATE"
+    ],
+    "requiresCompatibilities": [
+        "FARGATE"
+    ],
+    "cpu": "512",
+    "memory": "1024",
+    "runtimePlatform": {
+        "cpuArchitecture": "X86_64",
+        "operatingSystemFamily": "LINUX"
+    },
+    "registeredAt": "2024-03-18T00:14:08.312Z",
+    "registeredBy": "arn:aws:iam::637423626700:user/mateo_vasco",
+    "tags": [
+        {
+            "key": "home_group_9",
+            "value": "front_email_hg8_app"
+        }
+    ]
+}

.gitignore

@@ -24,6 +24,5 @@ dist-ssr
 *.sw?
 
 .env
-package-lock.json
 
 

Dockerfile

@@ -1,15 +1,24 @@
-FROM node:18-alpine
+# Step 1: Choose a base image
+FROM node:17-alpine as builder
 
+# Step 2: Set the working directory where docker will run the commands, docker creates the directory if it doesn't exist
 WORKDIR /app
 
+# Step 3: Copy the project files
 COPY package.json .
+COPY package-lock.json .
 
+
+# Step 4: Install dependencies
 RUN npm install
 
 COPY . .
 
+# Step 5: Build the project with vite
 RUN npm run build
 
-EXPOSE 8080
-
-CMD [ "npm", "run", "preview" ]
+# Step 7: Define the startup command
+FROM nginx
+EXPOSE 80
+COPY --from=builder /app/server_config/server_config.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/dist /usr/share/nginx/html

README.md

@@ -0,0 +1,12 @@
+# Milestone 2: Maturing - Frontend
+
+### As code improvements for Frontend from group 9 to group 8, we suggest:
+
+1. Refactor **state management** to avoid using variable typing with `<any>`.
+2. Refactor **docker image build** to a multi-stage build and run the container from an nginx server, this helps optimize the image size.
+3. Implement **tests**.
+4. Create a `<docker-compose>` file to facilitate **application initialization** among developers collaborating on the project.
+5. Show **user information** in the Home component.
+6. Improve **user experience** in managing the form to send emails, validating email format and preventing the email writing window from closing when errors occur.
+
+The solution proposal for each of the previous points will be sent to the HG-8 via **pull request ([https://github.com/TechFellowGroup8/ft-email-send/pull/9#issue-2198815609]())**

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  mail_ts_app_hg8:
+    container_name: mail_ts_app_hg8
+    image: mail_app_hg8:1.0.0
+    build: .
+    ports:
+      - 80:80