By

Contents
  1. 1. 门户代理
    1. 1.0.1. 1. 创建门户页面
    2. 1.0.2. 2. 更新Nginx配置
    3. 1.0.3. 3. 创建认证文件
    4. 1.0.4. 4. 配置后端服务防火墙
  2. 1.1. 高级增强功能
  3. 1.2. 部署与维护

门户代理

用户浏览器
↓
Nginx代理服务器 (含Portal页面)
↓
后端服务 (HDFS Web UI及其他服务)

1. 创建门户页面

在Nginx服务器上创建门户目录：

1
2
3
4
5
6
7
tar -xf nginx-1.29.0.tar.gz
./configure --prefix=/data/soft/nginx
make && make install

mkdir -p portal
vi portal/index.html

index.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>403 Forbidden</title>
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #2c3e50;
            --online: #2ecc71;
            --offline: #e74c3c;
            --checking: #f39c12;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        
        .service-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .card-header {
            background: var(--secondary);
            color: white;
            padding: 20px;
            position: relative;
        }
        
        .service-status {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.9);
            border-top: 1px solid #eee;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-indicator.online {
            background-color: var(--online);
        }
        
        .status-indicator.offline {
            background-color: var(--offline);
        }
        
        .status-indicator.checking {
            background-color: var(--checking);
            animation: pulse 1.5s infinite;
        }
        
        .status-text {
            font-size: 0.9rem;
            color: var(--dark);
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        /* 403 Page Styles */
        #forbidden-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        #forbidden-page h1 {
            font-size: 5rem;
            color: var(--accent);
            margin-bottom: 20px;
        }
        
        #forbidden-page p {
            font-size: 1.5rem;
            color: var(--dark);
            margin-bottom: 30px;
        }
        
        #secret-area {
            position: fixed;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            z-index: 1001;
            opacity: 0;
        }
        
        .hidden-content {
            display: none;
        }
    </style>
</head>
<body>
    <div id="forbidden-page">
        <h1>403</h1>
        <p>Forbidden - Access Denied</p>
        <p>You don't have permission to access this resource.</p>
    </div>
    
    <div id="secret-area"></div>
    
    <div class="container hidden-content">
        <header>
            <h1>服务状态监控</h1>
        </header>
        
        <div class="services-grid">
            <div class="service-card">
                <a href="/hdfs/">
                    <div class="card-header">
                        <h2>HDFS</h2>
                    </div>
                </a>
                <div class="service-status" id="hdfs-status">
                    <span class="status-indicator checking"></span>
                    <span class="status-text">正在检测...</span>
                </div>
            </div>
            <div class="service-card">
                <a href="/yarn/">
                    <div class="card-header">
                        <h2>YARN</h2>
                    </div>
                </a>
                <div class="service-status" id="yarn-status">
                    <span class="status-indicator checking"></span>
                    <span class="status-text">正在检测...</span>
                </div>
            </div>
            <div class="service-card">
                <a href="/spark-history/">
                    <div class="card-header">
                        <h2>Spark</h2>
                    </div>
                </a>
                <div class="service-status" id="spark-status">
                    <span class="status-indicator checking"></span>
                    <span class="status-text">正在检测...</span>
                </div>
            </div>
            <div class="service-card">
                <a href="/hbase/">
                    <div class="card-header">
                        <h2>HBase</h2>
                    </div>
                </a>
                <div class="service-status" id="hbase-status">
                    <span class="status-indicator checking"></span>
                    <span class="status-text">正在检测...</span>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const forbiddenPage = document.getElementById('forbidden-page');
            const secretArea = document.getElementById('secret-area');
            const hiddenContent = document.querySelector('.container');
            
            // Set initial state
            forbiddenPage.style.display = 'flex';
            hiddenContent.style.display = 'none';
            
            // Add double-click event to secret area
            secretArea.addEventListener('dblclick', function() {
                forbiddenPage.style.display = 'none';
                hiddenContent.style.display = 'block';
                checkServiceStatus(); // Check services when content is revealed
            });            
            
            // Service status checking function
            async function checkServiceStatus() {
                const services = [
                    { id: 'hdfs', path: '/hdfs/' },
                    { id: 'yarn', path: '/yarn/' },
                    { id: 'spark', path: '/spark-history/' },
                    { id: 'hbase', path: '/hbase/' }
                ];

                for (const service of services) {
                    try {
                        const statusElem = document.getElementById(`${service.id}-status`);
                        const indicator = statusElem.querySelector('.status-indicator');
                        const text = statusElem.querySelector('.status-text');
                        
                        indicator.className = 'status-indicator checking';
                        text.textContent = '正在检测...';
                        
                        const response = await fetch(service.path, { method: 'HEAD' });
                        
                        if (response.ok) {
                            indicator.className = 'status-indicator online';
                            text.textContent = '在线';
                        } else {
                            indicator.className = 'status-indicator offline';
                            text.textContent = '离线';
                        }
                    } catch (error) {
                        const statusElem = document.getElementById(`${service.id}-status`);
                        statusElem.querySelector('.status-indicator').className = 'status-indicator offline';
                        statusElem.querySelector('.status-text').textContent = '离线';
                    }
                }
            }
        });
    </script>
</body>
</html>

2. 更新Nginx配置

/etc/nginx/conf.d/portal.conf

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
http {
    include       mime.types;
    default_type  application/octet-stream;

    keepalive_timeout  65;
    sendfile        on;

    geo $whitelist {
        default 0;
        127.0.0.1 1;
        10.17.14.0/24 1;    
    }
    limit_req_zone $binary_remote_addr zone=auth_limit:1m rate=2r/m;
    limit_req_zone $binary_remote_addr zone=api_limit:1m rate=1r/s;
    limit_conn_zone $binary_remote_addr zone=perip_conn:1m;
    
    server {
        listen 8888;
        server_name localhost; 
        
        if ($whitelist != 1) {
            return 404;
        }
    
        limit_req zone=api_limit burst=20 nodelay;
        limit_req zone=auth_limit burst=10 nodelay; 
        auth_basic "认证";
        auth_basic_user_file /data/soft/nginx/conf/portal_wd;
        
        root /data/soft/nginx/portal;
        index index.html;  
        
        location = / {            
            limit_conn perip_conn 10;
        }
        
        location /hdfs/ {
            proxy_pass http://10.27.48.1:50070/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Authorization $http_authorization;
        }
        
        location /yarn/ {
            proxy_pass http://10.27.48.1:8088/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Authorization $http_authorization;
        }
        
        location /spark-history/ {
            proxy_pass http://10.27.48.1:18080/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Authorization $http_authorization;
        }
        
        location /ds/ {
            proxy_pass http://10.27.48.1:12345/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Authorization $http_authorization;
        }
    }
        
        log_format portal_log '$remote_addr - $remote_user [$time_local] '
                              '"$request" $status $body_bytes_sent '
                              '"$http_referer" "$http_user_agent"';
        
        access_log /data/soft/nginx/logs/portal-access.log portal_log;
}

3. 创建认证文件

1
2
3
4
5
6
sudo htpasswd -c /etc/nginx/conf.d/portal_wd admin
# 添加更多用户
sudo htpasswd /etc/nginx/conf.d/portal_wd user1

# 用户管理
sudo htpasswd /etc/nginx/conf.d/portal_wd new_user

4. 配置后端服务防火墙

1
2
3
# 只允许Nginx服务器IP访问
sudo iptables -A INPUT -p tcp --dport <服务端口> -s [Nginx服务器IP] -j ACCEPT
sudo iptables -A INPUT -p tcp --dport <服务端口> -j DROP

高级增强功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
### 2. 基于角色的访问控制

在Nginx中实现不同用户访问不同服务：

```nginx
# 在http块中添加映射
map $remote_user $allowed_services {
    default          "";
    admin            "hdfs|yarn|spark|hbase";
    data_engineer    "hdfs|spark";
    analyst          "yarn";
}

# 在服务location中添加检查
location ~ ^/(hdfs|yarn|spark|hbase)/ {
    if ($allowed_services !~ $1) {
        return 403;
    }
    
    # 原始代理配置
    proxy_pass ...;
}

部署与维护

1
2
3
4
5
6
7
8
9
sudo systemctl restart nginx
sudo systemctl enable nginx

nginx
nginx -s stop
nginx -s reload
nginx -t #检查配置