feat(docker): 重构Docker配置以支持生产环境部署

- 添加Dockerfile.dev用于开发环境
- 重构主Dockerfile使用多阶段构建
- 添加nginx配置和entrypoint脚本
- 更新docker-compose.yml配置
- 修改API基础路径为相对路径
- 更新vite配置支持环境变量

.dockerignore

@@ -11,3 +11,4 @@ coverage
 .nyc_output
 .DS_Store
 Thumbs.db
+Dockerfile.dev

.env.example

@@ -0,0 +1,7 @@
+# API Base URL
+# 默认值: https://thinkflow.lz-t.top
+API_BASE_URL=https://thinkflow.lz-t.top
+
+# API Host (用于 Nginx 代理的 Host 头)
+# 默认值: thinkflow.lz-t.top
+API_HOST=thinkflow.lz-t.top

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:20-alpine AS builder
 
 WORKDIR /app
 
@@ -8,6 +8,18 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 5173
+RUN npm run build
 
-CMD ["npm", "run", "dev", "--", "--host"]
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+COPY nginx.conf.template /etc/nginx/templates/nginx.conf.template
+
+COPY entrypoint.sh /docker-entrypoint.sh
+
+RUN chmod +x /docker-entrypoint.sh
+
+EXPOSE 80
+
+CMD ["/docker-entrypoint.sh"]

Dockerfile.dev

@@ -0,0 +1,13 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host"]

docker-compose.yml

@@ -5,12 +5,10 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    container_name: thinkflow-app
+    container_name: thinkflow
     ports:
-      - "5173:5173"
+      - "80:80"
-    volumes:
-      - .:/app
-      - /app/node_modules
     environment:
-      - NODE_ENV=development
+      - API_BASE_URL=${API_BASE_URL:-https://thinkflow.lz-t.top}
+      - API_HOST=${API_HOST:-thinkflow.lz-t.top}
     restart: unless-stopped

entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+envsubst '${API_BASE_URL} ${API_HOST}' < /etc/nginx/templates/nginx.conf.template > /etc/nginx/conf.d/default.conf
+
+exec nginx -g 'daemon off;'

nginx.conf

@@ -0,0 +1,29 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/chat {
+        proxy_pass https://thinkflow.lz-t.top/chat/completions;
+        proxy_set_header Host thinkflow.lz-t.top;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /api/image {
+        proxy_pass https://thinkflow.lz-t.top/images/generations;
+        proxy_set_header Host thinkflow.lz-t.top;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+}

nginx.conf.template

@@ -0,0 +1,29 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/chat {
+        proxy_pass ${API_BASE_URL}/chat/completions;
+        proxy_set_header Host ${API_HOST};
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /api/image {
+        proxy_pass ${API_BASE_URL}/images/generations;
+        proxy_set_header Host ${API_HOST};
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+}

src/composables/useThinkFlow.ts

@@ -49,12 +49,12 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
      */
     const DEFAULT_CONFIG = {
         chat: {
-            baseUrl: 'https://thinkflow.lz-t.top/chat/completions',
+            baseUrl: '/api/chat',
             model: 'glm-4-flash',
             apiKey: ''
         },
         image: {
-            baseUrl: 'https://thinkflow.lz-t.top/images/generations',
+            baseUrl: '/api/image',
             model: 'cogview-3-flash',
             apiKey: ''
         }

vite.config.ts

@@ -1,17 +1,32 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 
-// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
-export default defineConfig({
+  const env = loadEnv(mode, process.cwd(), '')
-  plugins: [vue()],
+  
-  server: {
+  return {
-    host: '0.0.0.0', // 允许通过 IP 访问
+    plugins: [vue()],
-    port: 5173,      // 你可以根据需要修改端口
+    server: {
-  },
+      host: '0.0.0.0',
-  resolve: {
+      port: 5173,
-    alias: {
+      proxy: {
-      '@': path.resolve(__dirname, './src'),
+        '/api/chat': {
+          target: env.VITE_API_BASE_URL || 'https://thinkflow.lz-t.top',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api\/chat/, '/chat/completions')
+        },
+        '/api/image': {
+          target: env.VITE_API_BASE_URL || 'https://thinkflow.lz-t.top',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api\/image/, '/images/generations')
+        }
+      }
     },
-  },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+  }
 })