如何为Docker部署的HTML报告配置身份认证？附localhost:3000示例

Hey there! Let's break down how to add authentication to your Docker-hosted HTML report at https://localhost:3000. There are a few solid approaches depending on your setup—here are the most practical ones:

This is a straightforward option for static HTML reports, leveraging Nginx's built-in auth capabilities.

Steps to implement: #

1. Create a password file
   Use the htpasswd tool (part of Apache utils) to generate a user/password pair:

   # Create a directory to store Nginx configs and auth files
   mkdir -p nginx/auth
   # Generate the .htpasswd file (replace "admin" with your desired username)
   htpasswd -c nginx/auth/.htpasswd admin
   

   You'll be prompted to enter and confirm a password.

2. Write Nginx configuration
   Create nginx/nginx.conf with the following content (adjust paths as needed):

   server {
       listen 443 ssl;
       server_name localhost;
   
       # Path to your SSL certificates (generate self-signed ones if needed)
       ssl_certificate /etc/nginx/certs/cert.pem;
       ssl_certificate_key /etc/nginx/certs/key.pem;
   
       # Enable basic auth
       auth_basic "Restricted HTML Report";
       auth_basic_user_file /etc/nginx/auth/.htpasswd;
   
       # Reverse proxy to your HTML report container
       location / {
           proxy_pass http://html-report:80;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

3. Generate self-signed SSL certificates (for HTTPS):

   mkdir nginx/certs
   openssl req -x509 -newkey rsa:4096 -keyout nginx/certs/key.pem -out nginx/certs/cert.pem -days 365 -nodes
   

   Follow the prompts to fill in certificate details (you can leave most as default).

4. Docker Compose setup
   Create a docker-compose.yml to run both Nginx and your HTML report container:

   version: '3.8'
   services:
     html-report:
       image: nginx:alpine # Or use your existing HTML report image
       volumes:
         - ./path/to/your/html/files:/usr/share/nginx/html
       # Don't expose this port publicly—only accessible via Nginx
   
     nginx-proxy:
       image: nginx:alpine
       ports:
         - "3000:443"
       volumes:
         - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
         - ./nginx/auth/.htpasswd:/etc/nginx/auth/.htpasswd
         - ./nginx/certs:/etc/nginx/certs
       depends_on:
         - html-report
   

   Run it with docker-compose up -d. Now accessing https://localhost:3000 will prompt you for the username/password.

If you need more control (like custom auth logic beyond basic auth), wrap your static HTML in a simple Node.js server with authentication middleware.

Steps to implement: #

1. Set up Node.js project
   Create a new directory, initialize the project, and install dependencies:

   mkdir html-auth-server && cd html-auth-server
   npm init -y
   npm install express express-basic-auth
   

2. Write the server script (server.js):

   const express = require('express');
   const basicAuth = require('express-basic-auth');
   const https = require('https');
   const fs = require('fs');
   
   const app = express();
   
   // Configure basic auth
   app.use(basicAuth({
     users: { 'admin': 'your_secure_password' }, // Replace with your credentials
     challenge: true, // Prompt the user for login
     realm: 'Restricted HTML Report'
   }));
   
   // Serve static HTML files
   app.use(express.static('./html'));
   
   // Load SSL certificates (use the ones generated in Method 1 or create new ones)
   const options = {
     key: fs.readFileSync('./certs/key.pem'),
     cert: fs.readFileSync('./certs/cert.pem')
   };
   
   // Start HTTPS server on port 3000
   https.createServer(options, app).listen(3000, () => {
     console.log('Server running at https://localhost:3000');
   });
   

3. Prepare your HTML files
   Create a html directory in the project root and place all your report files inside it.

4. Dockerfile for the server
   Create a Dockerfile:

   FROM node:18-alpine
   WORKDIR /app
   COPY package*.json ./
   RUN npm install --only=production
   COPY . .
   EXPOSE 3000
   CMD ["node", "server.js"]
   

5. Build and run the container

   # Build the image
   docker build -t html-report-auth .
   # Run the container (mount certs if you're using external ones, or include them in the image)
   docker run -p 3000:3000 -v ./certs:/app/certs html-report-auth
   

If you're already using Traefik as your orchestration proxy, adding auth is seamless via middleware.

Key steps: #

1. Enable basic auth middleware in Traefik
   Add this to your Traefik dynamic configuration (e.g., traefik/dynamic.yml):

   http:
     middlewares:
       html-report-auth:
         basicAuth:
           users:
             - "admin:$apr1$H6uskkkW$IgXLP6ewTrSuBkTrqE8wj/" # Generate with `htpasswd`
   

   Generate the hashed password using htpasswd -nb admin your_password and copy the output.

2. Configure your HTML report service in Docker Compose

   version: '3.8'
   services:
     html-report:
       image: nginx:alpine
       volumes:
         - ./path/to/html:/usr/share/nginx/html
       labels:
         - "traefik.enable=true"
         - "traefik.http.routers.html-report.rule=Host(`localhost`)"
         - "traefik.http.routers.html-report.entrypoints=websecure"
         - "traefik.http.routers.html-report.tls=true"
         - "traefik.http.routers.html-report.middlewares=html-report-auth@file"
         - "traefik.http.services.html-report.loadbalancer.server.port=80"
   

   Ensure Traefik is set up with HTTPS (websecure entrypoint) and points to port 3000 on your host.

内容的提问来源于stack exchange，提问作者Sumit Garg