123

Dockerfile

@@ -6,11 +6,6 @@ WORKDIR /app
 
 # 配置npm使用淘宝镜像源（解决国内网络问题）
 RUN npm config set registry https://registry.npmmirror.com
-RUN npm config set disturl https://npm.taobao.org/dist
-RUN npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
-RUN npm config set puppeteer_download_host https://npm.taobao.org/mirrors
-RUN npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
-RUN npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
 
 # 复制package.json和package-lock.json
 COPY package*.json ./
@@ -24,20 +19,25 @@ COPY . .
 # 构建应用
 RUN npm run build
 
-# 生产阶段 - 使用阿里云Nginx镜像
-FROM nginx:alpine
+# 生产阶段 - 使用Node镜像运行Next.js应用
+FROM node:20-alpine
+
+# 设置工作目录
+WORKDIR /app
 
 # 配置Alpine使用国内镜像源
 RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
 
-# 复制构建产物到nginx的html目录
-COPY --from=builder /app/out /usr/share/nginx/html
+# 复制构建产物
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package*.json ./
 
-# 复制自定义nginx配置（如果需要）
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+# 安装生产依赖
+RUN npm install --production
 
-# 暴露80端口
-EXPOSE 80
+# 暴露Next.js默认端口
+EXPOSE 3000
 
-# 启动nginx
-CMD ["nginx", "-g", "daemon off;"]
+# 启动Next.js生产服务器
+CMD ["npm", "start"]

app/components/Message.tsx

@@ -11,7 +11,7 @@ const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
   const isUser = message.sender === 'user';
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const paperRef = useRef<HTMLDivElement>(null);
+  const paperRef = useRef(null);
   
   // 计算气泡的borderRadius
   const borderRadius = isUser 
@@ -20,7 +20,6 @@ const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
 
   return (
     <Box 
-      key={message.id} 
       display="flex" 
       marginBottom={2} 
       justifyContent={isUser ? "flex-end" : "flex-start"}

nginx.conf

@@ -2,18 +2,37 @@ server {
     listen 80;
     server_name localhost;
 
+    # Next.js项目的根目录
     root /usr/share/nginx/html;
     index index.html;
 
-    # 支持Next.js的路由
+    # Next.js路由配置
     location / {
         try_files $uri $uri/ /index.html;
     }
 
+    # 处理Next.js静态资源
+    location /_next/ {
+        alias /usr/share/nginx/html/_next/;
+        expires 30d;
+        access_log off;
+    }
+
+    # 处理API路由
+    location /api/ {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
     # 静态文件缓存
-    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
+    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
         expires 30d;
         add_header Cache-Control "public, no-transform";
+        access_log off;
     }
 
     # 错误页面