🐳

M1 macOS x Docker で Flutter の開発環境を構築しよう

2021/06/28に公開約6,800字7件のコメント

はじめに

2021年4月15日、Apple Silicon に正式対応した Docker for Mac が一般公開されました。

これにより、Apple Silicon な macOS でも Docker による仮想環境の構築や共有をすることが可能になりました。

この記事では Docker for Mac を利用して M1 macOS 上に Docker Container を立て、Flutter の開発環境を構築することを目指します。

環境

  • Macbook Air (M1, 2020)
  • macOS: Monterey (12.4)
  • Docker for Mac: 4.10.1 (82475)
  • Visual Studio Code: 1.69.1
    • Remote - Containers: v0.241.3

Docker for Mac の導入

まず、Docker for Mac を macOS にインストールします。

ここでは、dmg ファイルからインストールする方法と Homebrew-cask を利用してインストールする方法を紹介します。

dmg ファイルからインストールする

  1. こちら から dmg ファイルを直接ダウンロードする
  2. dmg ファイルを開き、ドライバ内の Docker for Mac アプリを /Applications フォルダにコピーする

Homebrew-cask を利用してインストールする

Homebrew-cask を利用してインストールするには、

  1. (Homebrew を導入していない場合) Homebrew を導入
  2. Homebrew-cask プラグインを利用して Docker for Mac をインストール

の手順が必要となります。

Homebrew の導入

こちら を参考に、Homebrew をインストールします。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ export PATH=/opt/homebrew/bin:$PATH

Docker for Mac のインストール

先程インストールした Homebrew のプラグインである Homebrew-cask を利用して Docker for Mac をインストールします。

$ brew install --cask docker

これで Docker for Mac が /Applications にインストールされます。

仮想環境(Container)の設定ファイルを作成

次に、Container を構築するための環境を設定します。

Dockerfile の作成

まずは、Dockerfile を作成して環境構築の手順を指定します。

.devcontainer/flutter/Dockerfile
# 1: Base image
FROM dart:2.17-sdk

# Maintainer
LABEL maintainer="nagakuta <nagakuta0314+github@gmail.com>"

# Workdir
WORKDIR /workspace/board_game_direct

# 2: Install Flutter
ARG PATH=/root/.pub-cache/bin:$PATH
ARG FLUTTER_VERSION=3.0.1
RUN dart pub global activate melos --verbose && \
    dart pub global activate fvm --verbose && \
    fvm doctor --verbose && \
    fvm install $FLUTTER_VERSION --verbose && \
    fvm use --force $FLUTTER_VERSION --verbose && \
    fvm flutter config --enable-web --enable-linux-desktop --enable-macos-desktop --enable-windows-desktop --enable-android --enable-ios --enable-fuchsia && \
    # fvm flutter precache --verbose && \
    fvm flutter doctor --verbose

# Set paths
ENV FVM_ROOT=/root/.pub-cache
ENV PATH $FVM_ROOT/bin:$PATH

1: ベースとする Image

今回は dart:2.17-sdk をベースのイメージとして選択しました。

2: Flutter のインストール

今回は Flutter Version Manager (FVM) を利用して Flutter をインストールします。

Dart image が利用できない場合
.devcontainer/flutter/Dockerfile
# 1: Base image
FROM ubuntu:20.04

# Maintainer
LABEL maintainer="XXX <xxx@example.com>"

# Workdir
WORKDIR /workspace

# 2: Install Dart
ARG DART_VERSION=2.13.0
RUN mkdir -p /usr/share/man/man1 && \
    apt-get update && apt-get install -y --no-install-recommends tzdata && \
    apt-get update && \
    apt-get install -y --no-install-recommends bash ca-certificates clang cmake curl file git libglu1-mesa libgtk-3-dev ninja-build pkg-config unzip xz-utils zip && \
    curl https://storage.googleapis.com/dart-archive/channels/stable/release/$DART_VERSION/sdk/dartsdk-linux-x64-release.zip -o /tmp/dart-sdk.zip && \
    unzip /tmp/dart-sdk.zip -d /usr/lib && rm /tmp/dart-sdk.zip

# 3: Install Flutter
ARG PATH=/usr/lib/dart-sdk/bin:$PATH
ARG PATH=/root/.pub-cache/bin:$PATH
ARG FLUTTER_VERSION=2.2.0
RUN dart pub global activate fvm --verbose && \
    fvm doctor --verbose && \
    fvm install $FLUTTER_VERSION --verbose && \
    fvm use --force $FLUTTER_VERSION --verbose && \
    fvm flutter config --enable-web --enable-linux-desktop --enable-macos-desktop --enable-windows-desktop --enable-android --enable-ios --enable-fuchsia && \
    # fvm flutter precache --verbose && \
    fvm flutter doctor --verbose

# Clean up
RUN apt-get clean -y && \
    apt-get autoremove -y && \
    rm -rf /var/lib/apt/lists/*

# Set paths
ENV FVM_ROOT=/root/.pub-cache
ENV PATH $FVM_ROOT/bin:$PATH

1: ベースとする Image

今回は ubuntu:20.04 をベースのイメージとして選択しました。

2: Dart のインストール

Dart のインストール前に、apt-get を利用して Flutter をインストールするために必要なコマンドラインツールをインストールします。

その後、https://storage.googleapis.com/dart-archive/channels/be/raw/latest/sdk/dartsdk-<platform>-<architecture>-release.zip から Dart SDK をダウンロードし、解凍することでインストールします。

3: Flutter のインストール

今回は Flutter Version Manager (FVM) を利用して Flutter をインストールします。

docker-compose.yml の作成

次に、docker-compose.yml を作成して Container を build する際に利用するファイルや Volume を指定します。

.devcontainer/docker-compose.yml
version: '3.8'
services:
  <project_name>:
    # 1: 環境をビルドする際に利用する Dockerfile を指定
    build:
      context: .
      dockerfile: flutter/Dockerfile
    # 2: Container にマウントしたいファイルを指定
    volumes:
      # (Optional) VSCode settings
      - ../.vscode:/workspace/.vscode:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    # 3: 環境変数の定義ファイルを指定
    env_file:
      - flutter/.flutter.env

1: 環境をビルドする際に利用する Dockerfile を指定

docker compose build 時に、先程作成した .devcontainer/flutter/Dockerfile を参照するように指定します。

2: Container にマウントしたいファイルを指定

Container にマウントしたいローカルのファイルを指定します。

VSCode で開発を行う場合は、Workspace の設定を Remote Container 内で開いた VSCode にも適用するために、.vscode ファイルを /workspace 以下にマウントしています。

3: 環境変数の定義ファイルを指定

秘密鍵等は .devcontainer/flutter/.flutter.env に環境変数として定義し、docker compose build 時に Container 側へ展開するようにしました。

仮想環境(Container)の生成

先程作成した Dockerfiledocker-compose.yml をもとに Container を生成し、その中へ接続します。

ここでは、docker コマンドを使用する方法と、VSCode の Remote - Containers 拡張を使用する方法を紹介します。

docker コマンドを利用する場合

$ docker compose build
$ docker compose up -d
$ docker exec -it <container_id> /bin/bash

VSCode の Remote - Containers を利用する場合

  1. VSCode にて Remote - Containers をインストールする
  2. Remote - ContainersReopen in Container > From docker-compose.yml をクリック

これにて、Firebase Project の開発環境を Container 内に作成することができました。

Flutter のコマンドを利用して Container 内に Flutter Project を作成

Container 内へ接続することができたら、以下のコマンドを利用して Flutter Project を作成します。

$ fvm flutter create <project_name> --org <your_organization>

コマンドを使用すると、/workspace/<project_name> に Flutter Project が作成されます。

まとめ

この記事では、Apple Silicon な macOS 上に Docker Container を立て、Flutter Project の開発環境を構築する方法を紹介しました。

みなさんも、Docker Container による開発環境の構築や共有を行い、再利用性の高い開発環境を作りましょう!

GitHubで編集を提案

Discussion

認識違い・OSなど環境差異のせいなら申し訳ありませんが、
こちらスクラップを見た感じだと、
M1だとNGで、Intel CPUならOKの場合の構築手順に見えるのですがいかがでしょうか?
因みに手元のM1 Macbook Airでこの記事の手順を試してみましたが、
スクラップと同じで、flutterインストールスクリプト(dart pub global ...)で「/lib64/ld-linux-x86-64.so.2: No such file or directory」エラーが発生しました。

[環境]
M1 Macbook Air
OS: macOS Monterey 12.1
Docker Desktop: 4.3.2
Docker Engine: 20.10.11
Docker Compose: v2.2.1

@ki504178

こちらスクラップを見た感じだと、M1だとNGで、Intel CPUならOKの場合の構築手順に見えるのですがいかがでしょうか?

スクラップを書いた段階では M1 Mac (arm64) だと Dart の official docker image が対応しておらず、こちらの記事では「Dart SDK を zip でダウンロードして Container 内で解凍して利用する」という方法を採用しています。

因みに手元のM1 Macbook Airでこの記事の手順を試してみましたが、スクラップと同じで、flutterインストールスクリプト(dart pub global ...)で「/lib64/ld-linux-x86-64.so.2: No such file or directory」エラーが発生しました。

私も手元で @ki504178 さんとなるべく近い環境で記事の手順を再現してみましたが、上記のエラーは再現しませんでした。

この記事にて説明が不足している箇所がある可能性もあるので、こちらの記事の内容をアップデートして更新します。アップデートされた手順でも失敗する場合はまたご一報ください。

@nagakutaさん
ご回答ありがとうございました。

私も手元で @ki504178 さんとなるべく近い環境で記事の手順を再現してみましたが、上記のエラーは再現しませんでした。

なるほど。。。どこまで同じ環境なのかはちょっと分かりませんが、
あるとしたらOSのメジャーバージョン違いとかがありそうかと感じました。

この記事にて説明が不足している箇所がある可能性もあるので、こちらの記事の内容をアップデートして更新します。アップデートされた手順でも失敗する場合はまたご一報ください。

ありがとうございます!!
アップデート後の手順で再度試してみてご報告いたしますm(_ _)m

@ki504178

こちら、最新 ver で動作確認したものに記事を更新しました!

もしかしたらすでにご自身で解決なさっているかもしれませんが、ご参考になれば嬉しいです!

@nagakuta
ありがとうございます!!
最新の記事の通りに構築したらイケましたmm

環境

  • Macbook Air (M1, 2020)
  • macOS: Monterey (12.4)
  • Docker for Mac: 4.10.1 (82475)
  • Visual Studio Code: 1.68.1
    • Remote - Containers: v0.241.3

@nagakuta

記事拝見させていただきました。
Remote - Containers の Reopen in Container > From docker-compose.yml をクリックで開くディレクトリは.devcontainerでよろしいのでしょうか?

@ryoma

Remote - Containers の Reopen in Container > From docker-compose.yml をクリックで開くディレクトリは.devcontainerでよろしいのでしょうか?

はい、.devcontainer/docker-compose.yml を対象にして Open してください!

ログインするとコメントできます