🐳

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

6 min read

はじめに

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

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

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

この記事は、先日作成した こちら のスクラップを記事として清書したものになります。

目次

- Docker for Mac の導入
- 仮想環境(Container)の設定ファイルを作成
- 仮想環境(Container)の生成

環境

  • Macbook Air (M1, 2020)
  • macOS: Big Sur (11.4)
  • Docker for Mac: 3.5.1
  • Visual Studio Code: 1.57.1
    • Remote - Containers: v0.183.0

Docker for Mac の導入

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

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

2021/05/23 現在、Docker for Mac を利用するためには Rosetta2 をインストールする必要があります。
事前に softwareupdate --install-rosetta コマンドを使用し、Rosetta2 を macOS 内にインストールしておいてください。

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 ubuntu:20.04

# Maintainer
LABEL maintainer="nagakuta <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 コマンドは Docker for Mac をインストールしただけでは macOS にインストールされていないので、以下のコマンドを使用する前にアプリを起動して 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 による開発環境の構築や共有を行い、再利用性の高い開発環境を作りましょう!