nexcer/flutter-web

Flutter Master通道Web支持镜像文档

一、镜像概述和主要用途

本镜像是基于Flutter master通道构建的Docker镜像，已预先启用Web平台支持。旨在为Flutter开发者提供一个开箱即用的一致环境，专注于Flutter Web应用的开发、构建、测试及部署流程。镜像集成了完整的Flutter SDK及依赖工具链，可直接用于Web平台相关的开发任务，无需手动配置Web支持或解决环境依赖问题。

二、核心功能和特性

2.1 核心功能

• 基于Flutter master通道：包含最新Flutter特性及修复，适合尝鲜新功能
• 预启用Web支持：默认开启flutter_web配置，无需执行flutter config --enable-web
• 完整工具链集成：内置Flutter SDK、Dart SDK及相关工具（flutter、dart、pub命令）
• 多平台构建支持：除Web外，同时支持Android、iOS等平台构建（需额外配置对应依赖）

2.2 关键特性

• 环境一致性：统一开发环境，避免"本地能跑，线上报错"的环境依赖问题
• 轻量级基础：基于Debian Slim或Alpine Linux构建，平衡体积与兼容性
• 缓存优化：内置Flutter依赖缓存机制，加速项目构建
• 即开即用：拉取镜像后可直接执行flutter命令，无需额外初始化步骤

三、使用场景和适用范围

3.1 典型使用场景

• Flutter Web应用的本地开发与调试
• CI/CD流水线中集成Web应用构建步骤（如生成静态Web资源）
• 多平台Flutter项目的统一开发环境管理
• 快速搭建临时开发/演示环境（如教学、技术分享）

3.2 适用范围

• 个人开发者：简化Web开发环境配置流程
• 企业开发团队：标准化团队开发环境，降低协作成本
• CI/CD系统：集成到Jenkins、GitHub Actions等平台，自动化Web构建流程
• 教学场景：快速为学员部署一致的Flutter Web开发环境

四、详细使用方法和配置说明

4.1 获取镜像

通过Docker Hub或私有仓库拉取镜像（请替换<image-name>为实际镜像名称）：

bash
docker pull <image-name>:latest

4.2 基本使用

4.2.1 启动交互式开发环境

通过以下命令启动容器并进入交互式终端，用于直接执行Flutter命令：

bash
docker run -it --rm <image-name> /bin/bash

进入容器后，可验证环境配置：

bash
# 检查Flutter版本及通道
flutter --version

# 验证Web支持是否启用
flutter devices  # 输出应包含"Chrome"或"Web Server"设备

4.2.2 本地项目开发与构建

挂载本地Flutter项目目录至容器，执行Web构建：

bash
# 假设本地项目路径为./my_flutter_app
docker run -it --rm \
  -v $(pwd)/my_flutter_app:/app \
  -w /app \
  <image-name> \
  flutter build web --release

构建产物将生成在宿主机./my_flutter_app/build/web目录下。

4.3 环境变量配置

4.4 数据卷挂载

为避免重复下载依赖和持久化项目数据，建议挂载以下目录：

五、Docker部署方案示例

5.1 基础交互式开发环境（docker run）

bash
docker run -it --rm \
  --name flutter-web-dev \
  -v $(pwd)/my_flutter_app:/app \
  -v ~/.flutter-pub-cache:/root/.pub-cache \
  -e HTTP_PROXY=http://proxy.example.com:8080 \
  <image-name> \
  /bin/bash

5.2 一键构建Flutter Web应用（docker run）

bash
docker run --rm \
  -v $(pwd)/my_flutter_app:/app \
  -v ~/.flutter-pub-cache:/root/.pub-cache \
  -w /app \
  <image-name> \
  sh -c "flutter pub get && flutter build web --release --no-tree-shake-icons"

5.3 docker-compose配置示例

创建docker-compose.yml：

yaml
version: '3.8'

services:
  flutter-web-builder:
    image: <image-name>
    volumes:
      - ./my_flutter_app:/app:rw
      - ~/.flutter-pub-cache:/root/.pub-cache:rw
      - ~/.flutter-sdk-cache:/root/.flutter:rw
    environment:
      - HTTP_PROXY=http://proxy.example.com:8080
      - HTTPS_PROXY=http://proxy.example.com:8080
    working_dir: /app
    command: ["flutter", "build", "web", "--release"]

执行构建：

bash
docker-compose up

六、注意事项

• 镜像基于master通道，可能包含不稳定特性，生产环境建议评估后使用
• Web构建产物需通过Web服务器（如Nginx）部署，本镜像不包含Web服务器组件
• 如需构建Android/iOS应用，需额外挂载对应SDK目录（如/root/Android/Sdk）并配置环境变量
• 首次运行flutter pub get或flutter build可能因依赖下载较慢，建议配置代理或预挂载缓存目录