~fvknk/bk

技術関連の備忘録

Docker を用いた Flutter の環境構築

Flutter Docker

概要

以下を読みながら、DockerでFlutterの環境構築を行いました。
結局使用はしなかったのですが、備忘として記録します。

https://docs.flutter.dev/get-started/install/linux

手順

1. パッケージをインストール

以下に記載されているライブラリのうち、初期のDockerイメージにインストールされていないものをインストールします。

https://docs.flutter.dev/get-started/install/linux#system-requirements

今回はDockerイメージとして、Ubuntu:22.04を使用するので、以下のようなDockerfileを作成しました。

FROM ubuntu:22.04

# 1. パッケージをインストール
RUN apt update -qq && apt install curl file git unzip xz-utils zip clang cmake git ninja-build pkg-config libgtk-3-dev liblzma-dev libstdc++-12-dev libsystemd0 -y -qq
version: '3'
services:
  app:
    build: ./app
    entrypoint: bash -c "flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0"
    ports:
      - 8080:8080
    volumes:
      - ./app:/app
    tty: true

2. SDKをインストール

以下のManual installationで記載の方法でSDKをDockerコンテナにインストールします。

https://docs.flutter.dev/get-started/install/linux#method-2-manual-installation

Dockerfileは以下のようになります。

FROM ubuntu:22.04

# 1. パッケージをインストール
RUN apt update -qq && apt install curl file git unzip xz-utils zip clang cmake git ninja-build pkg-config libgtk-3-dev liblzma-dev libstdc++-12-dev libsystemd0 -y -qq

# 2. SDKをインストール
## インストール先のディレクトリを準備
WORKDIR /usr/local/bin

## SDKをダウンロードして解凍
RUN curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.13.9-stable.tar.xz
RUN tar xf flutter_linux_3.13.9-stable.tar.xz

## パスを設定
ENV PATH=$PATH:/usr/local/bin/flutter/bin

## 実行ディレクトリを設定
WORKDIR /app

3. Dockerコンテナ上でアプリを作成

以下を参考に/appディレクトリ配下で以下のコマンドを実行します。 https://docs.flutter.dev/get-started/test-drive?tab=terminal

$ flutter create .

4. flutter runを実行

以下の「Run the app」を参考にflutter runコマンドを実行します。
https://docs.flutter.dev/get-started/test-drive?tab=terminal

ポートとホストは以下で明示的に指定する方法が紹介されていたので、同じように設定します。 https://note.com/danchi_kun/n/n5747fa9eb748

$ flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

上記をentrypointに設定します。

version: '3'
services:
  app:
    build: ./app
    entrypoint: bash -c "flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0"
    ports:
      - 8080:8080
    volumes:
      - ./app:/app
    tty: true

その後、docker compose upで実行し、ブラウザでhttp://localhost:8080にアクセスすると、以下の画面が表示されます。