Microservices with Docker, Flask, and React



Learn how to build, test, and deploy microservices powered by Docker, Flask, and React!

In this course, you will learn how to quickly spin up a reproducible development environment with Docker to manage a number of microservices. Once the app is up and running locally, you'll learn how to deploy it to an Amazon EC2 instance. Finally, we'll look at scaling the services on Amazon Elastic Container Service (ECS) and adding AWS Lambda.

We'll also practice Test-Driven development (TDD) throughout, writing tests first when it makes sense to do so. The focus will be on server-side unit and integration tests, client-side unit tests, and browser-based end-to-end tests to ensure the entire system works as expected.

"Code without tests is broken by design." - Jacob Kaplan-Moss

flask tdd logo

What will you build?

Services

  1. users - server-side Flask app for managing users and auth
  2. client - client-side React app
  3. nginx - reverse proxy web server
  4. swagger - Swagger API docs
  5. scores - server-side Flask app for managing user scores
  6. exercises - server-side Flask app for managing exercises

App

microservice architecture


Check out the live app, running on a cluster of EC2 instances:
http://testdriven-production-alb-1112328201.us-east-1.elb.amazonaws.com

Tools and Technologies

  1. Python
  2. Flask
  3. Docker
  4. Postgres
  5. Node and NPM
  6. React
  7. Cypress
  8. Swagger
  9. Amazon Web Services (AWS)

Concepts

  1. Microservice Architecture
  2. Test-Driven Development (TDD)
  3. Continuous Integration (CI)
  4. Continuous Delivery (CD)
  5. Code Coverage
  6. Code Quality
  7. Token-based Authentication
  8. Containerization
  9. Container Orchestration
  10. Serverless Architecture

Info

  • Current version: 2.5.2
  • Last updated: June 5th, 2019
  • AuthorMichael Herman




What will you learn?

Part 1

In this first part, you'll learn how to quickly spin up a reproducible development environment with Docker to create a RESTful API powered by Python, Postgres, and the Flask web framework. After the app is up and running locally, you'll learn how to deploy it to an Amazon EC2 instance.

Tools and Technologies: Python, Flask, Flask-RESTful, Docker, Postgres, Flask-SQLAlchemy, Flask-Testing, Gunicorn, Nginx, Bulma CSS

Part 2

In part 2, we'll add code coverage and continuous integration (CI) testing to ensure that each service can be run and tested independently from the whole. Finally, we'll add React along with Jest (a JavaScript test runner) and Enzyme (a testing library designed specifically for React) to the client-side.

Tools and Technologies: Coverage.py, flake8, Flask Debug Toolbar, Node, NPM, React, Enzyme, Jest, Axios, Flask-CORS

Part 3

In part 3, we'll add database migrations along with password hashing in order to implement token-based authentication to the users service with JSON Web Tokens (JWTs). We'll then turn our attention to the client-side and add React Router to the React app to enable client-side routing along with client-side authentication and authorization.

Tools and Technologies: Flask-Migrate, Flask-Bcrypt, PyJWT, react-router-dom

Part 4

In part 4, we'll add end-to-end (e2e) tests with Cypress, form validation to the React app, and a Swagger service to document the API. We'll also deal with some tech debt and set up a staging environment to test on before the app goes into production.

Tools and Technologies: Cypress, Swagger UI, OpenAPI

Part 5

In part 5, we'll dive into container orchestration with Amazon ECS as we move our staging and production environments to a more scalable infrastructure. We'll also add Amazon's Elastic Container Registry along with Elastic Load Balancing for load balancing and Relational Database Service (RDS) for data persistence.

Tools and Technologies: AWS, EC2, Elastic Container Registry (ECR), Elastic Container Service (ECS), Elastic Load Balancing (ELB), Application Load Balancer (ALB), Relational Database Service (RDS)

Part 6

In part 6, we'll focus our attention on adding a new Flask service, with two RESTful-resources, to evaluate user-submitted code. Along the way, we'll tie in AWS Lambda and API Gateway and spend a bit of time refactoring React and the end-to-end test suite. Finally, we'll update the staging and production environments on ECS.

Tools and Technologies: AWS Lambda and API Gateway, React-Ace, and Flask

Part 7

In part 7, we'll refactor the AWS Lambda function to make it dynamic so it can be used with more than one exercise, introduce type checking on the client-side with React PropTypes, and update a number of components. We'll also introduce another new Flask service to manage scores. Again, we'll update the staging and production environments on ECS.

Tools and Technologies: AWS Lambda and ECS, PropTypes, and Flask




Table of Contents

Table of contents from Microservices with Docker, Flask, and React:


Part 1
Part 2
Part 3
  • Introduction
  • Flask Migrate
  • Flask Bcrypt
  • JWT Setup
  • Auth Routes
  • React Router
  • React Bulma
  • React Authentication - part 1
  • Mocking User Interaction
  • React Authentication - part 2
  • Authorization
  • Update Component
  • Update Docker
  • Structure

Get All 7 parts:


Part 4
  • Introduction
  • End-to-End Test Setup
  • End-to-End Test Specs
  • React Component Refactor
  • React Form Validation
  • React Flash Messaging
  • Update Test Script
  • Swagger Setup
  • Staging Environment
  • Production Environment
  • Workflow
  • Structure
Part 5
  • Introduction
  • Container Orchestration
  • IAM
  • Elastic Container Registry
  • Elastic Load Balancer
  • Elastic Container Service
  • ECS Staging
  • Setting up RDS
  • ECS Production Setup
  • ECS Production Automation
  • Workflow
  • Structure
Part 6
  • Introduction
  • React Refactor
  • React Ace Code Editor
  • Exercises Service Setup
  • Exercises Database
  • Exercises API
  • Code Evaluation with AWS Lambda
  • Update Exercises Component
  • ECS Deployment - Staging
  • ECS Deployment - Production
  • Autoscaling
  • Workflow
  • Structure
Part 7
  • Introduction
  • Lambda Refactor
  • Exercise Component
  • AJAX Refactor
  • Type Checking
  • Scores Service
  • Exercises Component Refactor
  • ECS Staging Update
  • E2E Refactor
  • ECS Prod Update
  • Next Steps
  • Structure



Join our mailing list to be notified about course updates and new tutorials.