Developing Microservices with Flask, React, and Docker

# Developing and Testing Microservices <br> with Flask, React, and Docker

<br>

<div>
  <span style="vertical-align:60%;">Presented by <em>Michael Herman</em> at</span>
  <img src="images/pytn-logo.png" style="max-width: 7%; border:0; box-shadow: none;" alt="PyTennessee logo">
</div>

---

### Agenda (part 1)

⏱ ~ 1 hour

##### (1) Intro

1. About Me
1. Objectives
1. Architecture
1. Project Setup
1. Why Microservices?

##### (2) Containers and Services

1. Users DB (postgres)
1. Users API (flask)
1. Client (react)
1. Hot Reload
1. Nginx
1. End-to-End Tests
1. Docker Machine
1. EC2 Deployment

---

### Agenda (part 2)

⏱ ~ 1 hour

##### (3) Orchestration

1. What is Container Orchestration?
1. Why ECS?
1. Orchestration Feature Wish-list
1. Elastic Load Balancing (ELB)
1. Elastic Container Registry (ECR)
1. Elastic Container Service (ECS)
1. Zero-downtime Deploy Demo

##### (4) Goodbye

1. Next Steps
1. Questions

---

### About Michael

```
$ whoami
michael.herman
```

#### Day Job:

Software Engineer at [ClickFox](https://www.clickfox.com/).
 
<img src="images/clickfox.png" style="max-width: 4%; border:0; box-shadow: none;" alt="clickfox logo">

#### Docker:

1. Avid Docker user since 2014.
1. Last year I architected and set up [On-Demand Environments With Docker and AWS ECS](http://mherman.org/blog/2017/09/18/on-demand-test-environments-with-docker-and-aws-ecs/).

#### Also:

1. Co-founder/author of [Real Python](https://realpython.com)
1. 😍 - [tech writing/education](http://mherman.org), [open source](http://github.com/mjhea0), [financial models](http://www.starterfinancialmodel.com/), [radiohead](http://radiohead.com/)

---

### Objectives

By the end of this talk, you should be able to...

`Containerization`

1. Configure and run **microservices** locally with Docker
1. Utilize **volumes** to mount code into a container to enable **hot reload**
1. Run unit and integration **tests** inside a Docker container
1. Secure services via **JWT-based authentication**
1. Configure **React**, **Jest**, and **Enzyme** to work with Docker
1. Test the entire set of services with **functional, end-to-end** tests

`Orchestration`

1. Explain what **container orchestration** is and why you may need to incorporate an orchestration tool into your deployment process
1. Discuss the pros and cons of using Elastic Container Service (ECS) over other **orchestration tools** like Kubernetes, Mesos, and Docker Swarm
1. Configure an **Application Load Balancer** along with **ECS** to run a set of microservices
1. Integrate **ECR** into the deployment process
1. Send **container logs** to CloudWatch

---

### TestDriven.io

Much of this tutorial comes from the following course I wrote at [Testdriven.io](http://testdriven.io/)...

<br>

<div class="grid">
  <div style="float: left; width: 45%;">
    <div text-align="center">
      <img src="images/cover_small.png" style="max-width: 70%; border:2px solid; border-color:grey; box-shadow: none;" alt="microservice tech">
    </div>
  </div>
  <div style="float: left; width: 55%;">
    <h4 style="margin-top: 0;"><em>Microservices with Docker, Flask, and React</em></h4>
    <p>Along with learning how to build the underlying code bases from each service, you'll also be introduced to more advanced topics like:</p>
    <ul>
      <li>AWS Lambda + API Gateway</li>
      <li>React PropTypes</li>
      <li>Redux</li>
      <li>Blue/Green Deploys</li>
      <li>CI/CD</li>
    </ul>
  </div>
</div>

---

### Architecture

https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn

| Name      | Container   | Tech                |
|-----------|-------------|---------------------|
| Users API | `users`     | Flask, gunicorn     |
| Users DB  | `users-db`  | Postgres            |
| Client    | `client`    | React, React-Router |
| Nginx     | `nginx`     | Nginx               |
| e2e Tests | N/A         | TestCafe            |

#### In general, services are...

1. Organized around domain
1. Easy to replace (ideally stateless)
1. Implemented using different technologies

---

### Project Setup

Fire up the app locally:

```sh
$ git clone https://github.com/testdrivenio/testdriven-app-2.2 \
  --branch pytn --single-branch
$ cd testdriven-app-2.2
$ export REACT_APP_USERS_SERVICE_URL=http://localhost
$ docker-compose -f docker-compose-dev.yml up -d --build
```

<small><em><strong>NOTE:</strong> Using Docker Machine? Replace `localhost` above with `DOCKER_MACHINE_IP`.</em></small>

#### Docker Compose

An orchestration tool for running multi-container apps.

*Often, when developing applications with a microservice architecture, you cannot fully test out all services until you deploy to a staging server. This takes much too long to get feedback. Docker helps to speed up this process by making it easier to link together small, independent services locally.*

Docker 101: http://mherman.org/docker-workshop

---

### Why Microservices?

**Pros**

1. *Separation of Concerns*: different apps can have different code bases and dependencies, localized errors, less coupling can lead to easier scaling
1. *Smaller Code Bases*: without having to grasp the entire system, it's often easier to understand the code base

**Cons**

1. *Design Complexity*: microservices are complex, start with modules
1. *Network Complexity*: many helper functions become AJAX calls, ping-pong-like effect in terms of network requests, network lag
1. *Data Persistence*: managing state (DBs, queues, service discovery) is hard
1. *Security*: more surface area = more areas prone to attack
1. *Integration Tests*: testing is hard, especially if you try to test like you'd test a monolith

You need - *Strong communication + docs, mature devops, lots of planning*

<small class="center">More on microservices: https://testdriven.io/part-one-microservices</small>

---

## Containerization

---

### Users DB

---

### Users DB

https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/services/users/project/db

#### Steps:

1. Review *[Dockerfile](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/services/users/project/db/Dockerfile)* and *[docker-compose-dev.yml](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/docker-compose-dev.yml)*
1. Build image, run container:

```sh
    $ docker-compose -f docker-compose-dev.yml up -d --build users-db
    ```

1. Test/Sanity Check:

```sh
    $ docker exec -ti users-db psql -U postgres -W
    ```

---

### Users API

---

### Users API

https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/services/users

#### Steps:

1. Review the [code](https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/services/users), *[Dockerfile-dev](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/services/users/Dockerfile-dev)*, and *[docker-compose-dev.yml](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/docker-compose-dev.yml)*
1. Build image, run container:

```sh
    $ docker-compose -f docker-compose-dev.yml up -d --build users
    ```

1. Test/Sanity Check:

```sh
    # create and seed the db
    $ docker-compose -f docker-compose-dev.yml \
      run users python manage.py recreate_db
    $ docker-compose -f docker-compose-dev.yml run users python manage.py seed_db
    # run unit and integration tests
    $ docker-compose -f docker-compose-dev.yml run users python manage.py test
    ```

Navigate to http://localhost:5000 in your browser.

---

### Client

---

### Client

https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/services/client

#### Steps:

1. Review the [code](https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/services/client), *[Dockerfile-dev](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/services/client/Dockerfile-dev)*, *[Dockerfile-prod](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/services/client/Dockerfile-prod)*, and *[docker-compose-dev.yml](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/docker-compose-dev.yml)*

1. Build image, run container:

```sh
    # add env variable
    $ export REACT_APP_USERS_SERVICE_URL=http://localhost
    # build and run:
    $ docker-compose -f docker-compose-dev.yml up -d --build client
    ```

1. Test/Sanity Check:

Navigate to [http://localhost:3007](http://localhost:3007) in your browser

<br>

---

### Hot Reload

To test hot reload, first open the Docker logs:

```sh
$ docker-compose -f docker-compose-dev.yml logs -f [container-name]
```

Make a change to the code, watch the logs update!

For more helpful commands, review https://testdriven.io/part-one-workflow

---

### Nginx

---

### Nginx

https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/services/nginx

#### Steps:

1. Review the [code](https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/services/nginx), *[Dockerfile-dev](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/services/nginx/Dockerfile-dev)*, and *[docker-compose-dev.yml](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/docker-compose-dev.yml)*

1. Build image, run container:

```sh
    $ docker-compose -f docker-compose-dev.yml up -d --build nginx
    ```

1. Test/Sanity Check: navigate to [http://localhost](http://localhost)

<br>

---

### End-to-End Tests

---

### End-to-End Tests

https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/e2e

#### Notes:

1. These are not containerized 😢
1. Check out the TestCafe 101 @ http://mherman.org/testcafe-example

#### Steps:

1. Review the [code](https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn/e2e) and *[docker-compose-prod.yml](https://github.com/testdrivenio/testdriven-app-2.2/blob/pytn/docker-compose-prod.yml)*

1. Update the containers, then test:

```sh
    $ docker-compose -f docker-compose-prod.yml up -d --build
    # add env variable
    $ export TEST_URL=http://localhost
    # create db
    $ docker-compose -f docker-compose-prod.yml \
      run users python manage.py recreate_db
    # run tests
    $ testcafe chrome e2e
    ```

---

### Docker Machine

Assuming you already have an AWS account [setup](http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/get-set-up-for-amazon-ec2.html) along with [IAM](https://aws.amazon.com/iam/) and your AWS credentials are stored in an *~/.aws/credentials* file, create a new host on an EC2 instance:

```sh
$ docker-machine create --driver amazonec2 pytn
```

Once done, set it as the active host and point the Docker client at it:

```sh
$ docker-machine env pytn
$ eval $(docker-machine env pytn)
```

Grab the IP address associated with the new EC2 instance and use it to set the `REACT_APP_USERS_SERVICE_URL` environment variable:

```sh
$ docker-machine ip pytn
$ export REACT_APP_USERS_SERVICE_URL=http://DOCKER_MACHINE_IP
```

<small><em><strong>NOTE:</strong> The `REACT_APP_USERS_SERVICE_URL` environment variable must be set at the build-time, so it is available *before* we kick off Create React App's production build process.</em></small>

---

### EC2 Deployment

Set the secret key:

```sh
$ export SECRET_KEY=my_precious
```

Build the images, spin up the containers:

```sh
$ docker-compose -f docker-compose-prod.yml up -d --build
```

Create and seed the database:

```sh
$ docker-compose -f docker-compose-prod.yml \
  run users python manage.py recreate_db
$ docker-compose -f docker-compose-prod.yml run users python manage.py seed_db
```

Update the `TEST_URL` environment variable and then run the e2e tests:

```sh
$ testcafe chrome e2e
```

<small>For more, review https://docs.docker.com/machine/examples/aws/.</small>

---

## Orchestration

---

### What is Container Orchestration?

As you move from deploying containers on a single machine to deploying them across a number of machines, you need an orchestration tool to manage the arrangement and coordination of the containers across the entire system.

This is where [ECS](https://aws.amazon.com/ecs/) fits in along with a number of other orchestration tools - like [Kubernetes](https://kubernetes.io/), [Mesos](http://mesos.apache.org/), and [Docker Swarm](https://docs.docker.com/engine/swarm/).

Which one?

---

### Why ECS?

ECS is simpler to set up and easier to use and you have the full power of AWS behind it, so you can easily integrate it into other AWS services (which we will be doing shortly). **In short, you get *scheduling*, *service discovery*, *load balancing*, and *auto-scaling* out-of-the-box. Plus, you can take full advantage of EC2’s multiple *availability-zones*.**

If you’re already on AWS and have no desire to leave, then it makes sense to use AWS.

Keep in mind, that ECS is often lagging behind Kubernetes, in terms of features, though. If you’re looking for the most features and portability and you don’t mind installing and managing the tool, then Kubernetes, Docker Swarm, or Mesos may be right for you.

One last thing to take note of is that since ECS is closed-source, there isn’t a true way to run an environment locally in order to achieve development-to-production parity. ([LocalStack](https://github.com/localstack/localstack)?)

<br>

<small><em>Awesome comparison resource -> https://blog.kublr.com/choosing-the-right-containerization-and-cluster-management-tool-fdfcec5700df</em></small>

---

### Orchestration Feature Wish-list

Most orchestration tools come with a core set of features. You can find those features below along with the associated AWS service...

<small><em>We'll either cover the features with a ✔️ directly or you'll see them in action from the demo.</em></small>

---

### Elastic Load Balancing (part 1)

The Elastic Load Balancer distributes incoming application traffic and scales resources as needed to meet traffic needs.

It's one of (if not) the most important parts of your applications since it needs to always be up, routing traffic to healthy back-ends, and ready to scale at a moment’s notice.

##### (1) Application Load Balancer

There are currently three types of Elastic Load Balancers to choose from. We’ll be using the Application Load Balancer since it provides support for path-based routing and dynamic port-mapping and it also enables zero-downtime deployments.

##### (2) Target Groups and (3) Listeners

Target Groups are attached to the Application Load Balancer and are used to route traffic to the containers found in the ECS service.

Listeners are added to the load balancer, which are then forwarded to a specific Target Group.

---

### Elastic Load Balancing (part 2)

The Application Load Balancer is one of those AWS services that makes ECS so powerful. In fact, before it’s release, ECS was not a viable orchestration solution.

https://console.aws.amazon.com/ec2

---

### ECR

Before you can start spinning up containers, you need to set up [EC2 Container Registry](https://aws.amazon.com/ecr/) (ECR), a private image registry. Once setup, you can then build, tag, and push images.

#### Images

Set up the following images at https://console.aws.amazon.com/ecs:

1. `pytn-users`
1. `pytn-users_db`
1. `pytn-client`

<small><em>Why did we leave out Nginx?</em></small>

#### Tagging

When tagging your images, you should think about version control (using the SHA1 to tie the image back to a specific commit) as well as the environment (development, staging, production) the image should belong to.

`/$PROJECT/$ENVIRONMENT:$SHA1`

---

### ECS (part 1)

The [Elastic Container Service](https://aws.amazon.com/ecs/) (ECS) has four main components:

1. Task Definitions
1. Tasks
1. Services
1. Clusters

`Task Definitions` => `Tasks` => `Services` => `Clusters`

![ecs](images/ecs.png)

---

### ECS (part 2)

#### Task Definitions (1)

Task Definitions define which containers make up the overall application and how much resources are allocated to each container. You can think of them as blueprints.

#### (2) Tasks and (3) Services

Services instantiate the containers from the Task Definitions and run them on EC2 boxes within an ECS Cluster. Such instances are called Tasks.

#### (4) Cluster

An ECS Cluster is just a group of EC2 container instances managed by ECS.

---

### ECS (part 3)

https://console.aws.amazon.com/ecs

---

### Zero-downtime Deploy Demo

#### Steps

1. Make a quick change to the app locally.
1. Build, tag, and push the new images.
1. Add a new revision to the task definition.
1. Update the service.

#### What happens next?

1. Once you update the Service, ECS will pick up on these changes and instantiate the Task Definitions, creating new Tasks that will spin up on the Cluster instances.
1. ALB will run health checks on the new instances once they are up.
    - If the health checks pass, traffic is forwarded appropriately to the new Tasks while the old Tasks are spun down.
    - If the health checks fail, the new Tasks are spun down.

The health checks are the last line of defense after your unit, integration, and functional tests.

---

### That's it!

What's next?

##### Check your understanding

1. Add the Swagger service
1. Configure Postgres via [RDS](https://aws.amazon.com/rds/)
1. Add the remaining features from the [Orchestration Feature Wish-list](http://mherman.org/presentations/pytn-2018/index.html#59).

##### Resources

1. Slides - http://mherman.org/presentations/pytn-2018
1. Repo - https://github.com/testdrivenio/testdriven-app-2.2/tree/pytn
1. ***[Testdriven.io](http://testdriven.io/) - full course!*** ❤️
1. [How to Build 12 Factor Microservices on Docker](https://www.packtpub.com/books/content/how-to-build-12-factor-design-microservices-on-docker-part-1)
1. [Docker Cheat Sheet](https://github.com/wsargent/docker-cheat-sheet)

##### Questions?

✌️