Setting Up Caddy with Docker: Reverse Proxy for Your Frontend

November 28, 2024 · 4 min read

Rahul Surya S H

Caddy is a modern, lightweight web server that simplifies the deployment and management of online applications. With features like automatic HTTPS, straightforward configuration, and powerful reverse proxy capabilities, Caddy is an excellent choice for containerized environments. In this blog post, we'll walk through setting up Caddy with Docker as a reverse proxy for a generic front-end application. Check out the Benefits of Using Caddy

Why Choose Caddy for Dockerized Environments?#

Caddy's smooth interaction with Docker makes it a viable option for current application configurations. It can handle automatic SSL/TLS certificates, which eliminates the need to manage HTTPS configurations manually. Furthermore, its simple Caddyfile configuration makes it easy for beginners to use while remaining powerful enough for complex use cases. Caddy provides the flexibility and reliability you require for delivering a single-page application or numerous services.Explore Use Cases of Caddy

Prerequisites#

Before diving in, ensure you have the following: Docker and Docker Compose are installed on your system. A basic understanding of Docker and how it works. A frontend application Docker image ready for use.

Step 1: Project Setup#

To begin, create a project directory to house all your configuration files:

mkdir caddy-docker
cd caddy-docker

This directory will contain the necessary files for both Caddy and your front-end application.

Step 2: Create a Caddyfile#

The Caddyfile is the heart of Caddy's configuration. It defines how Caddy serves your applications and proxies traffic. Create a new Caddyfile in your project directory:

touch Caddyfile

Add the following content to the Caddyfile:

localhost {
    reverse_proxy my-frontend-app:3000
}

Key Points:#

Replace localhost with the domain you'll use for your front end.
Replace my-frontend-app:3000 with your frontend container's name and port.
You can add additional blocks for more services if needed.

Step 3: Create a Docker Compose File#

Next, create a docker-compose.yml file to define your Docker services. This file will set up both Caddy and your front-end application to work together seamlessly.

version: "3.8"

services:
  caddy:
    image: caddy:latest
    container_name: caddy
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy_data:/data
      - caddy_config:/config
    networks:
      - app_network

  my-frontend-app:
    image: my-frontend-app-IMAGE # Replace with your frontend image
    container_name: my-frontend-app
    restart: unless-stopped
    ports:
      - "3000:3000"
    networks:
      - app_network

networks:
  app_network:

volumes:
  caddy_data:
  caddy_config:

Explanation:#

Caddy Service:
- Ports: Binds ports 80 (HTTP) and 443 (HTTPS).
- Volumes: Stores configuration data in persistent volumes (caddy_data and caddy_config).
- Networks: Ensures seamless communication with the frontend app.
Frontend Application:
- Replace my-frontend-app-IMAGE with your actual Docker image.
- Exposes the application on port 3000.
- It shares the same network as the Caddy service for internal communication.

Step 4: Start Your Setup#

Run the services using Docker Compose:

docker-compose up -d

This command will start both Caddy and your frontend application in detached mode. You can now access your frontend app at https://localhost.

Troubleshooting Tips#

Domain Issues: Ensure your domain points correctly to your server's IP.
Port Conflicts: Verify that no other service is using ports 80 or 443.
Log Monitoring: Check Caddy logs for errors using:

docker logs caddy

Service Connectivity: Ensure the my-frontend-app container is running and reachable within the network.

Conclusion#

Caddy and Docker are an effective combination for serving and reverse proxy-ing front-end applications. Caddy's minimum configuration, integrated HTTPS, and support for containerized environments allow you to focus on designing your application rather than the difficulties of server management. By following the instructions in this guide, you may create a dependable and secure reverse proxy for your front-end application. Begin experimenting with Caddy today and witness its simplicity and efficiency firsthand!

Resources:#

Official Caddy Documentation

Caddy GitHub Repository

Recent posts