Docker上にflutter開発環境を構築する(Linux)

目的

以下のアプリをすべてコンテナ上に構築します。

• vscode
• flutter
• android studio
• google-chrome

メリット

• ホスト機が汚れない。(ホームディレクトリがいつまでもきれい)
• vscodeのPC間の移行が簡単になる。

デメリット

• フォルダ構成が深くなる。
• コンテナ分のオーバーヘッドでストレージを消費する

概要

流れ

Dockerfileが巨大になるのでイメージを分割して継承していきます。

1. ubuntuイメージ作成
2. vscodeイメージ作成
3. flutterイメージ作成

ベースとなるUbuntuイメージを構築する

Dockerfileを準備

host bash

cd WORKDIR
mkdir ubuntubase
cd ubuntubase
touch Dockerfile
vim Dockerfile

Dockerfile

FROM ubuntu:20.04

ENV DEBIAN_FRONTEND noninteractive
ENV LANG ja_JP.UTF-8

ARG UID=1000 # ホストのユーザーIDと一致させる
RUN sed -i.org -e 's|ports.ubuntu.com|jp.archive.ubuntu.com|g' /etc/apt/sources.list \
    && apt-get update && apt-get install -y \
    tzdata \
    locales \
    fonts-noto-cjk \
    pulseaudio \
    fcitx-mozc \
    dbus-x11 \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* \
    && ln -s -f /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
    && dpkg-reconfigure tzdata \
    && locale-gen ja_JP.UTF-8 \
    && useradd -m -s /bin/bash -u ${UID} user

イメージをビルド

host bash

docker build -t ubuntubase .

ベースとなるvscodeイメージを構築する

Dockerfileを準備

host bash

cd ..
mkdir vscode
cd vscode
touch Dockerfile
vim Dockerfile

Dockerfile

FROM ubuntubase:latest

ENV DEBIAN_FRONTEND noninteractive
ENV LANG ja_JP.UTF-8

RUN apt update && apt install -y \
    curl \
    gpg \
    apt-transport-https \
    ca-certificates \
    lsb-release \
    git \
    zip \
    unzip \
    wget \
    && sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg \
    && install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/ \
    && echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list \
    && apt update && apt install -y \
    code \
    google-chrome-stable \
    && apt-get clean \
    && rm microsoft.gpg \
    && rm -rf /var/lib/apt/lists/*

イメージをビルド

host bash

docker build -t vscode .

flutterイメージを構築する

Dockerfileを準備

host bash

cd ..
mkdir flutter
cd flutter
touch Dockerfile
vim Dockerfile

Dockerfile

FROM vscode:latest

ENV DEBIAN_FRONTEND noninteractive

ARG studio_version=2020.3.1.25 # Android Studioのバージョンを指定
ARG flutter_version=2.5.3 # Flutterのバージョンを指定
RUN apt update && apt install -y \
    libglu1-mesa \
    clang \
    cmake \
    ninja-build \
    pkg-config \
    libgtk-3-dev \
    && curl -LO https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_${flutter_version}-stable.tar.xz \
    && tar xf ./flutter_linux_${flutter_version}-stable.tar.xz \
    && curl -LO https://redirector.gvt1.com/edgedl/android/studio/ide-zips/${studio_version}/android-studio-${studio_version}-linux.tar.gz \
    && tar xf ./android-studio-${studio_version}-linux.tar.gz \
    && mv flutter /opt/ \
    && chown -R user /opt/flutter \
    && mv android-studio /opt/ \
    && ln -s /opt/android-studio/bin/studio.sh /usr/local/bin/android_studio \
    && usermod -a -G plugdev user
ENV PATH /opt/flutter/bin:$PATH
ENV CHROME_EXECUTABLE /usr/bin/google-chrome

イメージをビルド

host bash

docker build -t flutter .

起動

host bash

docker run \
  --net=bridge \
  --shm-size=4096m \
  --rm \
  -t \
  -e DISPLAY \
  -v /tmp/.X11-unix/X0:/tmp/.X11-unix/X0 \
  -e PULSE_COOKIE=/tmp/pulse/cookie \
  -e PULSE_SERVER=unix:/tmp/pulse/native \
  -v /run/user/1000/pulse/native:/tmp/pulse/native \
  -v ~/.config/pulse/cookie:/tmp/pulse/cookie:ro \
  -e XMODIFIERS \ 
  -e GTK_IM_MODULE \
  -e QT_IM_MODULE \
  -e DefaultIMModule=fcitx \
  -e DBUS_SESSION_BUS_ADDRESS=unix:path=/run/user/1000/bus \
  -v /run/user/1000/bus:/run/user/1000/bus \
  --privileged \
  -v ~/flutter_container:/home/user \
  -v /dev/bus/usb:/dev/bus/usb \
  -u `id -u` \
  flutter code --verbose

あとは起動したvscodeでextensionからflutterをインストールし、vscodeのterminalからandroid_studioを起動、SDK、AVDの設定をして、flutter doctorを実行したりライセンスに同意したりすればflutterが使えるようになります。

実機でのテストについて

若干安定しないですが、Android実機を接続しての開発もできました。
上述の設定のうち下記が該当します。

Dockerfile

...
    && usermod -a -G plugdev user
...

host bash

...
    --privileged \
...
  -v /dev/bus/usb:/dev/bus/usb \
...

Arch Linuxでの確認なので、環境によって違うかもしれません。