Caddy2 Vue History Mode Configuration

The Caddy server is an open-source web server written in Golang that supports HTTP/2. It uses the Golang standard library to provide HTTP functionality.

A notable feature compared to Nginx is that HTTPS is enabled by default. It's the first web server to offer HTTPS without any additional configuration, a boon for lazy web developers. It can also be controlled via an API, boasts a rich plugin library, and is easy to deploy and maintain. To learn more about its other features, visit the official website at https://caddyserver.com/

Most people now use Nginx with Vue and a backend API server to build a website. Switching to Caddy2 presents a challenge: how to write the Caddyfile. There's not much information online about this. I read the official documentation over the weekend and am reluctantly documenting it for future reference.

This website is built using Vue, FastAPI, and Caddy2. The Caddyfile configuration is as follows:

mephisto.cc, www.mephisto.cc # Domain name

encode gzip zstd # Compression handle /api/* { reverse_proxy /api/* 127.0.0.1:8000 # Backend API server address

handle { root * /data/mephisto.cc/dist # Website root directory root /static/* /data/mephisto.cc # Additional static directory. I have a static directory for Markdown files, matching /static/* in the URL. If not, delete this line.

try_files {path} /index.html # Setting Vue history mode. You can also refer to the example in the official Caddy2 documentation for common caddyfile.

file_server # Enable static file serving

}

log { output file /var/log/caddy/caddy.log # Log

}

This configuration currently works well. If you still have questions, I recommend taking the time to read the official documentation. Searching for information is like looking at a tree; systematically reading the documentation is like looking at the forest. Understanding it is crucial to understanding it.