expo-popcore-old/.devcontainer/webstorm-setup.md

WebStorm Docker 开发环境设置指南

快速开始

1. 启动容器

# 进入项目目录
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

# 在 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 中添加自定义环境变量：

environment:
  - MY_CUSTOM_VAR=value
  - ANOTHER_VAR=another_value

添加额外的端口映射

ports:
  - "8081:8081"
  - "19000:19000"
  - "3000:3000"  # 添加自定义端口

挂载额外的目录

volumes:
  - ..:/workspace:cached
  - D:/my-projects:/external-projects  # 添加外部目录

性能优化

1. 使用 Docker Desktop 的资源限制

• 分配足够的内存（建议 8GB+）
• 设置合理的 CPU 核心数

2. 优化文件同步

• 使用 .dockerignore 排除不必要的文件
• 考虑使用 Docker volumes 进行缓存

3. 网络优化

• 使用 bridge 网络模式
• 配置合适的 DNS 设置

调试技巧

1. 查看容器日志

docker-compose -f .devcontainer/docker-compose.webstorm.yml logs -f

2. 进入容器调试

docker exec -it expo-eas-android-webstorm bash

3. 检查容器状态

docker-compose -f .devcontainer/docker-compose.webstorm.yml ps

备份和恢复

备份配置

• 保存 .devcontainer 目录
• 导出 WebStorm 配置

恢复环境

1. 克隆项目
2. 运行 docker-compose up -d
3. 重新配置 WebStorm 连接