YAMAGATA STUDIO
ブログ一覧に戻る
github codespacesでflutterアプリ(Android)を作成する際の環境

github codespacesでflutterアプリ(Android)を作成する際の環境

2025年06月04日
codespacesflutter

codespacesの環境ファイル

📦 .devcontainer
├─ devcontainer.json
└─ Dockerfile

.devcontainer/devcontainer.json

{
  "name": "Flutter (Web + Android + FlutterFire)",

  // ── ビルド設定 ───────────────────────────────────────────
  "build": {
    "dockerfile": "Dockerfile",
    "args": { "VARIANT": "ubuntu-22.04" }
  },

  // ── devcontainer Features ────────────────────────────────
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/common-utils:2": {}
  },

  // ── VS Code の拡張&設定 ─────────────────────────────────
  "customizations": {
    "vscode": {
      "extensions": [
        "Dart-Code.dart-code",
        "Dart-Code.flutter",
        "ms-azuretools.vscode-docker"
      ],
      "settings": {
        "dart.flutterSdkPath": "/home/vscode/flutter",
        "dart.lineLength": 120
      }
    }
  },

  // ── Flutter Web ポート公開 ────────────────────────────────
  "forwardPorts": [3000],
  "portsAttributes": {
    "3000": { "label": "Flutter Web", "onAutoForward": "openPreview" }
  },

  // ── 初回起動時にライセンス再確認+動作チェック ─────────────
  "postCreateCommand": "bash -lc 'yes | sdkmanager --licenses && flutter doctor -v && flutterfire --version && firebase --version'",

  "remoteUser": "vscode"
}

.devcontainer/Dockerfile

################################################################
# ベース: 公式 Dev Container (Ubuntu 22.04)
################################################################
ARG VARIANT="ubuntu-22.04"
FROM mcr.microsoft.com/devcontainers/base:${VARIANT}

################################################################
# 0. 必要パッケージ (root)
################################################################
RUN apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -y \
        curl git unzip xz-utils zip libglu1-mesa \
        clang cmake ninja-build pkg-config libgtk-3-dev liblzma-dev libstdc++-12-dev \
        openjdk-17-jdk \
    && apt-get clean && rm -rf /var/lib/apt/lists/*

################################################################
# 0-B. Node.js (LTS) + Firebase CLI  ←★ 追加
################################################################
#   - NodeSource の公式スクリプトで Node.js 20.x (LTS) を導入
#   - npm で Firebase CLI をグローバルインストール
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash -      \
 && apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -y nodejs \
 && npm install -g firebase-tools                                   \
 && npm cache clean --force                                         \
 && firebase --version        # レイヤー作成時に動作確認

################################################################
# 1. 環境変数
################################################################
ENV FLUTTER_HOME=/home/vscode/flutter
ENV ANDROID_SDK_ROOT=/opt/android-sdk
ENV PUB_CACHE=/home/vscode/.pub-cache
ENV PATH=${FLUTTER_HOME}/bin:${ANDROID_SDK_ROOT}/platform-tools:${ANDROID_SDK_ROOT}/cmdline-tools/latest/bin:${PUB_CACHE}/bin:$PATH

################################################################
# 2. Android SDK (command-line tools) ─ root
################################################################
ARG ANDROID_SDK_REV=11076708    # 必要に応じて最新版に変更

RUN mkdir -p ${ANDROID_SDK_ROOT}/cmdline-tools  \
 && curl -sSL -o /tmp/cmdline-tools.zip \
      https://dl.google.com/android/repository/commandlinetools-linux-${ANDROID_SDK_REV}_latest.zip \
 && unzip -q /tmp/cmdline-tools.zip -d ${ANDROID_SDK_ROOT}/cmdline-tools \
 && mv ${ANDROID_SDK_ROOT}/cmdline-tools/cmdline-tools \
       ${ANDROID_SDK_ROOT}/cmdline-tools/latest \
 && rm /tmp/cmdline-tools.zip \
 && yes | ${ANDROID_SDK_ROOT}/cmdline-tools/latest/bin/sdkmanager --licenses \
 && ${ANDROID_SDK_ROOT}/cmdline-tools/latest/bin/sdkmanager \
        "platform-tools" \
        "platforms;android-34" \
        "build-tools;34.0.0"

# vscode ユーザーが書込できるよう権限を調整
RUN chown -R vscode:vscode ${ANDROID_SDK_ROOT}

################################################################
# 3. vscode ユーザーで Flutter を取得
################################################################
USER vscode

RUN git clone --depth 1 --branch stable https://github.com/flutter/flutter.git ${FLUTTER_HOME} \
 && ${FLUTTER_HOME}/bin/flutter precache --web --android \
 && ${FLUTTER_HOME}/bin/flutter doctor -v

################################################################
# 4. FlutterFire CLI
################################################################
RUN ${FLUTTER_HOME}/bin/flutter pub global activate flutterfire_cli \
 && flutterfire --version