Git Product home page Git Product logo

ecs-nextjs's Introduction

Next.js on ECS

This a demo app running on AWS ECS with full CI/CD via github actions deployed to AWS ECR.

Architecture

Infrastructure (AWS)

AWS ECS architecture

CI/CD Workflow

CI and initial deployment

AWS ECS Deployment CI/CD

Continuous delivery (CD)

AWS ECS Blue Green Deployment

Steps:

  1. The deployment starts from github actions to trigger the AWS Codedeploy deployment group
  2. AWS Codedeploy provisions new ECS tasks and routes 25% of traffic over to new deployment
  3. AWS Codedeploy deployment either completes within 10 minutes or rollbacks if set thresholds are exceeded

Description:

The continous delivery is leveraging codedeploy to perform a time based blue-green canary.

Time Interval: 10 minutes
Percentage: 25%

So, 25% of the traffic is shifted over to new deployment over an interval of 10 minutes (2 - 3 alarm periods on AWS Cloudwatch).

This setup also includes automatic rollback based on threshold on metrics in cloudwatch (Application load balancer http 5xx, Application errors).

This deployment strategy allows for early error detection while minimizing impact in event of errors and fast rollback with the blue-green approach.

Note: The feature is available on the branch feature-blue-green

Getting Started

Running locally:

yarn && yarn run dev

Visit http://localhost:3000  

Running locally (docker):

docker build -t ecs-nextjs .

docker run -d -p 3000:3000 -e PORT=3000 ecs-nextjs:latest

Infrastructure setup

Setup AWS envronment:

terraform init
terraform plan
terraform apply

Setup Github actions:

The build is defined via the github actions workflow in .github/workflows/main.yml

As for the deployment, In order for the deployment pipeline to work you will need the following secrets set on your github actions:

Environment Description required
AWS_ACCESS_KEY_ID AWS access ID Yes
AWS_SECRET_ACCESS_KEY AWS secret access key Yes

Once all setup trigger a deployment then visit the link on the ALB (A record).

Finishing up:

Remember to run terraform destroy -auto-approve once finished with testing.

Reference

repo is built on example-nextjs-emotion11-material-u and tf-modules.

Basic Final Next.js

Technologies

  • emotion @ 11.0
  • material-ui @ 4.11
  • next @ 10.x
  • polished @ 4.x
  • terraform
  • AWS ECS
  • AWS ECR
  • AWS VPC (subnets, route table, netowrk acl, igw, nat gw)
  • AWS SSM
  • AWS ALB

ecs-nextjs's People

Contributors

jareechang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.