Home >  Programming Blog >  Angular

How to Deploy Angular App with Docker, Nginx, and Free SSL

by Didin J. on Aug 19, 2025 How to Deploy Angular App with Docker, Nginx, and Free SSL

Learn how to deploy Angular apps with Docker, Nginx, and free SSL from Let’s Encrypt for a secure, scalable, and production-ready setup.

Table of Contents:

Deploying an Angular application is a critical step in bringing your project from development to production. While Angular provides powerful tools for building modern web apps, you’ll need a reliable, secure, and scalable way to serve it to your users.

In this tutorial, you will learn how to deploy an Angular application using Docker, Nginx, and a free SSL certificate from Let’s Encrypt. Docker ensures that your app runs consistently across different environments, while Nginx is a lightweight and high-performance web server perfect for serving static Angular files. Adding Let’s Encrypt SSL keeps your application secure by enabling HTTPS — an essential step for user trust and SEO ranking.

By the end of this guide, you’ll have your Angular app containerized with Docker, served by Nginx, and accessible over HTTPS with a valid SSL certificate.

Prerequisites

Before you begin, make sure you have the following:

  • Angular CLI 20+ installed on your local machine

  • A working Angular project ready for deployment

  • Docker and Docker Compose are installed on your server or local machine

  • A Linux VPS (Ubuntu/Debian recommended) with root or sudo access

  • A domain name pointed to your server’s IP address (required for SSL)

  • Basic familiarity with the command line and Angular build process


Build an Angular App for Production

Before deploying your Angular app with Docker and Nginx, you need to generate an optimized production build. Angular CLI makes this process straightforward by bundling, minifying, and optimizing your code for better performance.

Run the following command inside your Angular project directory:

ng build --configuration production

This command will:

  • Minify JavaScript and CSS files

  • Remove unused code (tree-shaking)

  • Enable Ahead-of-Time (AOT) compilation for faster rendering

  • Generate an optimized output folder ready for deployment

Once the build completes, you’ll find the compiled files in the dist/ folder. The structure will look something like this:

dist/
 └── your-app-name/
     ├── index.html
     ├── main.XXXXX.js
     ├── styles.XXXXX.css
     └── assets/

The contents of dist/your-app-name/ will be served by Nginx inside a Docker container in the next steps.


Create Dockerfile for Angular + Nginx

To deploy your Angular application, we’ll use Docker to containerize it and serve the compiled files with Nginx. The Dockerfile defines how the container should be built, including which base image to use and where to copy your Angular build output.

Inside the root of your Angular project, create a new file named Dockerfile and add the following content:

# Step 1: Use an official Nginx image as the base
FROM nginx:alpine

# Step 2: Copy Angular build output to Nginx HTML directory
COPY ./dist/your-app-name /usr/share/nginx/html

# Step 3: Copy custom Nginx configuration
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# Step 4: Expose port 80 for HTTP traffic
EXPOSE 80

# Step 5: Start Nginx when the container launches
CMD ["nginx", "-g", "daemon off;"]

Explanation of the Dockerfile:

  1. FROM nginx:alpine – Uses the lightweight Nginx image based on Alpine Linux.

  2. COPY ./dist/your-app-name – Copies your Angular production build into Nginx’s default web root directory.

  3. COPY ./nginx.conf – Adds a custom Nginx configuration file to handle Angular’s single-page application (SPA) routing.

  4. EXPOSE 80 – Ensures the container listens on port 80.

  5. CMD – Starts Nginx in the foreground so the container keeps running.

Next, we’ll configure Nginx properly to serve Angular’s index.html for all routes.


Configure Nginx for Angular Routing

Angular applications are single-page applications (SPA), meaning all routes are handled client-side. Without proper configuration, refreshing a route like /dashboard may result in a 404 Not Found error because Nginx looks for a physical /dashboard folder.

To fix this, we configure Nginx to serve index.html for all routes.

Create a new file named nginx.conf in your project root and add the following:

server {
  listen 80;
  server_name yourdomain.com;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri /index.html;
  }

  # Optional: Enable Gzip compression for performance
  gzip on;
  gzip_types text/plain application/javascript text/css application/json application/xml+rss;
  gzip_min_length 256;
}

Explanation:

  • listen 80; → Listens on port 80 for HTTP requests.

  • server_name yourdomain.com; → Replace with your actual domain name.

  • try_files $uri /index.html; → Ensures Angular routes always fallback to index.html.

  • Gzip Compression → Helps reduce file sizes and improve load times.

With this configuration, whether users visit /, /about, or /dashboard, Nginx will serve index.html, and Angular’s router will handle the rest.

✅ Now we have:

  • Angular app built for production

  • Dockerfile ready

  • Nginx configured for Angular SPA


Docker Compose Setup

Now that you have a Dockerfile and an nginx.conf, the next step is to orchestrate everything with Docker Compose. This will make it easier to manage multiple containers, such as your Angular app (served by Nginx) and Certbot (for SSL certificates).

Create a file named docker-compose.yml in the root of your project and add the following:

version: "3.8"

services:
  angular:
    build: .
    container_name: angular_app
    restart: always
    ports:
      - "80:80"
    volumes:
      - ./certbot:/etc/letsencrypt

  certbot:
    image: certbot/certbot
    container_name: certbot
    volumes:
      - ./certbot:/etc/letsencrypt
    entrypoint: >
      /bin/sh -c 'trap exit TERM; 
      while :; do 
        certbot renew; 
        sleep 12h & wait $${!}; 
      done'

Explanation:

  • angular service

    • Builds the Angular + Nginx container from your Dockerfile.

    • Maps port 80 on the server to 80 inside the container.

    • Mounts the ./certbot folder for SSL certificate storage.

  • certbot service

    • Uses the official Certbot image to manage Let’s Encrypt certificates.

    • Runs a loop to renew SSL certificates every 12 hours automatically.

    • Shares the same ./certbot volume so Nginx can access the certificates.

At this stage, you can already run:

docker-compose up -d --build

This will build your Angular Docker image and run it with Nginx on http://yourdomain.com (without SSL yet).

✅ Next step: We’ll obtain a free SSL certificate from Let’s Encrypt.


Obtain Free SSL with Let’s Encrypt

Now that your Angular app is running with Docker and Nginx, it’s time to secure it with HTTPS using a free SSL certificate from Let’s Encrypt.

1. Stop your running containers

Before issuing the certificate, make sure the containers are stopped so Certbot can bind to port 80:

docker-compose down

2. Run Certbot to generate SSL certificate

Use the Certbot container to request a certificate for your domain:

docker run --rm -it \
  -v $(pwd)/certbot:/etc/letsencrypt \
  -v $(pwd)/dist:/usr/share/nginx/html \
  certbot/certbot certonly --webroot \
  -w /usr/share/nginx/html \
  -d yourdomain.com -d www.yourdomain.com

👉 Replace yourdomain.com with your actual domain name.

3. Certificate files location

If successful, you’ll see a confirmation message. The SSL certificates will be stored inside your project under:

./certbot/live/yourdomain.com/
 ├── fullchain.pem
 ├── privkey.pem
 ├── cert.pem
 └── chain.pem

These files will later be mounted into your Nginx container for HTTPS.

4. Auto-renewal

Since we already configured the Certbot service inside docker-compose.yml, certificates will renew automatically. Let’s Encrypt certificates are valid for 90 days, so auto-renewal ensures your site always stays secure.

✅ At this point, you have valid SSL certificates ready for your Angular app.


Update Nginx for SSL

Now that you’ve obtained a valid SSL certificate from Let’s Encrypt, the final step is to configure Nginx to serve your Angular app over HTTPS.

Open your nginx.conf file and update it as follows:

# Redirect all HTTP requests to HTTPS
server {
  listen 80;
  server_name yourdomain.com www.yourdomain.com;
  return 301 https://$host$request_uri;
}

# Secure HTTPS server block
server {
  listen 443 ssl;
  server_name yourdomain.com www.yourdomain.com;

  root /usr/share/nginx/html;
  index index.html;

  ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

  location / {
    try_files $uri /index.html;
  }

  # Optional: Enable Gzip compression for performance
  gzip on;
  gzip_types text/plain application/javascript text/css application/json application/xml+rss;
  gzip_min_length 256;
}

Explanation:

  • HTTP to HTTPS Redirect → Ensures all HTTP traffic is redirected to HTTPS automatically.

  • listen 443 ssl; → Enables SSL/TLS on port 443.

  • ssl_certificate and ssl_certificate_key → Point to your Let’s Encrypt certificates stored in ./certbot/live/yourdomain.com/.

  • SPA Routing → try_files $uri /index.html; ensures Angular handles client-side routes.

Restart Containers

Rebuild and restart your Docker containers to apply the SSL configuration:

docker-compose down
docker-compose up -d --build

Now, visit:

https://yourdomain.com

Your Angular app should load securely with a valid SSL certificate ✅.

✅ At this stage, your Angular app is fully deployed with Docker, Nginx, and Let’s Encrypt SSL.


Run and Test

With everything configured, it’s time to bring your containers up and test your deployment.

Run the following command to build and start the services:

docker-compose up -d --build

This will:

  • Build your Angular app image with Nginx

  • Start the Angular + Nginx container

  • Start the Certbot container for certificate renewal

Verify your app

  1. Open a browser and visit:

https://yourdomain.com

  1. Your Angular app should now load securely with a valid Let’s Encrypt SSL certificate.

  2. You can also check the certificate details in the browser’s padlock icon to confirm that HTTPS is enabled.


Conclusion

In this tutorial, you learned how to deploy an Angular application using Docker, Nginx, and Let’s Encrypt SSL. We covered:

  • Building an optimized Angular production build

  • Creating a Dockerfile to serve the app with Nginx

  • Configuring Nginx for SPA routing

  • Using Docker Compose to manage containers

  • Securing your app with a free SSL certificate from Let’s Encrypt

By following these steps, you now have a secure, production-ready deployment pipeline that ensures your Angular application runs consistently, scales easily, and serves traffic over HTTPS.

Next Steps

  • Automate deployment further with CI/CD pipelines (GitHub Actions, GitLab CI, or Jenkins).

  • Add monitoring and logging for your containers (e.g., Prometheus, ELK stack).

  • Scale your application with Docker Swarm or Kubernetes for high availability.

With this setup, your Angular app is not only deployed but also secure and future-proof. 🚀

You can get the full source code on our GitHub.

If you don’t want to waste your time designing your front-end or your budget to spend by hiring a web designer, then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That's just the basics. If you need more deep learning about Angular, you can take the following cheap course:

Thanks!

Related Articles

Programming Blog
JavaJavascriptHTML 5 TutorialCSS 3MongoDBIonic FrameworkGroovy and GrailsNode.jsReact NativeASP.NET CoreAngularVue.jsReact.jsFlutter TutorialMiscellaneousRustGolang (Go)Python
All Articles
Zizo Wireless