Skip to content

Deploy an Angular App

In this guide, we'll walk through the entire process of setting up your VPS, containerizing your Angular application with Docker, and using Caddy as a reverse proxy to serve your app with HTTPS. By the end of this tutorial, you'll have a production-ready Angular application running on your VPS, secured with SSL, and easily manageable through Docker.

Prerequisites

Before we dive into the deployment process, make sure you have the following:

  • A VPS running a Linux distribution (we'll use Ubuntu 20.04 for this guide)
  • SSH access to your VPS
  • A domain name pointed to your VPS's IP address
  • Basic knowledge of Angular, Docker, and command-line operations

With these prerequisites in place, let's begin the deployment process.

Step 1: Preparing Your Angular Application

The first step in our deployment journey is to prepare your Angular application for production. This involves building your application and creating a Docker image that will contain your built app and a web server to serve it.

Start by building your Angular application for production. In your project directory, run:

ng build --prod

This command will create a dist folder containing your production-ready Angular application.

Next, we'll create a Dockerfile in the root of your project. This Dockerfile will define how to build a Docker image for your application. Here's a basic Dockerfile for an Angular app:

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

# Copy the dist directory contents into the container at /usr/share/nginx/html
COPY dist/your-app-name /usr/share/nginx/html

# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# Expose port 80
EXPOSE 80

# Start Nginx server
CMD ["nginx", "-g", "daemon off;"]

This Dockerfile uses the official Nginx image as a base, copies your built Angular application into the appropriate directory, and sets up Nginx to serve your app.

You'll also need to create an nginx.conf file in your project root with the following content:

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

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

This configuration tells Nginx how to serve your Angular application, including handling routing for single-page applications.

With these files in place, you're ready to build your Docker image. Run the following command in your project directory:

docker build -t your-app-name:latest .

This command builds a Docker image tagged with your-app-name:latest. You're now ready to move on to setting up your VPS.

Step 2: Setting Up Your VPS

Now that we have our Angular application containerized, it's time to set up our VPS to host it. We'll start by updating the system and installing Docker.

First, SSH into your VPS:

ssh user@your-vps-ip

Once logged in, update the system:

sudo apt update && sudo apt upgrade -y

Next, install Docker. The easiest way to do this is by using Docker's convenience script:

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

After the installation is complete, add your user to the Docker group to avoid having to use sudo for Docker commands:

sudo usermod -aG docker $USER

Log out and back in for the changes to take effect.

Now that Docker is installed, we need to transfer our Docker image to the VPS. There are several ways to do this, but for simplicity, we'll use Docker Hub. First, create a Docker Hub account if you don't have one, then log in on your local machine:

docker login

Tag your image with your Docker Hub username:

docker tag your-app-name:latest yourusername/your-app-name:latest

Push the image to Docker Hub:

docker push yourusername/your-app-name:latest

On your VPS, you can now pull this image:

docker pull yourusername/your-app-name:latest

Step 3: Setting Up Caddy

With our Angular app ready to be deployed, let's set up Caddy as our web server and reverse proxy. Caddy is an excellent choice because it automatically handles SSL certificates and HTTPS configuration.

First, let's install Caddy on our VPS. We'll use the official Caddy Docker image to keep everything containerized.

Create a new directory for your Caddy configuration:

mkdir ~/caddy_config
cd ~/caddy_config

Now, create a Caddyfile in this directory. The Caddyfile is Caddy's configuration file:

nano Caddyfile

Add the following content to the Caddyfile:

your-domain.com {
    reverse_proxy angular_app:80
}

Replace your-domain.com with your actual domain name. This configuration tells Caddy to act as a reverse proxy, forwarding requests to our Angular app container.

Now, let's create a Docker network that both our Angular app and Caddy will use:

docker network create web

Step 4: Deploying Your Application

With all the pieces in place, it's time to deploy our application. We'll use Docker Compose to manage our containers. Create a docker-compose.yml file in your home directory:

nano ~/docker-compose.yml

Add the following content:

version: '3'

services:
  angular_app:
    image: yourusername/your-app-name:latest
    container_name: angular_app
    restart: unless-stopped
    networks:
      - web

  caddy:
    image: caddy:latest
    container_name: caddy
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ~/caddy_config/Caddyfile:/etc/caddy/Caddyfile
      - ~/caddy_data:/data
    networks:
      - web

networks:
  web:
    external: true

This Docker Compose file defines two services: our Angular app and Caddy. It also sets up the necessary port mappings and volume mounts for Caddy.

Now, let's start our services:

docker-compose up -d

This command will start both your Angular app and Caddy in detached mode.

Step 5: Testing Your Deployment

At this point, your Angular application should be up and running, served securely through Caddy. Open a web browser and navigate to your domain. You should see your Angular application, and the connection should be secure (HTTPS).

If everything is working correctly, congratulations! You've successfully deployed your Angular application on a VPS using Docker and Caddy.

Troubleshooting and Maintenance

Even with a smooth deployment, issues can arise. Here are some tips for troubleshooting and maintaining your deployment:

  • Check container logs: If something isn't working, checking the logs can provide valuable information. Use docker logs angular_app or docker logs caddy to view logs for each container.

  • Updating your application: To update your application, build a new Docker image with your changes, push it to Docker Hub, then on your VPS, pull the new image and restart the containers:

bash docker-compose pull docker-compose up -d

  • Monitoring: Consider setting up monitoring for your VPS and containers. Tools like Prometheus and Grafana can provide valuable insights into your application's performance.

  • Backups: Regularly backup your Caddy data directory (~/caddy_data) to ensure you don't lose your SSL certificates and other important data.

Conclusion

Deploying an Angular application on a VPS using Docker and Caddy provides a robust, secure, and scalable solution. This setup gives you full control over your hosting environment while leveraging the power of containerization and the simplicity of Caddy's automatic HTTPS.

By following this guide, you've learned how to: - Prepare your Angular application for deployment - Set up a VPS with Docker - Use Caddy as a reverse proxy and for automatic HTTPS - Deploy your application using Docker Compose

This knowledge forms a solid foundation for deploying not just Angular applications, but potentially any web application. As you become more comfortable with this setup, you can explore more advanced topics like load balancing, continuous deployment, and advanced monitoring.

Remember, the world of web deployment is constantly evolving. Stay curious, keep learning, and don't hesitate to explore new tools and techniques as they emerge. Happy deploying!