# 域名配置完整指南 ## 🎯 目标 将AIGC Demo项目配置为使用自定义域名,实现更真实的开发环境。 ## 📋 配置步骤 ### 1. 修改hosts文件 #### 方法A:自动配置(推荐) ```powershell # 以管理员身份运行PowerShell .\update-hosts.ps1 ``` #### 方法B:手动配置 1. 以管理员身份打开记事本 2. 打开 `C:\Windows\System32\drivers\etc\hosts` 3. 在文件末尾添加: ``` # AIGC Demo 测试域名映射 127.0.0.1 test.yourdomain.com 127.0.0.1 api.yourdomain.com 127.0.0.1 local.yourdomain.com ``` ### 2. 验证配置 ```powershell # 测试域名解析 .\test-domains.ps1 ``` ### 3. 启动服务 #### 方法A:使用脚本启动(推荐) ```powershell # 启动所有服务 .\start-with-domains.ps1 ``` #### 方法B:手动启动 ```bash # 终端1:启动后端 mvn spring-boot:run # 终端2:启动前端 cd frontend npm run dev ``` ## 🌐 域名配置详情 ### 前端配置 - **域名**: `test.yourdomain.com` - **端口**: `5173` - **访问地址**: http://test.yourdomain.com:5173 ### 后端配置 - **域名**: `api.yourdomain.com` - **端口**: `8080` - **访问地址**: http://api.yourdomain.com:8080 ### API配置 - **API地址**: http://api.yourdomain.com:8080/api - **代理配置**: 前端自动代理API请求 ## 📁 修改的文件 ### 前端文件 - `frontend/src/api/request.js` - API基础URL - `frontend/vite.config.js` - 开发服务器配置 ### 后端文件 - `src/main/resources/application.properties` - 服务器绑定地址 ### 新增文件 - `update-hosts.ps1` - 自动配置hosts文件 - `start-with-domains.ps1` - 使用域名启动服务 - `start-with-domains.bat` - Windows批处理启动脚本 - `test-domains.ps1` - 域名配置测试脚本 - `HOSTS_SETUP.md` - 详细配置说明 ## 🔧 配置说明 ### 前端配置变更 ```javascript // 原配置 baseURL: 'http://localhost:8080/api' // 新配置 baseURL: 'http://api.yourdomain.com:8080/api' ``` ### 后端配置变更 ```properties # 新增配置 server.address=api.yourdomain.com server.port=8080 ``` ### 前端开发服务器配置 ```javascript // 原配置 server: { port: 3000, host: '0.0.0.0', proxy: { '/api': { target: 'http://localhost:8080', } } } // 新配置 server: { port: 5173, host: 'test.yourdomain.com', proxy: { '/api': { target: 'http://api.yourdomain.com:8080', } } } ``` ## 🚀 启动流程 ### 1. 配置hosts文件 ```powershell # 以管理员身份运行 .\update-hosts.ps1 ``` ### 2. 测试配置 ```powershell .\test-domains.ps1 ``` ### 3. 启动服务 ```powershell .\start-with-domains.ps1 ``` ### 4. 访问应用 - 前端: http://test.yourdomain.com:5173 - 后端: http://api.yourdomain.com:8080 ## 🔍 故障排除 ### 域名解析失败 ```powershell # 清除DNS缓存 ipconfig /flushdns # 重启浏览器 ``` ### 端口被占用 ```powershell # 查看端口占用 netstat -ano | findstr :8080 netstat -ano | findstr :5173 # 结束进程 taskkill /PID <进程ID> /F ``` ### 服务无法启动 1. 检查Java环境:`java -version` 2. 检查Node.js环境:`node -v` 3. 检查Maven环境:`mvn -version` ## 📝 注意事项 1. **管理员权限**:修改hosts文件需要管理员权限 2. **防火墙设置**:确保端口8080和5173未被防火墙阻止 3. **浏览器缓存**:首次使用新域名时建议清除浏览器缓存 4. **开发环境**:此配置仅用于开发环境,生产环境需要真实域名 ## 🎉 完成后的效果 - ✅ 前端使用 `test.yourdomain.com:5173` 访问 - ✅ 后端使用 `api.yourdomain.com:8080` 访问 - ✅ API请求自动代理到后端 - ✅ 支持跨域请求 - ✅ 模拟真实域名环境