Merge pull request #78 from JefferyHcool/deploy/docker

feat(deploy): 重构部署方案并添加 nginx 代理

BillNote_frontend/Dockerfile

@@ -1,5 +1,5 @@
 # === 前端构建阶段 ===
-FROM node:18-alpine AS build
+FROM node:18-alpine AS builder
 
 # 安装 pnpm
 RUN npm install -g pnpm
@@ -13,20 +13,13 @@ COPY ./BillNote_frontend /app
 # 安装依赖并构建
 RUN pnpm install && pnpm run build
 
-# === nginx 运行阶段 ===
-FROM nginx:alpine
+# --- 阶段2：使用 nginx 作为静态服务器 ---
+FROM nginx:1.25-alpine
+
+# 删除默认配置（可选）
+RUN rm -rf /etc/nginx/conf.d/default.conf
+COPY ./BillNote_frontend/deploy/default.conf /etc/nginx/conf.d/default.conf
 
-# 拷贝模板配置
-COPY ./BillNote_frontend/deploy/default.conf.template /etc/nginx/templates/default.conf.template
 
 # 拷贝构建产物
-COPY --from=build /app/dist /usr/share/nginx/html
-
-# 拷贝启动脚本
-COPY ./BillNote_frontend/deploy/start.sh /start.sh
-RUN chmod +x /start.sh
-
-EXPOSE 80
-
-# 使用启动脚本启动容器
-CMD ["/start.sh"]
+COPY --from=builder /app/dist /usr/share/nginx/html

BillNote_frontend/deploy/default.conf

@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  server_name localhost;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri /index.html;
+  }
+}

BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button.tsx'
-import { Copy, Download, ArrowRight,Play  } from 'lucide-react'
+import { Copy, Download, ArrowRight,Play,ExternalLink  } from 'lucide-react'
 import { toast } from 'react-hot-toast'
 import Error from '@/components/Lottie/error.tsx'
 import Loading from '@/components/Lottie/Loading.tsx'

backend/Dockerfile

@@ -13,6 +13,9 @@ RUN rm -f /etc/apt/sources.list && \
 # 确保 PATH 中包含 ffmpeg 路径（可选）
 ENV PATH="/usr/bin:${PATH}"
 
+# 设置 Hugging Face 镜像源环境变量
+ENV HF_ENDPOINT=https://hf-mirror.com
+
 WORKDIR /app
 COPY ./backend /app
 RUN pip install --no-cache-dir -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3.9"
 
 services:
   backend:
@@ -13,11 +12,8 @@ services:
       - BACKEND_HOST=${BACKEND_HOST}
     volumes:
       - ./backend:/app
-    ports:
-      - "${BACKEND_PORT}:${BACKEND_PORT}"
-
-    depends_on:
-      - frontend
+    expose:
+      - "${BACKEND_PORT}"  # 不再对外暴露，用于 nginx 内部通信
 
   frontend:
     container_name: bilinote-frontend
@@ -26,7 +22,16 @@ services:
       dockerfile: BillNote_frontend/Dockerfile
     env_file:
       - .env
+    expose:
+      - "80"  # 不暴露给宿主机，只供 nginx 访问
+
+  nginx:
+    container_name: bilinote-nginx
+    image: nginx:1.25-alpine
     ports:
-      - "${FRONTEND_PORT}:80"
-
-
+      - "80:80"
+    volumes:
+      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
+    depends_on:
+      - backend
+      - frontend

nginx/default.conf

@@ -0,0 +1,21 @@
+server {
+  listen 80;
+
+  # 所有非 /api 请求全部代理给 frontend 容器
+  location / {
+    proxy_pass http://frontend:80;
+  }
+
+  # 所有 /api 请求代理给 backend 容器
+  location /api/ {
+    proxy_pass http://backend:8000;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+  }
+    
+   location /static/ {
+    proxy_pass http://backend:8000/static/;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+  }
+}