Todo Web Application Deployed on ECR to ECS Cluster with Jenkins Pipeline

Last update: Jun 11, 2022

Todo Web Application Deployed on ECR to ECS Cluster with Jenkins Pipeline

Test Tool Tool Tool Tool Tool Tool Github top language Github language count Repository size License Github stars

About   |   Technologies   |   Requirements   |   Starting   |   Output   |   License   |   Author

🎯 About

Javascript web application 🚀 automated with Jenkins pipeline to create Docker image and push the image to AWS Elastic Container Registry (ECR) and deploy them on Elastic Container Service (ECS) Cluster.

🚀 Technologies

The following tools were used in this project:

Requirements

Before starting 🏁 you need to have Git, Docker, Yarn and Node installed.

🏁 Starting

If you want to start the project locally, you can use the following commands:

# Clone this project
git clone https://github.com/devenes/todo-ecr-ecs-cluster
# Access
cd todo-ecr-ecs-cluster
# Install dependencies
yarn install --production
# Run the project
# The server will initialize in the 
npm run start

You can run Terraform commands in the project folder:

# Run the Terraform init command
terraform init
# Run the Terraform plan command
terraform plan
# After this command, you will see the changes that will be applied to the infrastructure
# You can run the apply command to apply the changes
terraform apply --auto-approve
  • if you want to manually run
aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin <aws_account_id>.dkr.ecr.us-east-1.amazonaws.com
  • Then run the image
docker run --name todo -dp 80:3000 <aws_account_id>.dkr.ecr.us-east-1.amazonaws.com/devenes/to-do-app:latest
  • Delete the container
docker container stop todo
docker container rm todo
  • Createa ECS cluster with a unique name with the following command.
aws ecs create-cluster --cluster-name to-do-app
  • Register the task definition with the following command.
aws ecs register-task-definition --cli-input-json file://to-do-app.json
  • List the task definitions.
aws ecs list-task-definitions
  • Create a service with following command.

Note: securityGroups=[sg-e29b36ce] is default security group. If we don't specify any security group, aws assign default security group to the cluster.

# change the subnets and security group and make sure that the 3000 port is open
aws ecs create-service --cluster to-do-app --service-name to-do-app-service --task-definition to-do-app --desired-count 1 --launch-type "FARGATE" --network-configuration "awsvpcConfiguration={subnets=[subnet-077c9758],securityGroups=[sg-e29b36ce],assignPublicIp=ENABLED}" 

If you want to run the project in a Docker container, you can use the following command:

  • Build the Docker container image using the docker build command.
docker build -t todo-app:v1.0 .
  • Show the Docker image is created successfully.
docker image ls
  • Run todo app from the local Docker image.
docker run --name todo -d -p 80:3000 todo-app:v1.0
# The server will initialize in the 
  • List running container.
docker ps
# or
docker container ls
  • If necessary, authenticate the Docker CLI to your default ECR registry.
aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin <aws_account_id>.dkr.ecr.us-east-1.amazonaws.com
  • Delete the ECR repository devenes-repo/todo-app from AWS CLI.
aws ecr delete-repository \
      --repository-name devenes/to-do-app \
      --force \
      --region us-east-1
  • Delete the service and ecs cluster.
aws ecs delete-service --cluster to-do-app --service to-do-app-service --force
aws ecs delete-cluster --cluster to-do-app

📷 Expected Output

output

📚 Resources

📝 License

This project is under license from Apache. For more details, see the LICENSE file.

Made with ❤️ by devenes

 

⬆️ Back to top

GitHub

https://github.com/devenes/todo-ecr-ecs-cluster
You might also like...

M Haidar Hanif's personal website with React, Remix, Stitches, Radix UI, and deployed to Vercel.

mhaidarhanif-web M Haidar Hanif's personal website with React+Remix. Deployed to Vercel. Current repo is at mhaidarhanif-web on GitHub. Variants The w

Aug 1, 2022

A simple todo web application written in React + Typescript

A simple todo web application written in React + Typescript

⚡ Todomatic A simple todo web application written in React + Typescript.

May 5, 2022

A Simple Todo application For React.js

A Simple Todo application For React.js

Todo Application Installation git clone https://github.com/harun-guter/todo-app.

Aug 3, 2022

This is a Todo Application that use Firebase API, React with TypeScript.

This is a Todo Application that use Firebase API, React with TypeScript.

A simple Todo App with check complete function and filter todo. Made with React and TypeScript. The app can Add, Delete and Edit todo. Todo can be sorted by Complete or Active.

Jul 8, 2022

ToDo List application developed in React.JS from the {JSON} Placeholder API

ToDo List application developed in React.JS from the {JSON} Placeholder API

ToDo List application developed in React.JS from the {JSON} Placeholder API

Mar 29, 2022

A simple TODO list application using React

A simple TODO list application using React

A simple TODO list application using React

Aug 1, 2022

A very straight-forward and simple todo-list with the PERN Stack (Postgres, Express, React, Node).

A very straight-forward and simple todo-list with the PERN Stack (Postgres, Express, React, Node).

PERN Todo List 🚧 WORK IN PROGRESS 🚧 A very straight-forward and simple todo-list with the PERN Stack (Postgres, Express, React, Node). Practicing Mo

Mar 6, 2022

A simple todo app made with react and typescript

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 8, 2021

todo list feito com reactj⚛⚛

todo list feito com reactj⚛⚛

todo.list 🚨 Novidades Foi criada uma página home simples, com a animação igual ao site da vercel No componente Profile foi adicionada a função de log

Jun 12, 2022
OpenShift Cluster Console UI

OpenShift Console Codename: "Bridge" quay.io/openshift/origin-console The console is a more friendly kubectl in the form of a single page webapp. It a

Jul 28, 2022
Kompass is an easy to integrate, open-source monitoring tool for your Kubernetes cluster.
Kompass is an easy to integrate, open-source monitoring tool for your Kubernetes cluster.

Need direction on your Kubernetes cluster? Kompass can help! What is Kompass? Kompass is an easy to integrate, open-source monitoring tool for your Ku

Jul 26, 2022
A basic Todo App built with React, React Hooks and deployed on Vercel
A basic Todo App built with React, React Hooks and deployed on Vercel

Todo App A basic responsive todo app for javascript beginners. Built with several javascript concepts and hooks to help beginners start their programm

May 31, 2022
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.

This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone. The days of forgetting a task or meeting are no more with ToodleDo app.

Dec 14, 2021
Full React with Nestjs/Nodejs Web Application deployed on Hostinger with docker and docker-compose

Full Web App React Nodejs w/ GraphQL Tailwind and Docker From Zero To Deployment | Master MERN STACK Full Video Course on CoderOne channel https://you

Jul 29, 2022
Microservice-Based Web Application deployed on AWS with Terraform, Ansible and Docker
Microservice-Based Web Application deployed on AWS with Terraform, Ansible and Docker

☁️???????? Microservice-Based Web Application aims to deploy web-page written Node.js and React.js on AWS Cloud Infrastructure using Ansible and Terraform.

Jun 19, 2022
React-todo-localstorage - A simple Todo using React, TypeScript, Vite.js, Chakra UI and localStorage
React-todo-localstorage - A simple Todo using React, TypeScript, Vite.js, Chakra UI and localStorage

React Todo A simple Todolist using localStorage. Live demo here. Table of Conten

Mar 8, 2022
Todo app built with React, Redux, Typescript, and Vite with color themes and todo filtering
Todo app built with React, Redux, Typescript, and Vite with color themes and todo filtering

Todo app built with React, Redux, Typescript, and Vite with color themes and todo filtering. Styled with styled-components.

May 31, 2022
olx-clone using react js , firease as backend ,deployed in firebase , react-router,context,react hooks,olx web app project

OLX clone Start your own website like Olx in minutes with help of Sijeesh Miziha's Olx-Clone React App. Olx-Clone is the potential classified advertis

Jul 13, 2022
This is not the real NETFLIX, its a clone. Built with REACT JS, authenticated and deployed with firebase.

NETFLIX-CLONE This is not the real NETFLIX, its a clone. Built with REACT JS and authenticated with firebase. click here to view the finished page I u

Mar 26, 2022