Zenn
🐳

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

2021/06/28に公開
7件
Docker
Flutter
tech

はじめに

2021年4月15日、Apple Silicon に正式対応した Docker for Mac が一般公開され、Apple Silicon な macOS でも Docker による仮想環境の構築や共有をすることが可能になりました。

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

環境 (2022/07/18 時点)

  • 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 をインストール

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

1. Homebrew の導入

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

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

2. Docker for Mac のインストール

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

$ brew install --cask docker

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

仮想環境（Container）の設定ファイルを作成

次に、Docker での仮想環境となる Container を構築するための環境を設定します。

Dockerfile の作成

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

.devcontainer/flutter/Dockerfile
# (1): Base image
FROM dart:latest

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

# Workdir
WORKDIR /workspace/xxx

# (2): Install Flutter
ARG PATH=/root/.pub-cache/bin:$PATH
ARG FLUTTER_VERSION=x.y.z
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
ARG FVM_ROOT=/root/.pub-cache
ENV PATH $FVM_ROOT/bin:$PATH

(1): ベースとする Docker Image

今回は最新版の Dart を利用するように指定していますが、環境の必要に応じて dart:3.0-sdk のように、Dart のバージョンを指定することも可能です。

(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=x.y.z
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=x.y.z
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
ARG 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:
      - ../${YOUR_PROJECT_DIRECTORY}:/workspace/${YOUR_PROJECT_DIRECTORY}:cached
      # (Optional) VSCode settings
      - ../.vscode:/workspace/.vscode:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    # (3): 環境変数の定義ファイルを指定
    env_file:
      - flutter/.flutter.env

(1): 仮想環境（Container）をビルドする際に利用する Dockerfile を指定

仮想環境である Container のビルドを行う際に、先ほど作成した .devcontainer/flutter/Dockerfile を参照するように指定します。

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

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

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

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

.devcontainer/flutter/.flutter.env に環境変数を定義し、Container で参照できるようにします。

仮想環境（Container）の生成

先ほど作成した Dockerfile と docker-compose.yml をもとに Container をビルドし、その中へ接続します。

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

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

docker コマンドを利用する場合は、以下のコマンドでビルドと仮想環境への接続を行います。

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

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

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

これにて、Flutter の開発環境を 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

ki504178ki504178

認識違い・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

nagakutanagakuta

@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 さんとなるべく近い環境で記事の手順を再現してみましたが、上記のエラーは再現しませんでした。

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

ki504178ki504178

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

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

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

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

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

nagakutanagakuta

@ki504178

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

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

ki504178ki504178

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

環境

  • 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
ryomaryoma

@nagakuta

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

nagakutanagakuta

@ryoma

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

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