Nginx, how to split API and UI calls to separate containers

I tend to use Nginx as a reverse proxy in most of my pet projects. Nginx is very easy to set up, it works well on Linux and in the swarm.

.NET apps have got a built-in server - Kestrel and many developers prefer to keep their API and UI in one container. I tend to prefer the opposite and package UI apps into a separate container with Nginx as the server. It allows for more versitility on the deployment side (e.g. you can do API and UI deployments separately) as well as customized error handling (e.g. JSON vs HTML pages) etc.

Regardless of your approach, however, you may wish to split calls between the UI and API layer. That would be either to point to a direct them into a separate container or to a static page. In my case, I had two servers: (1) .NET API running on Kestrel and (2) an Angular UI app (static page) running on another instance of Nginx.

In order to be able to re-route the calls, you can use Nginx's magical regex capabilities. For any location, that begins with api or images re-route to the API layer, otherwise use UI.