Get Started with NGINX on Docker

How to deploy a single-page app with NGINX in a docker container?

NGINX is a well-known high-performance HTTP server and reverse proxy server. NGINX provides an abundance of features, such as load balancing, caching, SSL/TLS offloading, log rotation, and so on.

In this introductory article, we will use NGINX to server a Single-Page Application (SPA). We will set up and play with NGINX on docker, including (1) serving a website by mounting a volume to a docker container, and (2) building and running a docker image with a web app and NGINX.

Preparation: Create a Web App

First, we need to have a web app as the content for NGINX to serve. You can use your favorite JavaScript framework to create an app and build it. Here, we will create an Angular project by simply executing the following commands.

ng new angular-nginx-docker --minimal
cd angular-nginx-docker
ng build --prod

With that, an Angular app is built, and the app is located in a folder $PWD/dist/angular-nginx-docker. This folder contains an index.html file and several JavaScript & CSS files, which are typical files in a SPA. You can find this application and all the code & commands in this article from my GitHub repository.

Serve a SPA Using NGINX in a Docker Container

Now, we are ready to use NGINX to launch the SPA we built in the last section. You can also use another SPA to follow along.

NGINX and docker are tools that work extremely well together. Instead of installing NGINX on our machine directly, we will run NGINX on docker, which allows us to conveniently manage the NGINX servers.

Assuming we have installed the Docker Desktop, we can easily spin up an NGINX server from a docker container using the nginx:alpine docker image, which is very fast and slim. This docker image only takes about 20 MB disk space. To run the nginx:alpine image in a container interactively, we execute the following command: