Flutter開発コンテナの構築（備忘録） #Docker

MacBook(Air, M1)でコンテナでのFlutter環境を構築した備忘録です。

プロジェクト作成〜Flutter Webのデモができる状態です
ここではXcodeによるiOS Simulator、Android Studioの導入は行なっていません

環境

MacBook Air, Apple M1
macOS: Sonoma 14.5
Docker Desktop: 4.22.0 (Engine 24.0.5, Compose v2.20.2)
image: Dart official image(Debian)

構築とサンプルのデモ

ここではコンテナ構築にはDocker Composeを使います。
以下のようなDockerfileとdocker-compose.ymlを作成します。

FROM dart:3.4-sdk

WORKDIR /workspace

RUN apt update && apt upgrade -y
RUN apt install -y clang cmake ninja-build pkg-config libgtk-3-dev
RUN dart pub global activate fvm

ARG FLUTTER_VERSION=3.22.2
ARG PATH=/root/.pub-cache/bin:$PATH
RUN fvm doctor
RUN fvm install ${FLUTTER_VERSION} && fvm use --force ${FLUTTER_VERSION}
RUN fvm flutter config --enable-web
#RUN fvm flutter config --enable-web --enable-linux-desktop --enable-macos-desktop --enable-windows-desktop \
#                       --enable-android --enable-ios --enable-fuchsia
RUN fvm global ${FLUTTER_VERSION}
RUN fvm flutter doctor

ENV FVM_ROOT=/root/.pub-cache
ENV PATH="${PATH}:/root/fvm/default/bin:${FVM_ROOT}/bin"
RUN echo 'export PATH="${PATH}:/root/fvm/default/bin:${FVM_ROOT}/bin"' > ~/.bash_profile

docker-compose.yml

services:
  flutterdevel:
    container_name: test
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./volume:/volume
    tty: true
    ports:
      - 18888:18888

簡単な解説

コンテナのベースイメージはDart imageとしました
flutterのバージョン管理ツールであるfvmを導入します
fvmによりflutterのバージョンを指定してインストールします
flutter configでは対応するOSを指定します(今回は--enable-webのみ)

コンテナの起動とサンプルデモ

イメージのビルドとコンテナの起動し、bashをキックしてコンテナを直接操作します。

$ docker-compose build
...
$ docker-compose up -d
...
$ docker-compose exec flutterdevel /bin/bash
# flutterdevelはdocker-compose.ymlで指定したservice名

コンテナ内で任意の場所にFlutterプロジェクトを作成します。

$ flutter create <project name>
$ cd <project name>

プロジェクトにはlib/main.dartにサンプルコードがあるので、これをビルドしてブラウザデモを行います。以下のコマンドでビルドが実行され、アプリケーションとしてウェブポートに送られます。（初回時のみWeb SDKがダウンロードされます）

$ flutter run -d web-server --web-hostname 0.0.0.0 --web-port 18888
Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         14.5s
lib/main.dart is being served at http://localhost:18888
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development
workflow.

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

ブラウザからhttp://localhost:18888にアクセスすると、アプリケーションの画面が見えます。

Flutter開発コンテナの構築（備忘録）

環境

構築とサンプルのデモ

コンテナの起動とサンプルデモ

参考