配置自定义域名开发环境
- 修改hosts文件配置，添加测试域名映射 - 前端API地址改为 api.yourdomain.com:8080 - 后端服务绑定到 api.yourdomain.com:8080 - 前端开发服务器使用 test.yourdomain.com:5173 - 添加自动配置脚本和启动脚本 - 提供完整的域名配置指南和故障排除说明 - 支持更真实的开发环境模拟
This commit is contained in:
AIGC Developer
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请求自动代理到后端
|
||||
- ✅ 支持跨域请求
|
||||
- ✅ 模拟真实域名环境
|
||||
91
demo/HOSTS_SETUP.md
Normal file
91
demo/HOSTS_SETUP.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# Hosts文件配置指南
|
||||
|
||||
## 手动配置步骤
|
||||
|
||||
### 1. 以管理员身份打开记事本
|
||||
1. 按 `Win + R` 打开运行对话框
|
||||
2. 输入 `notepad` 并按 `Ctrl + Shift + Enter`（以管理员身份运行）
|
||||
3. 点击"是"确认
|
||||
|
||||
### 2. 打开hosts文件
|
||||
1. 在记事本中，点击"文件" -> "打开"
|
||||
2. 导航到 `C:\Windows\System32\drivers\etc\`
|
||||
3. 将文件类型改为"所有文件"
|
||||
4. 选择 `hosts` 文件并打开
|
||||
|
||||
### 3. 添加域名映射
|
||||
在hosts文件末尾添加以下内容：
|
||||
|
||||
```
|
||||
# AIGC Demo 测试域名映射
|
||||
127.0.0.1 test.yourdomain.com
|
||||
127.0.0.1 api.yourdomain.com
|
||||
127.0.0.1 local.yourdomain.com
|
||||
```
|
||||
|
||||
### 4. 保存文件
|
||||
1. 按 `Ctrl + S` 保存
|
||||
2. 关闭记事本
|
||||
|
||||
## 自动配置（推荐）
|
||||
|
||||
### 使用PowerShell脚本
|
||||
1. 右键点击 `update-hosts.ps1`
|
||||
2. 选择"使用PowerShell运行"
|
||||
3. 如果提示执行策略，运行：
|
||||
```powershell
|
||||
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
|
||||
```
|
||||
|
||||
## 验证配置
|
||||
|
||||
### 测试域名解析
|
||||
```cmd
|
||||
ping test.yourdomain.com
|
||||
ping api.yourdomain.com
|
||||
```
|
||||
|
||||
应该显示 `127.0.0.1` 的响应。
|
||||
|
||||
## 配置完成后
|
||||
|
||||
### 前端配置
|
||||
修改前端代码中的API地址：
|
||||
```javascript
|
||||
// 在 src/api/request.js 中
|
||||
const API_BASE_URL = 'http://api.yourdomain.com:8080/api';
|
||||
```
|
||||
|
||||
### 后端配置
|
||||
修改后端服务绑定地址：
|
||||
```java
|
||||
// 在 application.properties 中
|
||||
server.address=api.yourdomain.com
|
||||
server.port=8080
|
||||
```
|
||||
|
||||
## 域名说明
|
||||
|
||||
- `test.yourdomain.com` - 前端测试域名
|
||||
- `api.yourdomain.com` - 后端API域名
|
||||
- `local.yourdomain.com` - 本地开发域名
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 如果域名不生效
|
||||
1. 清除DNS缓存：
|
||||
```cmd
|
||||
ipconfig /flushdns
|
||||
```
|
||||
|
||||
2. 重启浏览器
|
||||
|
||||
3. 检查hosts文件格式：
|
||||
- 确保没有多余的空格
|
||||
- 确保使用Tab或空格分隔IP和域名
|
||||
- 确保没有#注释掉映射
|
||||
|
||||
### 如果无法保存hosts文件
|
||||
1. 确保以管理员身份运行记事本
|
||||
2. 检查文件是否被其他程序占用
|
||||
3. 尝试复制到桌面修改后再覆盖原文件
|
||||
@@ -4,7 +4,7 @@ import router from '@/router'
|
||||
|
||||
// 创建axios实例
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080/api',
|
||||
baseURL: 'http://api.yourdomain.com:8080/api',
|
||||
timeout: 10000,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
|
||||
@@ -10,15 +10,15 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
host: 'test.yourdomain.com',
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
target: 'http://api.yourdomain.com:8080',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
// 确保后端返回的 Set-Cookie 可被前端域接收与发送
|
||||
cookieDomainRewrite: 'localhost',
|
||||
cookieDomainRewrite: 'test.yourdomain.com',
|
||||
cookiePathRewrite: '/',
|
||||
configure: (proxy, _options) => {
|
||||
proxy.on('error', (err, _req, _res) => {
|
||||
|
||||
@@ -2,3 +2,7 @@ spring.application.name=demo
|
||||
spring.messages.basename=messages
|
||||
spring.thymeleaf.cache=false
|
||||
spring.profiles.active=dev
|
||||
|
||||
# 服务器配置
|
||||
server.address=api.yourdomain.com
|
||||
server.port=8080
|
||||
|
||||
43
demo/start-with-domains.bat
Normal file
43
demo/start-with-domains.bat
Normal file
@@ -0,0 +1,43 @@
|
||||
@echo off
|
||||
echo ========================================
|
||||
echo AIGC Demo - 使用域名启动服务
|
||||
echo ========================================
|
||||
echo.
|
||||
|
||||
echo 检查hosts文件配置...
|
||||
ping test.yourdomain.com -n 1 >nul 2>&1
|
||||
if %errorlevel% neq 0 (
|
||||
echo [错误] 域名解析失败，请先配置hosts文件
|
||||
echo 请运行: update-hosts.ps1 或手动编辑hosts文件
|
||||
echo.
|
||||
echo 需要添加以下映射到 C:\Windows\System32\drivers\etc\hosts:
|
||||
echo 127.0.0.1 test.yourdomain.com
|
||||
echo 127.0.0.1 api.yourdomain.com
|
||||
echo 127.0.0.1 local.yourdomain.com
|
||||
pause
|
||||
exit /b 1
|
||||
)
|
||||
|
||||
echo [成功] 域名解析正常
|
||||
echo.
|
||||
|
||||
echo 启动后端服务 (api.yourdomain.com:8080)...
|
||||
start "后端服务" cmd /k "cd /d %~dp0 && mvn spring-boot:run"
|
||||
|
||||
echo 等待后端服务启动...
|
||||
timeout /t 10 /nobreak >nul
|
||||
|
||||
echo 启动前端服务 (test.yourdomain.com:5173)...
|
||||
start "前端服务" cmd /k "cd /d %~dp0\frontend && npm run dev"
|
||||
|
||||
echo.
|
||||
echo ========================================
|
||||
echo 服务启动完成！
|
||||
echo ========================================
|
||||
echo 前端地址: http://test.yourdomain.com:5173
|
||||
echo 后端地址: http://api.yourdomain.com:8080
|
||||
echo API地址: http://api.yourdomain.com:8080/api
|
||||
echo ========================================
|
||||
echo.
|
||||
echo 按任意键退出...
|
||||
pause >nul
|
||||
52
demo/start-with-domains.ps1
Normal file
52
demo/start-with-domains.ps1
Normal file
@@ -0,0 +1,52 @@
|
||||
# AIGC Demo - 使用域名启动服务
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host "AIGC Demo - 使用域名启动服务" -ForegroundColor Cyan
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host ""
|
||||
|
||||
# 检查域名解析
|
||||
Write-Host "检查hosts文件配置..." -ForegroundColor Yellow
|
||||
try {
|
||||
$pingResult = Test-NetConnection -ComputerName "test.yourdomain.com" -Port 80 -InformationLevel Quiet
|
||||
if (-not $pingResult) {
|
||||
Write-Host "[错误] 域名解析失败，请先配置hosts文件" -ForegroundColor Red
|
||||
Write-Host "请运行: .\update-hosts.ps1 或手动编辑hosts文件" -ForegroundColor Yellow
|
||||
Write-Host ""
|
||||
Write-Host "需要添加以下映射到 C:\Windows\System32\drivers\etc\hosts:" -ForegroundColor Yellow
|
||||
Write-Host "127.0.0.1 test.yourdomain.com" -ForegroundColor White
|
||||
Write-Host "127.0.0.1 api.yourdomain.com" -ForegroundColor White
|
||||
Write-Host "127.0.0.1 local.yourdomain.com" -ForegroundColor White
|
||||
Read-Host "按回车键退出"
|
||||
exit 1
|
||||
}
|
||||
} catch {
|
||||
Write-Host "[错误] 无法检查域名解析" -ForegroundColor Red
|
||||
Read-Host "按回车键退出"
|
||||
exit 1
|
||||
}
|
||||
|
||||
Write-Host "[成功] 域名解析正常" -ForegroundColor Green
|
||||
Write-Host ""
|
||||
|
||||
# 启动后端服务
|
||||
Write-Host "启动后端服务 (api.yourdomain.com:8080)..." -ForegroundColor Yellow
|
||||
Start-Process -FilePath "cmd" -ArgumentList "/k", "cd /d $PWD && mvn spring-boot:run" -WindowStyle Normal
|
||||
|
||||
Write-Host "等待后端服务启动..." -ForegroundColor Yellow
|
||||
Start-Sleep -Seconds 10
|
||||
|
||||
# 启动前端服务
|
||||
Write-Host "启动前端服务 (test.yourdomain.com:5173)..." -ForegroundColor Yellow
|
||||
Start-Process -FilePath "cmd" -ArgumentList "/k", "cd /d $PWD\frontend && npm run dev" -WindowStyle Normal
|
||||
|
||||
Write-Host ""
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host "服务启动完成！" -ForegroundColor Green
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host "前端地址: http://test.yourdomain.com:5173" -ForegroundColor Cyan
|
||||
Write-Host "后端地址: http://api.yourdomain.com:8080" -ForegroundColor Cyan
|
||||
Write-Host "API地址: http://api.yourdomain.com:8080/api" -ForegroundColor Cyan
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host ""
|
||||
|
||||
Read-Host "按回车键退出"
|
||||
60
demo/test-domains.ps1
Normal file
60
demo/test-domains.ps1
Normal file
@@ -0,0 +1,60 @@
|
||||
# 测试域名配置
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host "AIGC Demo - 域名配置测试" -ForegroundColor Cyan
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host ""
|
||||
|
||||
# 测试域名解析
|
||||
$domains = @("test.yourdomain.com", "api.yourdomain.com", "local.yourdomain.com")
|
||||
|
||||
foreach ($domain in $domains) {
|
||||
Write-Host "测试域名: $domain" -ForegroundColor Yellow
|
||||
try {
|
||||
$result = Resolve-DnsName -Name $domain -ErrorAction Stop
|
||||
$ip = $result[0].IPAddress
|
||||
if ($ip -eq "127.0.0.1") {
|
||||
Write-Host " ✓ 解析成功: $domain -> $ip" -ForegroundColor Green
|
||||
} else {
|
||||
Write-Host " ✗ 解析错误: $domain -> $ip (期望: 127.0.0.1)" -ForegroundColor Red
|
||||
}
|
||||
} catch {
|
||||
Write-Host " ✗ 解析失败: $domain" -ForegroundColor Red
|
||||
}
|
||||
}
|
||||
|
||||
Write-Host ""
|
||||
|
||||
# 测试端口连通性
|
||||
Write-Host "测试服务端口..." -ForegroundColor Yellow
|
||||
|
||||
# 测试后端端口
|
||||
try {
|
||||
$backendTest = Test-NetConnection -ComputerName "api.yourdomain.com" -Port 8080 -InformationLevel Quiet
|
||||
if ($backendTest) {
|
||||
Write-Host " ✓ 后端服务: api.yourdomain.com:8080 可访问" -ForegroundColor Green
|
||||
} else {
|
||||
Write-Host " ✗ 后端服务: api.yourdomain.com:8080 不可访问" -ForegroundColor Red
|
||||
}
|
||||
} catch {
|
||||
Write-Host " ✗ 后端服务: api.yourdomain.com:8080 测试失败" -ForegroundColor Red
|
||||
}
|
||||
|
||||
# 测试前端端口
|
||||
try {
|
||||
$frontendTest = Test-NetConnection -ComputerName "test.yourdomain.com" -Port 5173 -InformationLevel Quiet
|
||||
if ($frontendTest) {
|
||||
Write-Host " ✓ 前端服务: test.yourdomain.com:5173 可访问" -ForegroundColor Green
|
||||
} else {
|
||||
Write-Host " ✗ 前端服务: test.yourdomain.com:5173 不可访问" -ForegroundColor Red
|
||||
}
|
||||
} catch {
|
||||
Write-Host " ✗ 前端服务: test.yourdomain.com:5173 测试失败" -ForegroundColor Red
|
||||
}
|
||||
|
||||
Write-Host ""
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host "测试完成" -ForegroundColor Green
|
||||
Write-Host "========================================" -ForegroundColor Cyan
|
||||
Write-Host ""
|
||||
|
||||
Read-Host "按回车键退出"
|
||||
41
demo/update-hosts.ps1
Normal file
41
demo/update-hosts.ps1
Normal file
@@ -0,0 +1,41 @@
|
||||
# 更新hosts文件脚本
|
||||
# 需要管理员权限运行
|
||||
|
||||
# 检查是否以管理员身份运行
|
||||
if (-NOT ([Security.Principal.WindowsPrincipal] [Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole([Security.Principal.WindowsBuiltInRole] "Administrator")) {
|
||||
Write-Host "请以管理员身份运行此脚本" -ForegroundColor Red
|
||||
Write-Host "右键点击PowerShell，选择'以管理员身份运行'" -ForegroundColor Yellow
|
||||
pause
|
||||
exit
|
||||
}
|
||||
|
||||
$hostsFile = "C:\Windows\System32\drivers\etc\hosts"
|
||||
$domainMappings = @"
|
||||
# AIGC Demo 测试域名映射
|
||||
127.0.0.1 test.yourdomain.com
|
||||
127.0.0.1 api.yourdomain.com
|
||||
127.0.0.1 local.yourdomain.com
|
||||
"@
|
||||
|
||||
Write-Host "正在更新hosts文件..." -ForegroundColor Green
|
||||
|
||||
# 检查是否已经存在映射
|
||||
$existingContent = Get-Content $hostsFile -Raw
|
||||
if ($existingContent -match "test\.yourdomain\.com") {
|
||||
Write-Host "域名映射已存在，跳过添加" -ForegroundColor Yellow
|
||||
} else {
|
||||
# 添加域名映射
|
||||
Add-Content -Path $hostsFile -Value $domainMappings
|
||||
Write-Host "域名映射添加成功！" -ForegroundColor Green
|
||||
}
|
||||
|
||||
Write-Host "`n添加的域名映射：" -ForegroundColor Cyan
|
||||
Write-Host "127.0.0.1 test.yourdomain.com" -ForegroundColor White
|
||||
Write-Host "127.0.0.1 api.yourdomain.com" -ForegroundColor White
|
||||
Write-Host "127.0.0.1 local.yourdomain.com" -ForegroundColor White
|
||||
|
||||
Write-Host "`n现在可以使用以下域名访问服务：" -ForegroundColor Green
|
||||
Write-Host "前端: http://test.yourdomain.com:5173" -ForegroundColor Cyan
|
||||
Write-Host "后端: http://api.yourdomain.com:8080" -ForegroundColor Cyan
|
||||
|
||||
pause
|
||||
Reference in New Issue
Block a user