Engineering & Code

Containers Are My Proxy Pass Tutor

I have to build and interact with things to understand them. At MIT, we focused on combination of thought and practical action to solve current and future problems and our motto (mens et manus) combines application (hand) and theory (mind).
By day, I’m leading adoption of containers and automation technologies to drive big changes in enabling software reusability. By night, I’m using containers to teach me new programming languages, interfaces and networking concepts. Last week, I wanted to learn how reverse proxies work and wanted to use containers and some familiar technology express, flask, nginx and docker to help me.
First, I’m sharing this because I wish this existed out there to learn from, so please head to gitlab https://gitlab.com/tim284/nginx_proxy_test and clone this and let me know if you do anything awesome with it.
Because I like Plutarch in general and studying the Battle of Thermopylae in particular, you will notice a theme. (Please, the movie is all cool, but nothing close to reading the Gates of Fire.)

Containers

Containers are a solution to the problem of how to get software to run reliably when moved from one computing environment to another. The basic idea is to have the complexity and overhead that you want. Instead of using a full operating system in a virtual machine, you can use the bits you want and need. A container consists of an entire runtime environment: an application, plus all its dependencies, libraries and other binaries, and configuration files needed to run it, bundled into one package. By containerizing the application platform and its dependencies, differences in OS distributions and underlying infrastructure are abstracted away.

Architecture

I created two express applications, one Flask and one static site. I run the active apps in containers and use nginx reverse proxy to present them. The static HTML page connects through a docker volume. Free Code Camp wrote a nice tutorial that explains this type of setup.
One of the key concepts I had to learn was how networking works in Docker. This seemed like a right of passage I needed to know to work with containers in general. This article helped me a lot.

Docker

Complexity continues to increase with continuous new introduction of new programming languages, hardware, architectures, frameworks, and discontinuous interfaces between tools for each lifecycle stage. Containers allow you to focus on what you are building and quickly adapt new technology. Most important, I can quickly change and reuse things to learn a lot quickly. It can be hard to remain a full stack developer, a dad and a business leader. Docker simplifies a lot of things I don’t have time to learn and accelerates my workflow to allow me to experiment and innovate with different tools, application stacks, and deployment environments.
For this experiment, I use docker-compose to pull in images of nginx, flask, express and the redis database.

NGINX

Nginx is a popular web server (23.21% of sites) that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache. The software was created by Igor Sysoev and publicly released in 2004. A company of the same name was founded in 2011 to provide support and Nginx Plus paid software. In March 2019, the company was acquired by F5 Networks for $670 million. What a crazy startup idea: take an open source project, improve and support it and start a company (github, Nginx, etc).
Nginx is built to handle many concurrent connections at the same time. It can handle more than 10,000 simultaneous connections with a low memory footprint (~2.5 MB per 10k inactive HTTP keep-alive connections). This makes it ideal for being the point-of-contact for clients. The server can pass requests to any number of backend servers to handle the bulk of the work, which spreads the load across your infrastructure. This design also provides you with flexibility in easily adding backend servers or taking them down as needed for maintenance.
Another instance where an http proxy might be useful is when using an application servers that might not be built to handle requests directly from clients in production environments. Many frameworks include web servers, but most of them are not as robust as servers designed for high performance like Nginx. Putting Nginx in front of these servers can lead to a better experience for users and increased security. This post from Digital Ocean is awesome at explaining all of this.

Reverse Proxy

A proxy means that information is going through a third party, before getting to the location. Why use it? For example, if you don’t want a service to know your IP, you can use a proxy. A proxy is a server that has been set up specifically for this purpose. If the proxy server you are using is located in, for example, Amsterdam, the IP that will be shown to the outside world is the IP from the server in Amsterdam. The only ones who will know your IP are the ones in control of the proxy server.
Proxying in Nginx is accomplished by manipulating a request aimed at the Nginx server and passing it to other servers for the actual processing. The result of the request is passed back to Nginx, which then relays the information to the client. The other servers in this instance can be remote machines, local servers, or even other virtual servers defined within Nginx. The servers that Nginx proxies requests to are known as upstream servers.
A reverse proxy, by contrast, will not mask outgoing connections (you accessing a webserver), it will mask the incoming connections (people accessing your webserver). You simply provide a URL like example.com, and whenever people access that URL, your reverse proxy will take care of where that request goes.
Here I’m using a reverse proxy so I can have services running on a several ports, but I only expose ports 80 and 443, HTTP and HTTPS respectively. All requests will be coming into my network on those two ports, and the reverse proxy will take care of the rest.
Nginx can proxy requests to servers that communicate using the http(s), FastCGI, SCGI, and uwsgi, or memcached protocols through separate sets of directives for each type of proxy. The Nginx instance is responsible for passing on the request and massaging any message components into a format that the upstream server can understand.
My Nginx config below allowed me to proxy_pass to the upstream servers that Docker created.

First, I need some apps to serve content and in order to make sure I’m understanding how to proxy to different services, I use both JavaScript (Express) and Python (Flask).

Express

Express.js, or simply Express, is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. I like it because I can create a web application in several lines.

Flask App

Flask is the most minimal python web application framework. My app is bare-bones simple and just returns some basic text.

Static Page

In order to test the most basic feature of nginx, I build a static page.

Results

First I want to see all of my containers running:

➜  proxy_test git:(master) ✗ docker ps
CONTAINER ID   IMAGE                 COMMAND                  CREATED         STATUS         PORTS                                         NAMES
ac83546944da   nginx                 "/docker-entrypoint.…"   5 minutes ago   Up 5 minutes   0.0.0.0:80->80/tcp, :::80->80/tcp             proxy_test_webserver_1
36d93cfe4a41   proxy_test_flask      "/bin/sh -c 'python …"   7 hours ago     Up 7 hours     0.0.0.0:5000->5000/tcp, :::5000->5000/tcp     proxy_test_flask_1
30f29133b42a   proxy_test_lochagus   "docker-entrypoint.s…"   7 hours ago     Up 7 hours     0.0.0.0:49160->8080/tcp, :::49160->8080/tcp   proxy_test_lochagus_1
0d1a98a27730   proxy_test_leonidas   "docker-entrypoint.s…"   7 hours ago     Up 7 hours     0.0.0.0:49161->8080/tcp, :::49161->8080/tcp   proxy_test_leonidas_1
4770b2726dfd   redis                 "docker-entrypoint.s…"   7 hours ago     Up 7 hours     6379/tcp                                      proxy_test_redis_1

and, does it work?
curl -i localhost produces my static page. but most important, curl -i localhost/flask produces dynamic content.

HTTP/1.1 200 OK
Server: nginx/1.21.0
Date: Sun, 06 Jun 2021 10:09:03 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 51
Connection: keep-alive

This Compose/Flask demo has been viewed 23 time(s).%

Next Steps

This is just the beginning. Next, I’m going to use gitlab to deploy all of this let’s encrypt to secure all of the traffic and more.

June 6, 2021 By Tim Booher 3 Comments

Personal Projects & Interests

Kids Lego table: Case study in Automation for Design

[mathjax]

Motivation

I had to upgrade the Lego table I made when my kids were much smaller. It needed to be higher and include storage options. Since I’m short on time, I used several existing automation tools to both teach my daughter the power of programming and explore our decision space. The goals were to stay low-cost and make the table as functional as possible in the shortest time possible.

Lauren and I had fun drawing the new design in SketchUp. I then went to the Arlington TechShop and build the frame easily enough from a set of 2x4s. In order to be low-cost and quick, we decided to use the IKEA TROFAST storage bins. We were inspired from lots of designs online such as this one:

However, the table I designed was much bigger and build with simple right angles and a nice dado angle bracket to hold the legs on.

The hard part was figuring out the right arrangement to place the bins underneath the table. Since my background is in optimization I was thinking about setting up two-dimensional knapsack problem but decided to do brute-force enumeration since the state-space was really small. I built two scripts: one in Python to numerate the state space and sort the results and one in JavaScript, or Extendscript, to automate Adobe Illustrator to give me a good way to visually considered the options. (Extendscript just looks like an old, ES3, version of Javascript to me.)

So what are the options?

There are two TROFAST bins I found online. One costs \$3 and the other \$2. Sweet. You can see their dimensions below.

They both are the same height, so we just need to determine how to make the row work. We could arrange each TROFAST bin on the short or long dimension so we have 4 different options for the two bins:

	Small Side	Long Side
Orange	20	30
Green	30	42

First, Lauren made a set of scale drawings of the designs she liked, which allowed us to think about options. Her top left drawing, ended up being our final design.

I liked her designs, but it got me thinking what would all feasible designs look like and we decided to tackle this since she is learning JavaScript.

Automation

If we ignore the depth and height, we then have only three options $[20,30,42]$ with the null option of $0$ length. With these lengths we can find the maximum number of bins if the max length is $112.4 \text{cm}$. Projects like this always have me wondering how to best combine automation with intuition. I’m skeptical of technology and aware that it can be a distraction and inhibit intuition. It would have been fun to cut out the options at scale or just to make sketches and we ended up doing those as well. Because I’m a recreational programmer, it was fairly straightforward to enumerate and explore feasible options and fun to show my daughter some programming concepts.

$$ \left\lfloor
\frac{112.4}{20}
\right\rfloor = 5 $$

So there are $4^5$ or $1,024$ total options from a Cartesian product. A brute force enumeration would be $O(n^3)$, but fortunately we have $\text{itertools.product}$ in python, so we can get all our possible options easily in one command:

itertools.product([0,20,30,42], repeat=5)

and we can restrict results to feasible combinations and even solutions that don’t waste more than 15 cm. To glue Python and Illustrator together, I use JSON to store the data which I can then open in Illustrator Extendscript and print out the feasible results.

Later, I added some colors for clarity and picked the two options I liked:

These both minimized the style of bins, were symmetric and used the space well. I took these designs forward into the final design. Now to build it.

Real Math

But, wait — wrote enumeration? Sorry, yes I didn’t have much time when we did this, but there are much better ways to do this. Here are two approaches:

Generating Functions

If your options are 20, 30, and 40, then what you do is compute the coefficients of the infinite series

$$(1 + x^{20} + x^{40} + x^{60} + …)(1 + x^{30} + x^{60} + x^{90} + …)(1 + x^{40} + x^{80} + x^{120} + …)$$

I always find it amazing that polynomials happen to have the right structure for the kind of enumeration we want to do: the powers of x keep track of our length requirement, and the coefficients count the number of ways to get a given length. When we multiply out the product above we get

$$1 + x^{20} + x^{30} + 2 x^{40} + x^{50} + 3 x^{60} + 2 x^{70} + 4 x^{80} + 3 x^{90} + 5 x^{100} + …$$

This polynomial lays out the answers we want “on a clothesline”. E.g., the last term tells us there are 5 configurations with length exactly 100. If we add up the coefficients above (or just plug in “x = 1”) we have 23 configurations with length less than 110.

If you also want to know what the configurations are, then you can put in labels: say $v$, $t$, and $f$ for twenty, thirty, and forty, respectively. A compact way to write $1 + x^20 + x^40 + x^60 + … is 1/(1 – x^20)$. The labelled version is $1/(1 – v x^20)$. Okay, so now we compute

$$1/((1 – v x^{20})(1 – t x^{30})(1 – f x^{40}))$$

truncating after the $x^{100}$ term. In Mathematica the command to do this is

Normal@Series[1/((1 - v x^20) (1 - t x^30) (1 - f x^40)), {x, 0, 100}]

with the result

$$1 + v x^{20} + t x^{30} + (f + v^2) x^{40} + t v x^{50} + (t^2 + f v + v^3) x^{60} + (f t + t v^2) x^{70} + (f^2 + t^2 v + f v^2 + v^4) x^{80} + (t^3 + f t v + t v^3) x^{90} + (f t^2 + f^2 v + t^2 v^2 + f v^3 + v^5) x^{100}$$

Not pretty, but when we look at the coefficient of $x^{100}$, for example, we see that the 5 configurations are ftt, ffv, ttvv, fvvv, and vvvvv.

Time to build it

Now it is time to figure out how to build this. I figured out I had to use $1/2$ inch plywood. Since I do woodworking in metric, this is a dimension of 0.472 in or 1.19888 cm.

 $31.95 / each Sande Plywood (Common: 1/2 in. x 4 ft. x 8 ft.; Actual: 0.472 in. x 48 in. x 96 in.)

or at this link

So the dimensions of this are the side thickness $s$ and interior thickness $i$ with shelf thickness $k$. Each shelf is $k = 20-0.5 \times 2 \text{cm} = 19 \text{cm}$ wide. All together, we know:

$$w = 2\,s+5\,k+4\,i $$

and the board thickness is $t$ where $t < [s, i]$.

which gives us:

st	width
s	1.20
i	3.75
k	19.00
w	112.40

Code

The code I used is below:

References

February 7, 2016 (updated September 4, 2023) By Tim Booher One Comment