🤖

初心者がFlutterのDocker環境を作る

2024/01/09に公開

Flutter初心者ですが勉強のためにDocker環境を作ることにしたのでその時のメモです。
ローカルに入れてもよかったのですが、個人PCはWindows、会社PCはMacなのでなるべくDockerを使って環境ごとの細かい差分を気にせず扱いたかったのです。

Dockerfile

cmake, libgtk-3-devはflutterのインストールの際に必要といわれたので追加。
apt-get updateは一度で済ませたいのですが、google-chrome.listを取ってきてからgoogle-chrome-stableを取得する必要があるため2回に分けています。

Dockerfile

FROM ubuntu:20.04

# Setup timezone for cmake
RUN ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

# The package dependencies are written in pubspec.yaml
WORKDIR /app
COPY . .

RUN apt-get update && apt-get install -y git vim curl unzip wget cmake libgtk-3-dev x11-apps wget gnupg xz-utils clang ninja-build pkg-config

# Install Chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list && \
    apt-get update && \
    apt-get install -y google-chrome-stable && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*
ENV CHROME_EXECUTABLE /usr/bin/google-chrome-stable

# clone flutter
ENV FLUTTER_VERSION stable
ARG FLUTTER_SDK=/flutter
RUN git clone https://github.com/flutter/flutter.git $FLUTTER_SDK
RUN cd $FLUTTER_SDK && git fetch && git checkout $FLUTTER_VERSION
ENV PATH="${PATH}:$FLUTTER_SDK/bin:$FLUTTER_SDK/bin/cache/dart-sdk/bin"

# FIXME: androidのセットアップはまだ
RUN flutter channel $FLUTTER_VERSION && \
    flutter upgrade && \
    flutter config --enable-web && \
    flutter pub get && \
    flutter pub outdated

# Chromeはrootユーザーでの実行を推奨していないためユーザー作成
ARG USERNAME=flutteruser
RUN useradd -ms /bin/bash $USERNAME && \
    chown -R $USERNAME /flutter && \
    chown -R $USERNAME /app && \
    chown -R $USERNAME /var && \
    chmod -R 777 /app
USER $USERNAME

docker-compose.yml

Dockerfileだけでも起動できますが、後々他のコンテナを用意したくなる可能性があることや、起動コマンドをメモしておくのならdocker-compose.yml作った方が便利かなと思い作成しました。
Dockerではコンテナ内での localhost はコンテナ自体を指すことになってしまうため0.0.0.0を使用するよう起動時に--web-hostname 0.0.0.0を指定しました。

サンプルで作ったファイルにバグがあってコンパイルしなおすと落ちるので一旦--releaseをつけていますが、本来は開発環境ではこれはなくても良さそう。

docker-compose.yml

version: "3.8"
services:
  app:
    build:
      context: ./app/
    container_name: app
    command: "flutter run -d chrome --release --web-port 40095 --web-hostname 0.0.0.0"
    volumes:
      - ./app:/app
    ports:
      - 3000:40095
    tty: true
    stdin_open: true

chromeの部分をweb-serverに変えても良さそう。

ローカルからhttp://localhost:3000を開くとflutter画面が見られるようになりました。

android環境は追々やる。

何かの参考になれば幸いです。

Dockerfile

docker-compose.yml

参考

Discussion