diff --git a/.gitignore b/.gitignore index 6e7e0a9..9326ff7 100644 --- a/.gitignore +++ b/.gitignore @@ -33,6 +33,8 @@ yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* +nginx/logs/ +nginx/*.log # Editor directories and files .vscode/ diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 57e22f3..7e933af 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -10,6 +10,7 @@ export default defineConfig({ }, }, server: { + host: '0.0.0.0', port: 3000, proxy: { '/api': { diff --git a/nginx/DEPLOY_IP.md b/nginx/DEPLOY_IP.md new file mode 100644 index 0000000..661014e --- /dev/null +++ b/nginx/DEPLOY_IP.md @@ -0,0 +1,190 @@ +# 使用 IP 地址部署指南 + +## 快速部署步骤 + +### 1. 构建前端 + +```bash +cd frontend +npm run build +``` + +构建完成后,文件在 `frontend/dist/` 目录。 + +### 2. 修改 Nginx 配置 + +编辑 `nginx/nginx.conf`,主要修改前端文件路径: + +```nginx +# 前端静态文件路径(根据实际路径修改) +location / { + root /path/to/your/project/frontend/dist; # 修改这里 + index index.html; + try_files $uri $uri/ /index.html; +} +``` + +**示例路径**: +- Linux: `/var/www/ai-learning-platform/frontend/dist` +- macOS: `/Users/yourname/Documents/code/ai/frontend/dist` +- Windows: `C:\projects\ai-learning-platform\frontend\dist` + +### 3. 启动后端服务 + +确保后端在 3001 端口运行: + +```bash +cd backend +npm run build +npm start +``` + +或者使用 PM2: + +```bash +pm2 start backend/dist/index.js --name ai-learning-backend +``` + +### 4. 安装并启动 Nginx + +#### Linux (Ubuntu/Debian) + +```bash +# 安装 nginx +sudo apt-get update +sudo apt-get install nginx + +# 复制配置文件 +sudo cp nginx/nginx.conf /etc/nginx/sites-available/ai-learning-platform + +# 创建符号链接 +sudo ln -s /etc/nginx/sites-available/ai-learning-platform /etc/nginx/sites-enabled/ + +# 删除默认配置(可选) +sudo rm /etc/nginx/sites-enabled/default + +# 测试配置 +sudo nginx -t + +# 启动 nginx +sudo systemctl start nginx +sudo systemctl enable nginx # 开机自启 +``` + +#### macOS + +```bash +# 安装 nginx (使用 Homebrew) +brew install nginx + +# 复制配置文件 +sudo cp nginx/nginx.conf /opt/homebrew/etc/nginx/servers/ai-learning-platform.conf + +# 测试配置 +sudo nginx -t + +# 启动 nginx +sudo nginx +``` + +### 5. 访问应用 + +在浏览器中访问: + +``` +http://服务器IP地址 +``` + +例如: +- `http://192.168.1.100` +- `http://localhost` (本地访问) +- `http://127.0.0.1` (本地访问) + +### 6. 检查服务状态 + +```bash +# 检查 nginx 状态 +sudo systemctl status nginx # Linux +sudo nginx -t # 测试配置 + +# 检查后端服务 +curl http://localhost:3001/api/health + +# 检查前端 +curl http://localhost/ +``` + +## 常见问题 + +### 1. 无法访问 + +**检查防火墙**: +```bash +# Linux +sudo ufw allow 80/tcp +sudo ufw status + +# 检查端口是否被占用 +sudo netstat -tulpn | grep :80 +``` + +### 2. 403 Forbidden + +- 检查前端文件路径是否正确 +- 检查文件权限:`sudo chmod -R 755 /path/to/frontend/dist` +- 检查 nginx 用户权限 + +### 3. API 请求失败 + +- 确保后端服务在 3001 端口运行 +- 检查 `upstream backend` 配置 +- 查看 nginx 错误日志:`sudo tail -f /var/log/nginx/ai-learning-error.log` + +### 4. 页面空白 + +- 检查浏览器控制台错误 +- 确认前端构建成功 +- 检查 nginx 访问日志:`sudo tail -f /var/log/nginx/ai-learning-access.log` + +## 获取服务器 IP 地址 + +### Linux/macOS + +```bash +# 查看本机 IP +ifconfig +# 或 +ip addr show + +# 查看公网 IP(如果有) +curl ifconfig.me +``` + +### 局域网访问 + +如果服务器在局域网中,其他设备可以通过局域网 IP 访问: +- 确保防火墙允许 80 端口 +- 使用局域网 IP,如:`http://192.168.1.100` + +## 性能优化建议 + +1. **启用 Gzip 压缩**(在 nginx 主配置中): +```nginx +gzip on; +gzip_types text/plain text/css application/json application/javascript text/xml application/xml; +``` + +2. **调整工作进程数**(根据 CPU 核心数): +```nginx +worker_processes auto; +``` + +3. **启用缓存**(已在配置中): +- 静态资源已配置 1 年缓存 + +## 下一步 + +配置完成后,可以通过 IP 地址访问应用。如果需要使用域名,可以: +1. 配置 DNS 解析 +2. 修改 `server_name` 为域名 +3. 配置 SSL 证书(HTTPS) diff --git a/nginx/README.md b/nginx/README.md index 29b4965..697d3ae 100644 --- a/nginx/README.md +++ b/nginx/README.md @@ -27,9 +27,9 @@ npm run build 编辑 `nginx.conf` 文件,修改以下配置: -- `server_name`: 改为您的域名 -- `root`: 改为前端构建文件的绝对路径 -- `upstream backend`: 确保后端服务器地址正确 +- `server_name`: 已设置为 `_`,支持通过 IP 地址访问(也可改为具体 IP 如 `192.168.1.100`) +- `root`: 改为前端构建文件的绝对路径(默认:`/var/www/ai-learning-platform/frontend/dist`) +- `upstream backend`: 确保后端服务器地址正确(默认:`localhost:3001`) ### 3. 安装配置文件 @@ -65,6 +65,13 @@ pm2 start backend/dist/index.js --name ai-learning-backend ## 配置说明 +### IP 地址访问 + +当前配置已设置为支持 IP 地址访问: +- `server_name _;` 表示匹配所有域名和 IP 地址 +- 可以通过服务器的 IP 地址直接访问,如:`http://192.168.1.100` +- 如果需要限制为特定 IP,可以改为:`server_name 192.168.1.100;` + ### 前端路径 默认配置假设前端构建文件在: @@ -74,6 +81,11 @@ pm2 start backend/dist/index.js --name ai-learning-backend 请根据实际部署路径修改 `root` 指令。 +**本地测试路径示例**: +```nginx +root /Users/yuchuncao/Documents/code/ai/frontend/dist; +``` + ### 后端代理 API 请求会被代理到: @@ -83,6 +95,14 @@ http://localhost:3001 如果需要修改,编辑 `upstream backend` 部分。 +**注意**:如果后端服务运行在不同的服务器上,需要修改为实际的 IP 地址: +```nginx +upstream backend { + server 192.168.1.101:3001; # 后端服务器 IP 和端口 + keepalive 64; +} +``` + ### 静态资源缓存 静态资源(JS、CSS、图片等)会缓存 1 年,提高性能。 diff --git a/nginx/nginx.conf b/nginx/nginx.conf index 47c7c82..b5695b6 100644 --- a/nginx/nginx.conf +++ b/nginx/nginx.conf @@ -9,7 +9,7 @@ upstream backend { # HTTP 服务器配置 server { listen 80; - server_name localhost; # 修改为您的域名 + server_name _; # 使用 IP 访问,_ 表示匹配所有域名和 IP # 客户端最大请求体大小 client_max_body_size 10M; diff --git a/nginx/nginx.conf.example b/nginx/nginx.conf.example index f1b7111..928a275 100644 --- a/nginx/nginx.conf.example +++ b/nginx/nginx.conf.example @@ -9,7 +9,7 @@ upstream backend { server { listen 80; - server_name your-domain.com; # 修改为您的域名或 IP + server_name _; # 使用 IP 访问,_ 表示匹配所有域名和 IP # 客户端最大请求体大小 client_max_body_size 10M;