Nginx 部署静态网站 🌐

Nginx Static Pages

📖 目录导航

🌟 简介

本指南将帮助您配置 Nginx 服务器来托管静态网页，包括带域名的 HTTPS 访问和内网 HTTP 访问两种方式。Nginx 是一个高性能的 HTTP 和反向代理服务器，以其稳定性、丰富的功能集、简单的配置和低资源消耗而闻名。

🔐 一、配置带域名的静态页面（HTTPS）

访问地址： https://jingtai.mobufan.eu.org:5553

1. 创建 HTML 静态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
mkdir -p /var/www/html/web && \
touch /var/www/html/web/index.html && \
cat > /var/www/html/web/index.html <<'EOF'
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@墨不凡 - 静态页面</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background: #000000;
  height: 100%;
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(200, 0, 255, 0.5);
}

.title {
  font-size: 2.5rem;
  color: #ff0037;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(255, 0, 55, 0.7);
}

.path {
  font-size: 1.2rem;
  color: #e6fafd;
  padding: 1rem;
  border: 2px dashed rgb(200, 0, 255);
  border-radius: 5px;
  background: rgba(230, 250, 253, 0.1);
}

.footer {
  margin-top: 2rem;
  color: #888;
  font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
  <h1 class="title">欢迎访问静态页面</h1>
  <div class="path">静态页路径: /var/www/html/web/index.html</div>
  <div class="footer">@墨不凡 · 基于 Nginx 构建</div>
</div>
</body>
</html>
EOF

2. 创建 Nginx 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
touch /etc/nginx/conf.d/jingtai.conf && \
cat > /etc/nginx/conf.d/jingtai.conf <<'EOF'
server {
    ## 监听5553端口，启用SSL
    listen 5553 ssl;
    listen [::]:5553 ssl;

    ## 域名配置
    server_name jingtai.mobufan.eu.org;

    ## SSL证书配置
    ssl_certificate /etc/nginx/keyfile/cert.pem;
    ssl_certificate_key /etc/nginx/keyfile/key.pem;
    
    ## SSL优化配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    ## 字符编码
    charset utf-8;

    ## 根目录配置
    root /var/www/html/web;
    index index.html;

    ## 访问日志
    access_log /var/log/nginx/jingtai.access.log;
    error_log /var/log/nginx/jingtai.error.log;

    location / {
        try_files $uri $uri/ =404;
        
        ## 安全头部
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header Referrer-Policy "no-referrer-when-downgrade" always;
        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    }

    ## 禁止访问隐藏文件
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }

    ## 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
EOF

3. 应用配置

1
2
3
4
5
6
7
8
9
10
11
# 测试配置文件语法
sudo nginx -t

# 重启Nginx服务
sudo systemctl restart nginx

# 查看Nginx状态
sudo systemctl status nginx

# 检查端口监听情况
sudo netstat -tuln | grep :5553

🌐 二、配置内网静态页面（HTTP）

访问地址： http://10.10.10.245:1414

1. 创建 HTML 静态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
mkdir -p /var/www/html/web && \
touch /var/www/html/web/index.html && \
cat > /var/www/html/web/index.html <<'EOF'
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@墨不凡 - 内网静态页面</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background: #1a1a1a;
  height: 100%;
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.container {
  text-align: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  border: 2px solid #4a4a4a;
  max-width: 90%;
}

.title {
  font-size: 2rem;
  color: #4dc0ff;
  margin-bottom: 1rem;
}

.path {
  font-size: 1.1rem;
  color: #ccc;
  padding: 1rem;
  border: 1px dashed #4dc0ff;
  border-radius: 5px;
  margin: 1rem 0;
  background: rgba(77, 192, 255, 0.1);
}

.info {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #888;
}

.ip-address {
  color: #4dc0ff;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
  <h1 class="title">内网静态页面服务</h1>
  <div class="path">静态页路径: /var/www/html/web/index.html</div>
  <div class="info">
    <p>服务器IP: <span class="ip-address">10.10.10.245</span></p>
    <p>访问端口: <span class="ip-address">1414</span></p>
    <p>@墨不凡 · 内网服务</p>
  </div>
</div>
</body>
</html>
EOF

2. 创建 Nginx 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
touch /etc/nginx/conf.d/web.conf && \
cat > /etc/nginx/conf.d/web.conf <<'EOF'
server {
    ## 监听1414端口
    listen 1414 default_server;
    listen [::]:1414 default_server;

    ## 服务器名称（可选）
    server_name _;

    ## 字符编码
    charset utf-8;

    ## 根目录配置
    root /var/www/html/web;
    index index.html;

    ## 访问日志
    access_log /var/log/nginx/web.access.log;
    error_log /var/log/nginx/web.error.log;

    location / {
        try_files $uri $uri/ =404;
        
        ## 安全头部
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
    }

    ## 禁止访问隐藏文件
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }

    ## 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    ## 限制访问（可选，可根据需要配置内网IP段）
    # allow 10.10.10.0/24;
    # deny all;
}
EOF

3. 应用配置

1
2
3
4
5
6
7
8
9
10
11
# 测试配置文件语法
sudo nginx -t

# 重启Nginx服务
sudo systemctl restart nginx

# 查看Nginx状态
sudo systemctl status nginx

# 检查端口监听情况
sudo netstat -tuln | grep :1414

🔧 三、高级配置选项

1. 启用 Gzip 压缩

在 /etc/nginx/nginx.conf 的 http 块中添加：

1
2
3
4
5
6
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
gzip_disable "MSIE [1-6]\.";

2. 添加自定义错误页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 创建错误页面目录
mkdir -p /var/www/html/errors

# 创建自定义404页面
cat > /var/www/html/errors/404.html <<'EOF'
<!DOCTYPE html>
<html>
<head>
    <title>页面未找到 - 404</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            text-align: center; 
            padding: 50px; 
            background: #f8f9fa;
            color: #343a40;
        }
        h1 { 
            font-size: 50px; 
            color: #dc3545; 
        }
        a { 
            color: #007bff; 
            text-decoration: none;
        }
        a:hover { 
            text-decoration: underline; 
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>抱歉，您访问的页面不存在。</p>
    <p><a href="/">返回首页</a></p>
</body>
</html>
EOF

在 Nginx 配置中添加错误页面处理：

1
2
3
4
5
error_page 404 /errors/404.html;
location = /errors/404.html {
    internal;
    root /var/www/html;
}

3. 添加访问限制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
## 限制特定IP段访问
location / {
    allow 10.10.10.0/24;
    allow 192.168.1.0/24;
    deny all;
    
    ## 其他配置...
}

## 或者添加基础认证
location /admin/ {
    auth_basic "Restricted Area";
    auth_basic_user_file /etc/nginx/.htpasswd;
}

创建密码文件：

1
2
3
4
5
# 安装htpasswd工具
sudo apt-get install apache2-utils

# 创建用户和密码
sudo htpasswd -c /etc/nginx/.htpasswd username

📊 四、监控和维护

1. 查看访问日志

1
2
3
4
5
6
7
8
9
10
11
# 实时查看访问日志
tail -f /var/log/nginx/jingtai.access.log

# 查看错误日志
tail -f /var/log/nginx/jingtai.error.log

# 统计访问量
awk '{print $1}' /var/log/nginx/jingtai.access.log | sort | uniq -c | sort -nr | head -10

# 查看最常访问的页面
awk '{print $7}' /var/log/nginx/jingtai.access.log | sort | uniq -c | sort -nr | head -10

2. 性能监控

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 安装监控工具
sudo apt-get install htop iotop iftop

# 查看Nginx进程
ps aux | grep nginx

# 查看服务器连接状态
netstat -an | grep :5553

# 监控Nginx性能
nginx -T

# 查看系统资源使用情况
top -p $(pgrep nginx | head -1)

3. 定期维护脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 创建维护脚本
cat > /usr/local/bin/nginx-maintenance.sh <<'EOF'
#!/bin/bash

# 日志轮转
logrotate /etc/logrotate.d/nginx

# 清理旧日志（保留30天）
find /var/log/nginx -name "*.log" -type f -mtime +30 -delete

# 测试配置
nginx -t

# 平滑重载配置
nginx -s reload

echo "Nginx maintenance completed at $(date)"
EOF

chmod +x /usr/local/bin/nginx-maintenance.sh

# 添加到cron定期执行
(crontab -l 2>/dev/null; echo "0 2 * * * /usr/local/bin/nginx-maintenance.sh") | crontab -

🔒 五、安全加固建议

  1. 保持更新：定期更新 Nginx 和系统软件包

    1
    sudo apt update && sudo apt upgrade -y

  2. 最小权限：使用非root用户运行Nginx工作进程

    1
    user www-data;

  3. 防火墙配置：只开放必要的端口

    1
    2
    3
    sudo ufw allow 5553/tcp
    sudo ufw allow 1414/tcp
    sudo ufw enable

  4. 禁用服务器令牌：在nginx.conf中添加 server_tokens off;

  5. 限制请求大小：设置 client_max_body_size 防止大文件上传攻击

    1
    client_max_body_size 10M;

  6. 定期备份：备份配置文件和网站内容

    1
    2
    3
    4
    5
    # 备份Nginx配置
    tar -czf nginx-backup-$(date +%Y%m%d).tar.gz /etc/nginx/

    # 备份网站内容
    tar -czf web-backup-$(date +%Y%m%d).tar.gz /var/www/html/

  7. 使用安全协议：禁用不安全的SSL/TLS协议和密码套件

    1
    2
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384;

🚀 六、性能优化

1. 启用缓存

1
2
3
4
5
6
7
8
9
10
# 在http块中添加
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;

# 在server或location块中使用
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    proxy_cache my_cache;
    proxy_cache_valid 200 302 1h;
    proxy_cache_valid 404 1m;
    add_header X-Cache-Status $upstream_cache_status;
}

2. 调整工作进程

1
2
3
4
5
6
7
8
# 根据CPU核心数调整
worker_processes auto;

# 每个工作进程的最大连接数
events {
    worker_connections 1024;
    multi_accept on;
}

3. 启用Keepalive

1
2
3
# 在http块中添加
keepalive_timeout 65;
keepalive_requests 100;

🐛 七、故障排除

1. 常见问题解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 检查Nginx配置语法
sudo nginx -t

# 查看Nginx错误日志
sudo tail -f /var/log/nginx/error.log

# 检查端口占用
sudo netstat -tulnp | grep :5553

# 检查文件权限
ls -la /var/www/html/web/

# 检查SELinux状态（如果启用）
getenforce
sestatus

2. 性能问题诊断

1
2
3
4
5
6
7
8
9
10
11
# 查看Nginx连接状态
netstat -an | grep :5553 | wc -l

# 查看服务器负载
uptime

# 查看内存使用情况
free -h

# 查看磁盘I/O
iostat -x 1

3. 日志分析工具

1
2
3
4
5
6
7
8
# 安装日志分析工具
sudo apt-get install goaccess

# 分析访问日志
goaccess /var/log/nginx/jingtai.access.log -o /var/www/html/report.html --log-format=COMBINED

# 实时监控
goaccess /var/log/nginx/jingtai.access.log -o /var/www/html/realtime.html --real-time-html --log-format=COMBINED

🚀 通过以上配置，您已经成功部署了安全、高效的静态网页服务。无论是通过域名HTTPS访问还是内网HTTP访问，都能提供良好的用户体验！

💡 提示：定期检查服务器日志和性能指标，根据实际访问情况调整配置参数。对于生产环境，建议使用监控工具（如Prometheus + Grafana）进行持续监控。