Spaces:

luoluoluo22
/

opensite

Paused

App Files Files Community

luoluoluo22 commited on Apr 2, 2025

Commit

78963e3

1 Parent(s): d425192

修复: 解决Feature-Policy警告和页面显示问题

Browse files

Files changed (3) hide show

Dockerfile +7 -0
index.html +80 -22
server.js +46 -37

Dockerfile CHANGED Viewed

@@ -16,6 +16,13 @@ COPY . .
 # 构建应用
 RUN npm run build
 # 暴露端口
 EXPOSE 7860

 # 构建应用
 RUN npm run build
+# 确保 dist 目录中有 index.html（如果构建失败）
+RUN mkdir -p dist && \
+  if [ ! -f "dist/index.html" ]; then \
+  echo "使用备用 index.html"; \
+  cp index.html dist/ || echo "备用 index.html 不存在"; \
+  fi
 # 暴露端口
 EXPOSE 7860

index.html CHANGED Viewed

@@ -1,29 +1,87 @@
 <!DOCTYPE html>
-<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DeepSite | Build with AI ✨</title>
-    <meta
-      name="description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

 <!DOCTYPE html>
+<html lang="zh-CN">
   <head>
+    <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DeepSite - AI驱动的前端助手</title>
+    <style>
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: #f8f9fa;
+        color: #333;
+        text-align: center;
+        padding: 20px;
+      }
+      .container {
+        background: white;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        padding: 40px;
+        max-width: 600px;
+        width: 100%;
+      }
+      h1 {
+        margin-top: 0;
+        color: #0066cc;
+      }
+      p {
+        line-height: 1.6;
+        margin-bottom: 20px;
+      }
+    </style>
   </head>
   <body>
+    <div class="container">
+      <h1>DeepSite</h1>
+      <p>一个强大的 AI 驱动的前端开发助手，帮助你快速创建和优化网页。</p>
+      <p>应用正在加载中，请稍候...</p>
+      <p id="status">正在检查服务状态...</p>
+      <script>
+        // 简单的健康检查
+        const checkHealth = async () => {
+          try {
+            const response = await fetch('/debug');
+            if (response.ok) {
+              const data = await response.json();
+              document.getElementById('status').innerHTML =
+                '服务器运行正常，将在3秒后刷新页面...<br>' +
+                '时间: ' + data.time + '<br>' +
+                '端口: ' + data.port;
+              // 3秒后刷新
+              setTimeout(() => {
+                window.location.reload();
+              }, 3000);
+            } else {
+              document.getElementById('status').innerHTML =
+                '服务器响应异常，将在5秒后重试...';
+              // 5秒后重试
+              setTimeout(checkHealth, 5000);
+            }
+          } catch (err) {
+            document.getElementById('status').innerHTML =
+              '无法连接到服务器，将在5秒后重试...';
+            // 5秒后重试
+            setTimeout(checkHealth, 5000);
+          }
+        };
+        // 页面加载后检查健康状态
+        window.addEventListener('load', checkHealth);
+      </script>
+    </div>
   </body>
 </html>

server.js CHANGED Viewed

@@ -55,9 +55,16 @@ const MAX_REQUESTS_PER_IP = 4;
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, "dist"), {
-  index: false, // 不自动提供 index.html，我们会手动处理
   setHeaders: (res, filePath) => {
     console.log(`提供静态文件: ${filePath}`);
   }
 }));
 app.use(bodyParser.json());
@@ -622,9 +629,9 @@ if (!fs.existsSync(distDir)) {
   fs.mkdirSync(distDir, { recursive: true });
 }
-if (!fs.existsSync(indexPath)) {
-  console.log("创建基本的 index.html 文件");
-  const basicHtml = `
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
@@ -633,7 +640,7 @@ if (!fs.existsSync(indexPath)) {
   <title>DeepSite</title>
   <style>
     body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -651,49 +658,51 @@ if (!fs.existsSync(indexPath)) {
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       border-radius: 8px;
     }
-    h1 {
-      color: #0066cc;
-      margin-bottom: 20px;
-    }
-    p {
-      font-size: 18px;
-      line-height: 1.6;
-      color: #333;
-    }
-    .logo {
-      width: 100px;
-      height: 100px;
-      margin-bottom: 20px;
-    }
-    .button {
-      display: inline-block;
-      background-color: #0066cc;
-      color: white;
-      padding: 12px 24px;
-      border-radius: 4px;
-      text-decoration: none;
-      font-weight: bold;
-      margin-top: 20px;
-      transition: background-color 0.3s;
-    }
-    .button:hover {
-      background-color: #0052a3;
-    }
   </style>
 </head>
 <body>
   <div class="container">
     <h1>欢迎使用 DeepSite</h1>
-    <p>一个强大的AI驱动的前端开发助手，帮助你快速创建和优化网页。</p>
-    <p>如果您看到此页面，说明应用已成功启动，但可能静态资源加载有问题。</p>
-    <a href="/" class="button">刷新页面</a>
   </div>
 </body>
 </html>
   `;
-  fs.writeFileSync(indexPath, basicHtml);
 }
 app.listen(PORT, () => {
   console.log(`===== 应用启动信息 =====`);
   console.log(`启动时间: ${new Date().toISOString()}`);

 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, "dist"), {
+  index: false,
   setHeaders: (res, filePath) => {
     console.log(`提供静态文件: ${filePath}`);
+    // 移除可能导致问题的安全头部
+    res.removeHeader('Feature-Policy');
+    res.removeHeader('Permissions-Policy');
+    // 设置适当的内容安全策略
+    res.setHeader('Content-Security-Policy', "default-src 'self' https: data: 'unsafe-inline' 'unsafe-eval';");
   }
 }));
 app.use(bodyParser.json());
   fs.mkdirSync(distDir, { recursive: true });
 }
+// 修改 createBasicHtml 函数，创建一个更基础的 HTML 页面
+const createBasicHtml = () => {
+  return `
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <title>DeepSite</title>
   <style>
     body {
+      font-family: system-ui, sans-serif;
       display: flex;
       flex-direction: column;
       align-items: center;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       border-radius: 8px;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <h1>欢迎使用 DeepSite</h1>
+    <p>一个强大的 AI 驱动的前端开发助手</p>
+    <p>正在加载中...</p>
+    <p><a href="/" id="refresh">刷新页面</a></p>
+    <div id="debug"></div>
+    <script>
+      // 简单的调试脚本
+      document.getElementById('debug').innerHTML = '浏览器信息: ' + navigator.userAgent;
+      // 5秒后自动刷新
+      setTimeout(() => {
+        window.location.reload();
+      }, 5000);
+    </script>
   </div>
 </body>
 </html>
   `;
+};
+// 在检查 index.html 不存在时使用新的函数
+if (!fs.existsSync(indexPath)) {
+  console.log("创建基本的 index.html 文件");
+  fs.writeFileSync(indexPath, createBasicHtml());
 }
+// 添加调试路由
+app.get("/debug", (req, res) => {
+  const info = {
+    env: process.env.NODE_ENV,
+    port: PORT,
+    time: new Date().toISOString(),
+    static_dir: path.join(__dirname, "dist"),
+    files: fs.readdirSync(path.join(__dirname, "dist")),
+    headers: req.headers
+  };
+  res.setHeader('Content-Type', 'application/json');
+  res.send(JSON.stringify(info, null, 2));
+});
 app.listen(PORT, () => {
   console.log(`===== 应用启动信息 =====`);
   console.log(`启动时间: ${new Date().toISOString()}`);