How to Expose Multiple Ports in a Docker Container

David Mbochi Njonge Feb 02, 2024
  1. Create an NGINX Application
  2. Create a Dockerfile
  3. Build an Image
  4. Run a Docker Container With Multiple Ports
  5. Testing the Ports
  6. Conclusion
How to Expose Multiple Ports in a Docker Container

Different types of communications take place on the internet, and the most common include file transfer, sending emails, and serving web pages. For this communication to be possible, we leverage port numbers that help identify the communication type.

For example, File Transfer Protocol uses ports 20 and 21, Simple Mail Transfer Protocol uses 25, and Hypertext Transfer Protocol uses 25.

Similarly, Docker containers use ports to enable communication between different devices on the world wide web. In this tutorial, we will learn how to expose multiple ports in a Docker container using an Nginx application.

Create an NGINX Application

Open WebStorm IDEA and select File>New>Project. On the window that opens, choose Empty Project and change the project name from untitled to web-app.

Finally, press the button labeled Create to create an empty project.

Note that we can also use any other development environment, as it does not matter what development environment is used. Since NGINX is used to serve static content, we do not need any other configuration files.

Once the project is generated, create a file named index.js in the web-app folder and copy and paste the following code into the file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Welcome to Nginx !</h1>

</body>
</html>

This file contains a simple web page with a heading to help us test the application. Modify the HTML content to display any desired content.

Create a Dockerfile

Create a file named Dockerfile in the web-app folder and copy and paste the following instructions into the file.

FROM nginx:1.23.1-alpine
ADD . /usr/share/nginx/html
  1. FROM - Sets the base image on which to create our custom image, and in our case, we have used alpine to pull the lightweight version of NGINX.
  2. ADD - Copies the files and folders in the current folder to the file system of our image at /usr/share/nginx/html.

Build an Image

Open a new terminal window on the development environment using the keyboard shortcut ALT+F12 and use the following command to create an image with the tag web-app:latest.

~/WebstormProjects/web-app$ docker build --tag web-app:latest .

This command executes our Dockerfile, and we can view the two instructions performed sequentially, as shown below.

=> [1/2] FROM docker.io/library/nginx:1.23.1-alpine@sha256:082f8c10bd47b6acc8ef15ae61ae45dd8fde0e9f389a8b5cb23c3740  0.2s
 => => resolve docker.io/library/nginx:1.23.1-alpine@sha256:082f8c10bd47b6acc8ef15ae61ae45dd8fde0e9f389a8b5cb23c3740  0.2s
 => CACHED [2/2] ADD . /usr/share/nginx/html

Run a Docker Container With Multiple Ports

On the same terminal window used to build an image, use the following command to run a container named web-app-prod with ports 3000 and 5000 on the host listening to port 80 on the container.

~/WebstormProjects/web-app$ docker run --name web-app-prod -d -p 3000:80 -p 5000:80 web-app:latest

To expose multiple ports on the container, we have used two consecutive -p flags that allocate two different ports on the host to listen on port 80 on the container.

Testing the Ports

To verify whether our container is working as expected, open any browser and issue a request to localhost:3000 (http://localhost:3000/) and localhost:5000 (http://localhost:5000/). Since the ports are listening to the same container, we get the same page of our NGINX application returned by the two requests, as shown below.

Testing the Ports - Localhost 3000

Testing the Ports - Localhost 5000

Conclusion

This tutorial has taught us how to expose multiple ports in a Docker container by leveraging an NGINX application. Note that this is the most common method to expose multiple ports, but there are other approaches that we can use to obtain the same objective.

David Mbochi Njonge avatar David Mbochi Njonge avatar

David is a back end developer with a major in computer science. He loves to solve problems using technology, learning new things, and making new friends. David is currently a technical writer who enjoys making hard concepts easier for other developers to understand and his work has been published on multiple sites.

LinkedIn GitHub