150 lines
3.5 KiB
Markdown
150 lines
3.5 KiB
Markdown
# 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 连接
|