From 4366b6aba48e983ef60d0ddb21b2ef3d281b406c Mon Sep 17 00:00:00 2001 From: Wenszel Date: Thu, 28 Dec 2023 17:28:27 +0100 Subject: [PATCH] added deploying to ECS --- .circleci/config.yml | 60 ++++++++++++------- README.md | 13 ++-- .../JoinServer/JoinServer.module.css | 2 +- .../ServersTable/ServersTable.module.css | 3 + 4 files changed, 49 insertions(+), 29 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 048e099..83bfe3b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,8 +1,8 @@ version: 2.1 orbs: - aws-cli: circleci/aws-cli@4.1.2 - aws-ecr: circleci/aws-ecr@9.0.1 - + aws-cli: circleci/aws-cli@4.1.2 + aws-ecr: circleci/aws-ecr@9.0.1 + aws-ecs: circleci/aws-ecs@4.0.0 jobs: build_and_test: docker: @@ -27,23 +27,41 @@ jobs: name: Test Frontend command: | npm test - + run_task: + docker: + - image: cimg/python:3.10 + steps: + - aws-cli/setup: + role_arn: arn:aws:iam::797929460436:role/ecs + role_session_name: example-session + - aws-ecs/run_task: + awsvpc: false + cluster: arn:aws:ecs:eu-north-1:797929460436:cluster/mern-ludo-cluster + launch_type: EC2 + task_definition: mern-ludo-docker-task workflows: - test: - jobs: - - build_and_test - build_and_deploy: - jobs: - - aws-ecr/build_and_push_image: - auth: - - aws-cli/setup: - role_arn: arn:aws:iam::797929460436:role/openid - role_session_name: example-session - repo: mern-ludo - public_registry: true - tag: latest - filters: - branches: - only: - - main \ No newline at end of file + build_and_test_and_deploy: + jobs: + - build_and_test + - aws-ecr/build_and_push_image: + auth: + - aws-cli/setup: + role_arn: arn:aws:iam::797929460436:role/openid + role_session_name: example-session + repo: mern-ludo + public_registry: true + tag: latest + requires: + - build_and_test + filters: + branches: + only: + - main + - run_task: + requires: + - aws-ecr/build_and_push_image + filters: + branches: + only: + - main \ No newline at end of file diff --git a/README.md b/README.md index e4ce3f8..71272d7 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,8 @@ Ludo Online is a multiplayer web-based implementation of the classic board game Ludo, built using the MERN stack and integrated with SocketIO for real-time communication.

->> Play Online here << -

+>> Play online here << +

>> Watch YouTube Video here << @@ -29,7 +29,7 @@ Tests: ![cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge&logo=cypress&logoColor=058a5e) ![Mocha](https://img.shields.io/badge/-mocha-%238D6748?style=for-the-badge&logo=mocha&logoColor=white) ![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white) -Tools: +Other: ![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white) ![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white) ![CircleCI](https://img.shields.io/badge/circle%20ci-%23161616.svg?style=for-the-badge&logo=circleci&logoColor=white) ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![Jira](https://img.shields.io/badge/jira-%230A0FFF.svg?style=for-the-badge&logo=jira&logoColor=white) @@ -41,12 +41,11 @@ Tools: - Maintained code reliability by implementing unit and integration tests using **Mocha**, **Chai**, and **Jest**. -- Hosted in a **Docker** container on **AWS EC2**. - -- Established CI/CD using **CircleCI**. - - Implemented E2E tests utilizing **Cypress**, addressing challenges related to [testing collaboration](https://docs.cypress.io/guides/references/trade-offs#Multiple-browsers-open-at-the-same-time) and canvas functionality in the application. +- Established a CI/CD pipeline using **CircleCI**, with pushing **Docker** container to **AWS ECR** and deploying to **AWS ECS** + + ## Installation 1. Download this repository diff --git a/src/components/LoginPage/JoinServer/JoinServer.module.css b/src/components/LoginPage/JoinServer/JoinServer.module.css index bd89d03..c2361bb 100644 --- a/src/components/LoginPage/JoinServer/JoinServer.module.css +++ b/src/components/LoginPage/JoinServer/JoinServer.module.css @@ -1,7 +1,7 @@ .serversTableContainer { display: flex; - height: 500px; overflow: scroll; + height: 500px; width: 100%; } .refresh { diff --git a/src/components/LoginPage/JoinServer/ServersTable/ServersTable.module.css b/src/components/LoginPage/JoinServer/ServersTable/ServersTable.module.css index 25636ad..a176bf8 100644 --- a/src/components/LoginPage/JoinServer/ServersTable/ServersTable.module.css +++ b/src/components/LoginPage/JoinServer/ServersTable/ServersTable.module.css @@ -1,6 +1,8 @@ .roomName { max-width: 150px; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; text-align: left !important; } .rooms > thead > tr :nth-child(2) { @@ -30,6 +32,7 @@ .rooms { border-collapse: collapse; width: 100%; + height: fit-content; } .lastColumn {