https://github.com/mattyboy84/aws-ecs-web-app-demo

An AWS ECS demo for deploying react-nextjs apps onto fleets of ECS containers. Includs a seperate ECS backend & nextjs frontend.
https://github.com/mattyboy84/aws-ecs-web-app-demo

amplify aws docker ecs javascript networking nextjs portfolio react website

Last synced: 3 months ago
JSON representation

An AWS ECS demo for deploying react-nextjs apps onto fleets of ECS containers. Includs a seperate ECS backend & nextjs frontend.

• Host: GitHub
• URL: https://github.com/mattyboy84/aws-ecs-web-app-demo
• Owner: mattyboy84
• Created: 2023-01-07T12:02:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-07-08T08:17:08.000Z (about 3 years ago)
• Last Synced: 2025-02-25T20:32:32.980Z (over 1 year ago)
• Topics: amplify, aws, docker, ecs, javascript, networking, nextjs, portfolio, react, website
• Language: CSS
• Homepage:
• Size: 260 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![](images/diagram.png)

# ecs-cluster & ecs-cluster-image-repo are individual repositories / AWS stacks

## ecs-cluster

ecs-cluster can be deployed on its own given the `imageRepoName` parameter is updated to point to an already existing image / ECR repo  

![](images/ecs-cluster-image-repo.png)  

![](images/taskDef-image-repo.png)  

Changing the image might need more resources to be assigned to the Task Defination  

![](images/taskDef-resources.png)

---

# Setup

first, deploy `ecs-cluster-image-repo` to AWS then run the `deployDockerImage` Gitlab Job to publish the react-app as a docker image to an ECR repository  

![](images/deployDockerImage.png)  

This job will also run the `scripts/envs.sh` bash script that appends `NEXT_PUBLIC_` to all AWS stack outputs, saves them all to a .env file and compiles it into the docker image for dynamic use of variables inside the image instead of hardcoding values.  

The docker image also exposes port 8081 which the `ecs-cluster` directs web traffic to.  

secondly, deploy `ecs-cluster` to AWS. The deployment will automatically create an ECS service with a running task. This task can be accessed via the load balancer DNS name that is exported as an output of the `ecs-cluster` stack. e.g. `http://ecs-cluster-lb-12345678.eu-west-2.elb.amazonaws.com/`  

The `ecs-cluster` gitlab jobs can also be used to administrate ECS  

![](images/ecs-cluster-tasks.png)

`restartAllTasks` - gets the number of tasks running e.g. 3 then launches 3 more while shutting down the previous 3. This process will refresh the image in the task if the image has been updated.  

`stopAllTasks` - stops all tasks to save costs  

`startOneTask` - starts 1 task