# WebStorm Docker 开发环境设置指南

## 快速开始

### 1. 启动容器

```bash
# 进入项目目录
cd C:\Users\bwkj\WebstormProjects\loomart\apps\expo

# 启动 WebStorm 专用容器
docker-compose -f .devcontainer/docker-compose.webstorm.yml up -d
```

### 2. 在 WebStorm 中配置

#### 步骤 1: 配置 Docker 连接
1. 打开 WebStorm
2. `File` → `Settings` → `Build, Execution, Deployment` → `Docker`
3. 点击 `+` 添加新的 Docker 配置
4. 选择 `Docker for Windows`
5. 点击 `Test Connection` 确认连接成功

#### 步骤 2: 配置远程 Node.js 解释器
1. 在 Docker 设置中，找到运行的 `expo-eas-android-webstorm` 容器
2. 右键点击容器 → `Create...` → `Node.js Remote Interpreter`
3. 等待 IDE 配置完成

#### 步骤 3: 设置项目 SDK
1. `File` → `Settings` → `Languages & Frameworks` → `Node.js and NPM`
2. 选择刚创建的远程 Node.js 解释器
3. 点击 `Add...` 选择 `package.json` 作为项目配置

#### 步骤 4: 配置运行/调试
1. `Run` → `Edit Configurations...`
2. 点击 `+` → `Node.js`
3. 配置如下：
   - **Name**: `Expo Start`
   - **Node interpreter**: 选择容器中的解释器
   - **JavaScript file**: `node_modules/.bin/expo`
   - **Application parameters**: `start`
   - **Working directory**: `/workspace`

### 3. 开始开发

#### 启动开发服务器
1. 选择刚创建的 `Expo Start` 运行配置
2. 点击绿色运行按钮或按 `Shift+F10`
3. 等待 Metro bundler 启动

#### 本地构建 APK
```bash
# 在 WebStorm 终端中运行（确保使用容器终端）
eas build --platform android --profile preview --local
```

## 常见问题解决

### 问题 1: 无法连接到 Docker 容器
**解决方案:**
1. 确保 Docker Desktop 正在运行
2. 检查防火墙设置
3. 重启 Docker Desktop

### 问题 2: Node.js 解释器无法识别
**解决方案:**
1. 确保容器正在运行
2. 检查容器中 Node.js 是否正确安装
3. 重新创建远程解释器配置

### 问题 3: 文件同步延迟
**解决方案:**
1. 检查 Docker 挂载点配置
2. 确保项目文件权限正确
3. 尝试重启容器

### 问题 4: 端口冲突
**解决方案:**
1. 检查端口是否被其他程序占用
2. 修改 `docker-compose.webstorm.yml` 中的端口映射
3. 重启容器

## 高级配置

### 自定义环境变量
在 `docker-compose.webstorm.yml` 中添加自定义环境变量：

```yaml
environment:
  - MY_CUSTOM_VAR=value
  - ANOTHER_VAR=another_value
```

### 添加额外的端口映射
```yaml
ports:
  - "8081:8081"
  - "19000:19000"
  - "3000:3000"  # 添加自定义端口
```

### 挂载额外的目录
```yaml
volumes:
  - ..:/workspace:cached
  - D:/my-projects:/external-projects  # 添加外部目录
```

## 性能优化

### 1. 使用 Docker Desktop 的资源限制
- 分配足够的内存（建议 8GB+）
- 设置合理的 CPU 核心数

### 2. 优化文件同步
- 使用 `.dockerignore` 排除不必要的文件
- 考虑使用 Docker volumes 进行缓存

### 3. 网络优化
- 使用 bridge 网络模式
- 配置合适的 DNS 设置

## 调试技巧

### 1. 查看容器日志
```bash
docker-compose -f .devcontainer/docker-compose.webstorm.yml logs -f
```

### 2. 进入容器调试
```bash
docker exec -it expo-eas-android-webstorm bash
```

### 3. 检查容器状态
```bash
docker-compose -f .devcontainer/docker-compose.webstorm.yml ps
```

## 备份和恢复

### 备份配置
- 保存 `.devcontainer` 目录
- 导出 WebStorm 配置

### 恢复环境
1. 克隆项目
2. 运行 `docker-compose up -d`
3. 重新配置 WebStorm 连接