Minimal Nginx + Docker for Frontend

Background

In my current frontend work experience, I mainly use Nginx + Docker to host React/Vue SPA projects, especially when those projects use virtual routing (vue-router/react-router); after all, if you only serve static files, the user refreshing the route is very likely to result in a 404 (e.g., with http://base.com and the virtual route /demo01, refreshing on http://base.com/demo01 will return 404 because that URL does not actually exist).

I also use Docker + GCP-CloudRun for some simple NodeJS demos.

Below are some work notes.

Minimal Docker

My own understanding is to treat Docker as a lightweight virtual machine — instead of manually partitioning a hard drive, you package directly into a container, which is then isolated from other environments.

The simplest way to use Docker is to write a dockerfile, build it into an image, and then use that image to run a container.

The most convenient thing about Docker is that you can use Docker images packaged by others to set up your own Docker container environment. For example, to use Node version 14, you just add the line FROM node:14 in the dockerfile.

Demo and Commands

nodejs demo link

• docker build -t demo_node:v1 .
  • demo_node is the name you want to give the docker image; the v1 afterwards represents the version of this image. If not specified, it defaults to latest.
  • You can use the docker images command to check whether the image was built successfully.
• docker run -d -p 8080:3000 demo_node:v1
  • From the demo’s dockerfile, you can see that the docker port we set is 3000, and the -p 8080:3000 command maps docker’s port 3000 to the host’s port 8080, so this NodeJS App actually listens on localhost:8080.
• docker ps is the command to list running containers.
• docker stop {container id} stops the container.

Minimal Nginx

nginx

Besides being a web server, Nginx is best known for being able to perform reverse proxy and load balance with simple configuration.

Combined with the minimal Docker above, you can see that you can directly use the official nginx docker image to run an nginx service.

Demo (with React SPA + react-router as the example)

Nginx + React demo link

You can see from the dockerfile that after using the node image to build the React SPA, the nginx image is then used to host the web app.

Among them, nginx.conf is the configuration file for the entire nginx service; the part that handles the redirect for virtual routing is this:

...
server {
	...
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

Closing Thoughts

Ever since I learned the basics of Docker and Nginx, I have felt a kind of newfound freedom: in the past when I needed to implement a feature, I could maybe make a demo on my local machine; but if I had to put it on the cloud, I felt a sense of insecurity that it was beyond my abilities.

Now, at least I am able to implement small-scale features and services without too much trouble.

ChangeLog

• 20221220-init
• 20260501–translate by claude code

• ← Previous Post
• Next Post →