How to Run an Angular Application Using Docker and Nginx

In this tutorial, we will walk you through the steps on how to run an Angular application using Docker and Nginx.

We can proudly say that it’ll probably take you less than 5 minutes to get your Angular application up and running with Docker and Nginx. Well, without taking up any more of your time, Let’s get started!

Table of Contents

What is Docker and Nginx?

Let’s keep this section short so we can instead place focus on the important steps of this tutorial.

Docker is a tool for developers, which helps with building, deploying, and managing applications. Nginx is an open-source web server software. It is mainly designed for maximum performance and stability.

Docker allows you to containerize your Angular app, making it easy to deploy and manage, while Nginx will host your application.

Step 1: Build Your Angular Application

Assuming you already have an Angular application ready for deployment, navigate to your project’s root directory using the command line (in my case, I use Bash).

cd your-angular-app

Build your Angular application for production, using the Angular CLI:

ng build --prod

This command will create a dist directory in your project, containing the production-ready build of your Angular application.

Step 2: Create a Dockerfile

Create a Dockerfile in your project’s root directory. This file will contain instructions for building a Docker image for your Angular application.

# Use an official Nginx runtime as a parent image
FROM nginx:alpine

# Copy the Angular app's build files to the Nginx web server directory
COPY /dist/your-angular-app /usr/share/nginx/html

# Expose port 80 for HTTP traffic
EXPOSE 80

# Start Nginx when the container runs
CMD ["nginx", "-g", "daemon off;"]

Make sure to replace your-angular-app with the name of your actual project.

Step 3: Build the Docker Image

Now, you can build the Docker image using the docker build command. Make sure you are in your project’s root directory where the Dockerfile is located and run the following command using the Docker CLI.

docker build -t angular-app .

This command will build a Docker image named angular-app. You can replace angular-app with any other name you want.

Step 4: Run the Docker Container

With the Docker image built, you can now run a Docker container based on this image:

docker run -d -p 8080:80 angular-app

This command starts a Docker container named angular-app, maps port 8080 on your local machine to port 80 inside the container, and runs the Nginx web server.

Step 5: Access Your Angular Application

Your Angular application should now be up and running inside a Docker container.

Open a web browser and navigate to http://localhost:8080. You should now be able to see your Angular application:

Result of running an angular application using docker and nginx

Conclusion

In this tutorial, you’ve learned how to run an Angular application using Docker and Nginx. This approach allows you to easily package and deploy your Angular app in a containerized environment, making it more portable, scalable, and easier to maintain.

Docker and Nginx are powerful tools for deploying web applications, and this setup is production-friendly as long as you have proper configuration and follow great security measures.

We hope you enjoyed reading this tutorial and that it was easy to follow. If you’re more interested in reading about the latest regarding Angular, you should check out our other article, What Is Signals in Angular?