NGINX is one of the most widely used web servers globally. It’s not only a fast and reliable static web server but also serves as a popular reverse proxy for many developers, often placed in front of their APIs.
In this tutorial, we’ll explore the NGINX Official Docker Image and how to use it. We’ll begin by running a static web server locally, then create a custom image to host both the web server and the necessary files. Finally, we’ll cover setting up a reverse proxy server for a simple REST API and demonstrate how to share this image with your team.
Install docker on your system
sudo snap install docker
Now download and run Ngnixdocker run -it --rm -d -p 8080:80 --name web nginx
Now browse on IP:8080 and you will see default nginx page
This is great, but the goal of running a web server is to serve our own custom HTML files, rather than the default NGINX welcome page.
Let’s stop the container and focus on serving our own HTML files.
docker stop web
By default, Nginx searches for files to serve in the /usr/share/nginx/html directory within the container. To serve our own HTML files, we need to place them in this directory. One straightforward method is to use a mounted volume, which allows us to link a directory on our local machine and map it to the running container.
Let’s create a custom HTML page and serve it using the Nginx image.
mkdir site-content && cd site-contentsudo nano index.html
<!doctype html>
Hello from Nginx container 
Now, run the following command, which is the same as the previous one, but with the addition of the -v flag to create a bind mount volume. This will mount the local ~/site-content directory to /usr/share/nginx/html inside the running container
docker run -it --rm -d -p 8080:80 --name web -v ~/site-content:/usr/share/nginx/html nginx
Now browse the IP:Port again and you will see the updated content
Building Custom Nginx Image
Bind mounts are a great choice for running locally and sharing files with a running container. But what if we want to move the image and ensure the HTML files are included?
There are several options, but one of the most portable and straightforward methods is to copy our HTML files into the image by building a custom image.
To create a custom image, we’ll need to write a Dockerfile and include our commands in it.
In the same directory, create a file named Dockerfile and paste the following commands inside.
sudo nano DockerfileFROM nginx:latest
COPY ./index.html /usr/share/nginx/html/index.html
We begin building our custom image by using a base image. In line 1, we achieve this with the FROM command, which pulls the nginx:latest image to our local machine and then builds our custom image on top of it.
Next, we use the COPY command to place our index.html file into the /usr/share/nginx/html directory inside the container, replacing the default index.html file provided by the nginx:latest image.
You’ll notice that we haven’t included an ENTRYPOINT or CMD in our Dockerfile. Instead, we will use the default ENTRYPOINT and CMD provided by the base NGINX image.
To build the image, run the following command:
docker build -t webserver .
Now we can run our image in a container but this time we do not have to create a bind mount to include our html.
docker run -it --rm -d -p 8080:80 --name web webserver
Setting up reverse proxy server
Developers frequently run their REST APIs behind a reverse proxy, a common practice for several reasons. One key advantage is the ability to host the API server on a different network or IP than the front-end application, allowing for enhanced security by restricting traffic to only the reverse proxy server.
To keep things straightforward, I’ve built a basic front-end application using React.js and a simple backend API with Node.js. Use the following command to clone the code from GitHub.
$ git clone https://github.com/pmckeetx/docker-nginx.gitJust a minor update: use node 18 instead of 12.18.2 (in Dockerfile under frontend and backend) and RUN NODE_OPTIONS=–openssl-legacy-provider yarn build instead of Run Yarn Build
Now all traffic targeted to port 80 will pass through reverse proxy application and route to port 8080
Open the developer tools window and click on the “network” tab. Now back in the browser, enter an entity name. This can be anything. I’m going to use “widgets”. Then click the “Submit” button.
Over in the developer tools window, click on the network request for widgets and see that the request was made to http://localhost and not to http://localhost:8080.
Shipping Our Image
Now, let’s share our images on Docker so that others on our team can pull and run them locally. This is also an excellent way to share your application with individuals outside of your team, such as testers and business owners.
To push your images to Docker’s repository, first login on dockerhub, create repository then run the docker tag command followed by the docker push command.
docker login -u (user-name)Check the list of containers running on your system
sudo docker image list
Match this with the container name created on portal
sudo docker image tag (Image-ID) (name of the repository created on docker)Now push the container image
sudo docker push sanaqvi573/nginx-frontend
Add a Comment