Initial commit: Nginx Config Studio

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user for Hugging Face Spaces
+RUN useradd -m -u 1000 user
+USER user
+
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,64 @@
+---
+title: Nginx Config Studio
+emoji: 🛠️
+colorFrom: gray
+colorTo: green
+sdk: docker
+pinned: false
+license: mit
+short_description: 可视化 Nginx 配置生成器
+---
+
+# Nginx 配置大师 (Nginx Config Studio)
+
+一款专为开发者和运维人员设计的**可视化 Nginx 配置文件生成器**。通过直观的图形界面，快速生成安全、高性能的 `nginx.conf` 配置，避免繁琐的语法错误。
+
+## ✨ 核心功能
+
+*   **可视化配置**：支持 Server、Location、Upstream 等核心指令的图形化编辑。
+*   **反向代理管理**：轻松添加多个代理路径，支持 WebSocket、Host 头转发等常用设置。
+*   **安全加固**：一键开启 HSTS、隐藏版本号、防点击劫持等安全选项（基于 OWASP 最佳实践）。
+*   **性能优化**：内置 Gzip 压缩、静态资源缓存、Client Body 限制等优化预设。
+*   **实时预览**：右侧代码框实时显示生成的配置文件，支持语法高亮。
+*   **一键导出**：支持复制到剪贴板或下载 `.conf` 文件。
+
+## 🛠️ 技术栈
+
+*   **Frontend**: Vue 3 + Tailwind CSS (使用 Baomitu CDN 加速) + Prism.js (语法高亮)
+*   **Backend**: Flask (Python)
+*   **Deployment**: Docker (兼容 Hugging Face Spaces)
+
+## 🚀 快速开始
+
+### Docker 部署 (推荐)
+
+本项目已配置 Dockerfile，可直接部署到 Hugging Face Spaces 或本地 Docker 环境。
+
+1.  **构建镜像**:
+    ```bash
+    docker build -t nginx-config-studio .
+    ```
+
+2.  **运行容器**:
+    ```bash
+    docker run -p 7860:7860 nginx-config-studio
+    ```
+
+3.  **访问应用**:
+    打开浏览器访问 `http://localhost:7860`
+
+### 本地开发
+
+1.  安装依赖:
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+2.  运行应用:
+    ```bash
+    python app.py
+    ```
+
+## 📝 许可证
+
+MIT License

app.py

@@ -0,0 +1,27 @@
+from flask import Flask, render_template, send_from_directory
+import os
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/health')
+def health():
+    return "OK", 200
+
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('index.html'), 404
+
+@app.errorhandler(500)
+def internal_server_error(e):
+    return "Internal Server Error: " + str(e), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

requirements.txt

@@ -0,0 +1,2 @@
+flask==3.0.0
+gunicorn==21.2.0

static/css/style.css

@@ -0,0 +1,27 @@
+/* Custom Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: #0f172a; 
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #334155; 
+    border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #475569; 
+}
+
+/* Prism Overrides for Dark Mode integration */
+code[class*="language-"],
+pre[class*="language-"] {
+    text-shadow: none !important;
+    font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}

static/js/app.js

@@ -0,0 +1,159 @@
+const { createApp, ref, computed, watch, nextTick, onMounted } = Vue;
+
+const app = createApp({
+    delimiters: ['[[', ']]'],
+    setup() {
+        const currentTab = ref('server');
+        
+        const tabs = [
+            { id: 'server', name: '基础设置', icon: 'fa-solid fa-sliders' },
+            { id: 'proxy', name: '反向代理', icon: 'fa-solid fa-route' },
+            { id: 'security', name: '安全防护', icon: 'fa-solid fa-shield-halved' },
+            { id: 'performance', name: '性能优化', icon: 'fa-solid fa-gauge-high' }
+        ];
+
+        const config = ref({
+            port: 80,
+            serverName: 'example.com',
+            root: '/var/www/html',
+            index: 'index.html index.htm',
+            forceHttps: false,
+            hideVersion: true,
+            hsts: false,
+            preventClickjacking: true,
+            gzip: true,
+            clientMaxBodySize: 10,
+            cacheStatic: true,
+            cacheExtensions: 'jpg jpeg png gif ico css js',
+            locations: [
+                { path: '/', proxyPass: '', websocket: false, tryFiles: '$uri $uri/ /index.html' },
+                { path: '/api', proxyPass: 'http://localhost:3000', websocket: false, tryFiles: '' }
+            ]
+        });
+
+        const addLocation = () => {
+            config.value.locations.push({ path: '/new-path', proxyPass: 'http://localhost:8080', websocket: false, tryFiles: '' });
+        };
+
+        const removeLocation = (index) => {
+            config.value.locations.splice(index, 1);
+        };
+
+        const generatedConfig = computed(() => {
+            const c = config.value;
+            let lines = [];
+
+            // Header
+            lines.push(`server {`);
+            lines.push(`    listen ${c.port};`);
+            lines.push(`    server_name ${c.serverName};`);
+            if (c.root) lines.push(`    root ${c.root};`);
+            if (c.index) lines.push(`    index ${c.index};`);
+            lines.push(``);
+
+            // Security
+            if (c.hideVersion) lines.push(`    # Hide Nginx version\n    server_tokens off;`);
+            if (c.forceHttps) lines.push(`    # Force HTTPS (Redirect)\n    if ($scheme != "https") {\n        return 301 https://$host$request_uri;\n    }`);
+            
+            let headers = [];
+            if (c.hsts) headers.push('add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;');
+            if (c.preventClickjacking) headers.push('add_header X-Frame-Options "SAMEORIGIN" always;');
+            
+            if (headers.length > 0) {
+                lines.push(`    # Security Headers`);
+                headers.forEach(h => lines.push(`    ${h}`));
+                lines.push(``);
+            }
+
+            // Performance
+            if (c.clientMaxBodySize) lines.push(`    client_max_body_size ${c.clientMaxBodySize}M;`);
+            
+            if (c.gzip) {
+                lines.push(`    # Gzip Compression`);
+                lines.push(`    gzip on;`);
+                lines.push(`    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;`);
+                lines.push(``);
+            }
+
+            if (c.cacheStatic) {
+                lines.push(`    # Static File Caching`);
+                lines.push(`    location ~* \\.(${c.cacheExtensions.split(' ').join('|')})$ {`);
+                lines.push(`        expires 30d;`);
+                lines.push(`        access_log off;`);
+                lines.push(`    }`);
+                lines.push(``);
+            }
+
+            // Locations
+            c.locations.forEach(loc => {
+                lines.push(`    location ${loc.path} {`);
+                if (loc.proxyPass) {
+                    lines.push(`        proxy_pass ${loc.proxyPass};`);
+                    lines.push(`        proxy_set_header Host $host;`);
+                    lines.push(`        proxy_set_header X-Real-IP $remote_addr;`);
+                    lines.push(`        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;`);
+                    if (loc.websocket) {
+                        lines.push(`        # WebSocket Support`);
+                        lines.push(`        proxy_http_version 1.1;`);
+                        lines.push(`        proxy_set_header Upgrade $http_upgrade;`);
+                        lines.push(`        proxy_set_header Connection "upgrade";`);
+                    }
+                } else if (loc.tryFiles) {
+                     lines.push(`        try_files ${loc.tryFiles};`);
+                }
+                lines.push(`    }`);
+                lines.push(``);
+            });
+
+            lines.push(`}`);
+            return lines.join('\n');
+        });
+
+        const highlightCode = () => {
+            nextTick(() => {
+                const codeBlock = document.getElementById('code-block');
+                if (codeBlock && window.Prism) {
+                    codeBlock.textContent = generatedConfig.value; // Update text content explicitly for Prism
+                    window.Prism.highlightElement(codeBlock);
+                }
+            });
+        };
+
+        watch(generatedConfig, () => {
+            highlightCode();
+        });
+
+        onMounted(() => {
+            highlightCode();
+        });
+
+        const copyConfig = () => {
+            navigator.clipboard.writeText(generatedConfig.value).then(() => {
+                alert('配置已复制到剪贴板！');
+            });
+        };
+
+        const downloadConfig = () => {
+            const blob = new Blob([generatedConfig.value], { type: 'text/plain' });
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'nginx.conf';
+            a.click();
+            window.URL.revokeObjectURL(url);
+        };
+
+        return {
+            tabs,
+            currentTab,
+            config,
+            addLocation,
+            removeLocation,
+            generatedConfig,
+            copyConfig,
+            downloadConfig
+        };
+    }
+});
+
+app.mount('#app');

templates/index.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nginx 配置大师 | Nginx Config Studio</title>
+    <script src="https://lib.baomitu.com/vue/3.3.4/vue.global.prod.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://lib.baomitu.com/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+    <script src="https://lib.baomitu.com/prism/1.29.0/prism.min.js"></script>
+    <script src="https://lib.baomitu.com/prism/1.29.0/components/prism-nginx.min.js"></script>
+    <link href="https://lib.baomitu.com/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+        .code-preview { max-height: calc(100vh - 200px); overflow-y: auto; }
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 h-screen overflow-hidden">
+    <div id="app" v-cloak class="h-full flex flex-col">
+        <!-- Header -->
+        <header class="bg-gray-800 border-b border-gray-700 h-16 flex items-center justify-between px-6 shrink-0">
+            <div class="flex items-center gap-3">
+                <i class="fa-solid fa-server text-green-500 text-2xl"></i>
+                <h1 class="text-xl font-bold tracking-wide">Nginx Config Studio <span class="text-xs bg-green-900 text-green-300 px-2 py-0.5 rounded ml-2">v1.0</span></h1>
+            </div>
+            <div class="flex items-center gap-4">
+                <button @click="copyConfig" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm transition flex items-center gap-2">
+                    <i class="fa-solid fa-copy"></i> 复制配置
+                </button>
+                <button @click="downloadConfig" class="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2 shadow-lg shadow-green-900/20">
+                    <i class="fa-solid fa-download"></i> 下载 .conf
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex overflow-hidden">
+            <!-- Sidebar / Config Form -->
+            <div class="w-1/2 lg:w-5/12 border-r border-gray-700 flex flex-col bg-gray-800/50">
+                <!-- Tabs -->
+                <div class="flex border-b border-gray-700">
+                    <button v-for="tab in tabs" :key="tab.id" 
+                        @click="currentTab = tab.id"
+                        :class="['flex-1 py-3 text-sm font-medium border-b-2 transition-colors duration-200', 
+                            currentTab === tab.id ? 'border-green-500 text-green-400 bg-gray-800' : 'border-transparent text-gray-400 hover:text-gray-200 hover:bg-gray-700/50']">
+                        <i :class="[tab.icon, 'mr-2']"></i> [[ tab.name ]]
+                    </button>
+                </div>
+
+                <!-- Form Content -->
+                <div class="flex-1 overflow-y-auto p-6 space-y-6">
+                    
+                    <!-- Server Settings -->
+                    <div v-if="currentTab === 'server'" class="space-y-4">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="form-group">
+                                <label class="block text-xs font-medium text-gray-400 mb-1">监听端口 (Listen Port)</label>
+                                <input v-model="config.port" type="number" class="w-full bg-gray-900 border border-gray-700 rounded p-2 text-white focus:border-green-500 focus:outline-none transition">
+                            </div>
+                            <div class="form-group">
+                                <label class="block text-xs font-medium text-gray-400 mb-1">域名 (Server Name)</label>
+                                <input v-model="config.serverName" type="text" placeholder="example.com" class="w-full bg-gray-900 border border-gray-700 rounded p-2 text-white focus:border-green-500 focus:outline-none transition">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="block text-xs font-medium text-gray-400 mb-1">项目根目录 (Root Directory)</label>
+                            <input v-model="config.root" type="text" placeholder="/var/www/html" class="w-full bg-gray-900 border border-gray-700 rounded p-2 text-white focus:border-green-500 focus:outline-none transition">
+                        </div>
+                        <div class="form-group">
+                            <label class="block text-xs font-medium text-gray-400 mb-1">默认文件 (Index)</label>
+                            <input v-model="config.index" type="text" placeholder="index.html index.htm" class="w-full bg-gray-900 border border-gray-700 rounded p-2 text-white focus:border-green-500 focus:outline-none transition">
+                        </div>
+                    </div>
+
+                    <!-- Proxy Settings -->
+                    <div v-if="currentTab === 'proxy'" class="space-y-4">
+                         <div class="flex justify-between items-center mb-2">
+                            <h3 class="text-sm font-bold text-gray-300">反向代理规则</h3>
+                            <button @click="addLocation" class="text-xs bg-blue-600 hover:bg-blue-500 text-white px-2 py-1 rounded transition">
+                                <i class="fa-solid fa-plus"></i> 添加规则
+                            </button>
+                        </div>
+                        
+                        <div v-for="(loc, index) in config.locations" :key="index" class="bg-gray-900 p-4 rounded border border-gray-700 relative group">
+                            <button @click="removeLocation(index)" class="absolute top-2 right-2 text-gray-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition">
+                                <i class="fa-solid fa-times"></i>
+                            </button>
+                            <div class="grid grid-cols-2 gap-3">
+                                <div>
+                                    <label class="block text-xs text-gray-500 mb-1">路径 (Path)</label>
+                                    <input v-model="loc.path" type="text" placeholder="/" class="w-full bg-gray-800 border border-gray-600 rounded p-1.5 text-sm text-white">
+                                </div>
+                                <div>
+                                    <label class="block text-xs text-gray-500 mb-1">目标 (Proxy Pass)</label>
+                                    <input v-model="loc.proxyPass" type="text" placeholder="http://localhost:3000" class="w-full bg-gray-800 border border-gray-600 rounded p-1.5 text-sm text-white">
+                                </div>
+                            </div>
+                            <div class="mt-2 flex items-center gap-2">
+                                <input type="checkbox" v-model="loc.websocket" :id="'ws-'+index" class="rounded bg-gray-700 border-gray-600 text-green-500 focus:ring-offset-gray-900">
+                                <label :for="'ws-'+index" class="text-xs text-gray-400">支持 WebSocket</label>
+                            </div>
+                        </div>
+                        
+                        <div v-if="config.locations.length === 0" class="text-center text-gray-500 py-8 text-sm">
+                            暂无代理规则，点击上方添加
+                        </div>
+                    </div>
+
+                    <!-- Security Settings -->
+                    <div v-if="currentTab === 'security'" class="space-y-4">
+                        <div class="bg-gray-900 p-4 rounded border border-gray-700 space-y-3">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <h4 class="text-sm font-medium text-gray-200">强制 HTTPS</h4>
+                                    <p class="text-xs text-gray-500">重定向所有 HTTP 请求到 HTTPS</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" v-model="config.forceHttps" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+                                </label>
+                            </div>
+
+                            <div class="flex items-center justify-between border-t border-gray-800 pt-3">
+                                <div>
+                                    <h4 class="text-sm font-medium text-gray-200">隐藏版本号</h4>
+                                    <p class="text-xs text-gray-500">server_tokens off</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" v-model="config.hideVersion" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+                                </label>
+                            </div>
+
+                            <div class="flex items-center justify-between border-t border-gray-800 pt-3">
+                                <div>
+                                    <h4 class="text-sm font-medium text-gray-200">HSTS</h4>
+                                    <p class="text-xs text-gray-500">HTTP Strict Transport Security</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" v-model="config.hsts" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+                                </label>
+                            </div>
+
+                             <div class="flex items-center justify-between border-t border-gray-800 pt-3">
+                                <div>
+                                    <h4 class="text-sm font-medium text-gray-200">防止点击劫持</h4>
+                                    <p class="text-xs text-gray-500">X-Frame-Options: SAMEORIGIN</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" v-model="config.preventClickjacking" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Performance Settings -->
+                    <div v-if="currentTab === 'performance'" class="space-y-4">
+                        <div class="bg-gray-900 p-4 rounded border border-gray-700 space-y-3">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <h4 class="text-sm font-medium text-gray-200">Gzip 压缩</h4>
+                                    <p class="text-xs text-gray-500">开启 Gzip 减少传输体积</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" v-model="config.gzip" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+                                </label>
+                            </div>
+                            
+                            <div class="pt-3 border-t border-gray-800">
+                                <label class="block text-xs font-medium text-gray-400 mb-1">最大上传限制 (Client Max Body Size)</label>
+                                <div class="flex items-center">
+                                    <input v-model="config.clientMaxBodySize" type="number" class="w-20 bg-gray-800 border border-gray-600 rounded-l p-1.5 text-white text-sm text-center">
+                                    <span class="bg-gray-700 border border-l-0 border-gray-600 rounded-r p-1.5 text-sm text-gray-300">MB</span>
+                                </div>
+                            </div>
+                            
+                            <div class="pt-3 border-t border-gray-800">
+                                <div class="flex items-center justify-between mb-2">
+                                    <h4 class="text-sm font-medium text-gray-200">静态资源缓存</h4>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" v-model="config.cacheStatic" class="sr-only peer">
+                                        <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
+                                    </label>
+                                </div>
+                                <div v-if="config.cacheStatic" class="pl-4 border-l-2 border-green-900">
+                                    <label class="block text-xs text-gray-500 mb-1">缓存文件类型</label>
+                                    <input v-model="config.cacheExtensions" type="text" class="w-full bg-gray-800 border border-gray-600 rounded p-1.5 text-xs text-gray-300">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Preview Panel -->
+            <div class="flex-1 bg-gray-950 flex flex-col min-w-0">
+                <div class="h-10 bg-gray-900 border-b border-gray-800 flex items-center px-4 justify-between">
+                    <span class="text-xs font-mono text-gray-400">nginx.conf</span>
+                    <span class="text-xs text-gray-600">Read Only</span>
+                </div>
+                <div class="flex-1 overflow-auto relative custom-scrollbar">
+                    <pre class="language-nginx h-full m-0 rounded-none !bg-gray-950 !text-sm"><code id="code-block" class="language-nginx">[[ generatedConfig ]]</code></pre>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/js/app.js"></script>
+</body>
+</html>