Setting Up Uptime Kuma's Status Page Behind a Reverse Proxy with Subpath Routing
Uptime Kuma is a popular open-source status page service. It allows you to easily create beautiful and informative status pages that keep your users in the loop about your service's health.
The Problem:
You want to integrate your Uptime Kuma status page into your existing website, but you need to access it through a specific subpath, rather than directly at the root domain.
Rephrasing the problem:
Imagine you have your website at example.com, and you want your Uptime Kuma status page to be available at example.com/status. You need to configure a reverse proxy to route traffic to the Uptime Kuma server only when accessing the /status subpath.
Scenario and Original Code:
Let's assume you have Uptime Kuma running on http://localhost:3000. You could access the status page directly using this address. However, you want it to be accessible at example.com/status.
Here's a basic example of a configuration for a reverse proxy like Nginx that allows accessing the status page directly:
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://localhost:3000;
}
}
Insights and Clarification:
This original configuration would route all traffic to example.com to the Uptime Kuma server, which is not what we want. We only want traffic to /status to be routed.
Solution:
To achieve this, we need to modify the Nginx configuration to route only the /status subpath to the Uptime Kuma server.
server {
listen 80;
server_name example.com;
location / {
# This location handles all other requests
# Your existing website code should go here
}
location /status {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Explanation:
- We define a new location block for
/status. - We use
proxy_passto redirect traffic to the Uptime Kuma server running onhttp://localhost:3000. - We add several headers to ensure proper forwarding of the request:
proxy_set_header Host $host: This sends the correct Host header to the Uptime Kuma server.proxy_set_header X-Real-IP $remote_addr: This sends the client's IP address to Uptime Kuma.proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for: This preserves the client's IP address in the request header.
Additional Value:
- This configuration is flexible and can be adapted to different reverse proxy tools like Apache or Traefik.
- Remember to adjust the
proxy_passdirective to match your Uptime Kuma server's address and port. - This approach ensures that your website's content and Uptime Kuma's status page coexist seamlessly within your domain.
References and Resources:
Conclusion:
By utilizing subpath routing with a reverse proxy, you can seamlessly integrate your Uptime Kuma status page into your existing website. This allows you to provide your users with a dedicated and informative status page while maintaining the integrity of your primary website.
