配置自定义域名开发环境
- 修改hosts文件配置,添加测试域名映射 - 前端API地址改为 api.yourdomain.com:8080 - 后端服务绑定到 api.yourdomain.com:8080 - 前端开发服务器使用 test.yourdomain.com:5173 - 添加自动配置脚本和启动脚本 - 提供完整的域名配置指南和故障排除说明 - 支持更真实的开发环境模拟
This commit is contained in:
187
demo/DOMAIN_SETUP_COMPLETE.md
Normal file
187
demo/DOMAIN_SETUP_COMPLETE.md
Normal file
@@ -0,0 +1,187 @@
|
||||
# 域名配置完整指南
|
||||
|
||||
## 🎯 目标
|
||||
|
||||
将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请求自动代理到后端
|
||||
- ✅ 支持跨域请求
|
||||
- ✅ 模拟真实域名环境
|
||||
Reference in New Issue
Block a user