[LINUX] Flutter in Docker - Erstellen und Verwenden einer Flutter-Entwicklungsumgebung in einem Docker-Container

1. Zuallererst

Wir zeigen Ihnen, wie Sie eine Flutter-Entwicklungsumgebung in einem Docker-Container erstellen (diesmal Ubuntu 20.04 LTS) und eine ähnliche Umgebung erstellen wie auf einem Host-PC von einem Host-PC mit MacOS- oder Linux-Betriebssystem. Mit diesem Mechanismus können Sie eine Entwicklungsumgebung (Server) remote erstellen und von Ihrem lokalen PC aus darauf zugreifen, um Flutter-Apps zu entwickeln.

Flattern in der Docker-Übersicht

(Ergänzung) Ich habe es diesmal nicht versucht, aber im Prinzip sollte die Android-Version (Betrieb des Emulators mit Aundroid Studio) im Docker-Container ausgeführt werden können.

Vorteile der Verwendung des Docker-Containers (Beispiel)

• Einfache Vervielfältigung / Löschung der Entwicklungsumgebung, und dieselbe Umgebung kann an Dritte verteilt werden
• Praktisch für CI / CD, wenn die Umgebung in einen Docker-Container umgewandelt wird
• Der Betrieb kann in anderen Umgebungen als Android / iOS ohne Abhängigkeit vom Betriebssystem (Linux oder MacOS) bestätigt werden.

Zielumgebung (Host-PC)

• macOS
• Linux-Betriebssystem (Grundsätzlich ist jede Distribution in Ordnung, solange es sich um eine 64-Bit-Linux-Umgebung handelt, in der Flutter, Docker ausgeführt wird.)

2. Docker-Installation

Ich werde die Installationsmethode von Docker selbst weglassen, aber im Grunde ist es in Ordnung, wenn Sie das Verfahren auf der offiziellen Website befolgen.

• macOS: Install Docker Desktop on Mac
• Linux (Ubuntu): Install Docker Engine on Ubuntu

3. Erstellen Sie ein Docker-Container-Image

In diesem Abschnitt wird das Verfahren zum Erstellen eines Docker-Container-Images beschrieben. Das Betriebssystem (rootfs) im Docker-Container ist Ubuntu 20.04. Dieses Mal werde ich die Docker-Datei nicht verwenden, sondern alles manuell erklären.

Erhalten des Ubuntu 20.04-Images (rootfs)

$ docker pull ubuntu:20.04

Starten Sie den Docker-Container

Starten Sie den Docker-Container mit dem folgenden Befehl und geben Sie den Container ein. Grundsätzlich können Sie ohne Sicherheit (--privileged) mit denselben Berechtigungen wie das Betriebssystem des Host-PCs zugreifen.

Da die hier angegebenen Parameter auch in der später beschriebenen Docker-Compose-Einstellungsdatei verwendet werden, führen Sie diese zuerst mit diesen Einstellungen aus.

$ docker run -it --name flutter-docker ¥
     --privileged -h flutter -u root -w /root ¥
     --add-host=flutter:127.0.1.1 --net=host ubuntu:20.04

Wenn es kein Problem gibt, ändert sich die Eingabeaufforderung in "#" und die Operation wird auf die Operation im Docker-Container umgeschaltet. Wenn Sie beispielsweise den Befehl "uname" eingeben, werden Sie feststellen, dass Sie sich unter Linux befinden.

# root@flutter:~# uname -a
Linux flutter 4.19.76-linuxkit #1 SMP Tue May 26 11:42:35 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

Installation der notwendigen Werkzeuge

Installieren Sie die erforderlichen Pakete für das Ubuntu-Betriebssystem im Docker-Container. Bei der Installation von "xserver-xorg" werden Sie nach Informationen zum Gebietsschema und zur Tastatur gefragt, aber das ist in Ordnung (USA, wenn sicher).

# apt update
# apt install git unzip clang xserver-xorg pkg-config libgtk-3-dev curl cmake ninja-build

Installation des Chrome-Browsers (falls erforderlich)

# apt install wget gnupg
# sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
# wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
# apt update
# apt-get install google-chrome-stable

Referenz: https://qiita.com/pyon_kiti_jp/items/e6032eb6061a4774aece

Installieren Sie das Flutter SDK

Git klonen Sie das Flutter SDK und platzieren Sie es unter / opt.

# https://github.com/flutter/flutter.git
# mv flutter /opt/

Containerbild speichern

Dies ist das Ende aller Arbeiten im Container. So wird es aus dem Behälter kommen.

# exit

Speichern Sie den erstellten Container als Docker-Image-Datei. Da die hier angegebenen Parameter auch in der später beschriebenen Docker-Compose-Einstellungsdatei verwendet werden, führen Sie diese zuerst mit diesen Einstellungen aus.

$ docker commit flutter-docker flutter-docker/ubuntu:latest

4. Host-PC-Einstellungen (nur für macOS)

Da die GUI-Anwendung im Docker-Container auf dem X11-Protokoll ausgeführt wird, muss der Bildschirm der GUI-Anwendung auf den X11-Server auf der Host-PC-Seite übertragen werden. Im Fall von macOS gibt es XQuartz als X11-Server auf der Host-Seite. Installieren und verwenden Sie ihn daher.

Installieren Sie XQuartz

$ brew cask install xquartz

Starten Sie den Host-PC neu. Stellen Sie nach dem Neustart sicher, dass die Umgebungsvariable "DISPLAY" wie folgt festgelegt ist:

$ echo $DISPLAY
/private/tmp/com.apple.launchd.NagCeWDLYl/org.macosforge.xquartz:0

Ermöglichen Sie den Zugriff vom X11-Client auf den Docker-Container.

$ xhost +$(hostname)
$ xhost + local:root

Starten Sie "XQuartz" über die Befehlszeile oder das LaunchPad.

5. Host-PC-Einstellungen (nur für Linux)

Im Fall von Linux OS denke ich, dass dies in den meisten Fällen der X11-Standard ist, sodass nur die folgenden Maßnahmen ergriffen werden.

$ xhost + local:root

6. Aufbau der VS-Code-Umgebung

Installieren Sie VS Code und Erweiterungen usw., um den Docker-Container von VS Code zu verwenden.

VS Code Installation

Bitte installieren Sie unter Bezugnahme auf das Folgende.

• Linux (Ubuntu): https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8
• macOS: https://qiita.com/watamura/items/51c70fbb848e5f956fd6

Installation von VSCode Extensions

Installieren Sie die folgenden drei Erweiterungen.

7. Erstellen einer Docker Compose-Datei

Um das Flutter SDK im Docker-Container von VS Code zu verwenden, erstellen Sie eine Docker Compose- und die soeben installierte VS Code Extensions-Konfigurationsdatei "Remote Development". Die erstellte Datei befindet sich unter https://github.com/Kurun-pan/flutter-docker. Verwenden Sie sie daher entsprechend dem Host-Betriebssystem (Linux oder macOS).

$ mkdir flutter_docker
$ cd flutter_docker

Erstellen Sie zwei Dateien im aktuellen Verzeichnis (flutter_docker): die Datei "docker-compose.yml" und die Datei ".devcontainer / devcontainer.json".

Wenn das Host-Betriebssystem macOS ist

Der Punkt war, "host.docker.internal: 0" in der Umgebungsvariablen "DISPLAY" zu setzen, aber es hat nicht funktioniert, daher gibt der Teil "{schreibe deinen Hostnamen !!}" den Hostnamen von macOS an. Bitte. .. Wenn jemand den richtigen Weg kennt, lass es mich wissen.

https://github.com/Kurun-pan/flutter-docker/tree/master/macos

docker-compose.yml

version: "3"
services:
    flutter:
        image: flutter-docker/ubuntu:latest
        working_dir: /root/workspace
        command: sleep infinity
        environment:
            - HOME=/root
            - no_proxy=127.0.0.1,localhost
            #- DISPLAY="host.docker.internal:0"
            - DISPLAY={write your host name!!}:0
        volumes:
            - ~/.gitconfig:/home/root/.gitconfig
            - ./:/root/workspace
            - ~/.Xauthority:/root/.Xauthority
        network_mode: "host"
        extra_hosts:
            - flutter:127.0.1.1

json:.devcontainer/devcontainer.json

{
    "name": "Flutter docker",
    "dockerComposeFile": [
        "../docker-compose.yml",
    ],
    "service": "flutter",
    "remoteUser": "root",
    "remoteEnv": {
        "QT_X11_NO_MITSHM": "1",
        "PATH": "/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/opt/flutter/bin",
    },
    "settings": {
        "terminal.integrated.shell.linux": null
    },
    "runArgs": [
        "--privileged",
        "-P",
    ],
    "extensions": ["dart-code.flutter"],
    "workspaceMount": "source=${localWorkspaceFolder}/workspace,target=/root/workspace,type=bind,consistency=delegated",
    "workspaceFolder": "/root/workspace"
}

Wenn das Host-Betriebssystem Linux ist

Binden Sie unter Linux / dev / dri ein, um DRM (DRI) für Flutter-Apps in Docker-Containern in OpenGL verfügbar zu machen.

https://github.com/Kurun-pan/flutter-docker/tree/master/linux

docker-compose.yml

version: "3"
services:
    flutter:
        image: flutter-docker/ubuntu:latest
        working_dir: /root/workspace
        command: sleep infinity
        environment:
            - HOME=/root
            - no_proxy=127.0.0.1,localhost
        volumes:
            - ~/.gitconfig:/home/root/.gitconfig
            - ./:/root/workspace
            - /tmp/.X11-unix:/tmp/.X11-unix
        devices:
            - /dev/dri:/dev/dri
        network_mode: "host"
        extra_hosts:
            - flutter:127.0.1.1

Erben Sie die Umgebungsvariable "DISPLAY" des Host-Betriebssystems.

json:.devcontainer/devcontainer.json

{
    "name": "Flutter docker",
    "dockerComposeFile": [
        "../docker-compose.yml",
    ],
    "service": "flutter",
    "remoteUser": "root",
    "remoteEnv": {
        "QT_X11_NO_MITSHM": "1",
        "DISPLAY": "${localEnv:DISPLAY}",
        "XAUTHORITY": "/tmp/.X11-unix",
        "PATH": "/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/opt/flutter/bin",
    },
    "settings": {
        "terminal.integrated.shell.linux": null
    },
    "runArgs": [
        "--privileged",
        "-P",
    ],
    "extensions": ["dart-code.flutter"],
    "workspaceMount": "source=${localWorkspaceFolder}/workspace,target=/root/workspace,type=bind,consistency=delegated",
    "workspaceFolder": "/root/workspace"
}

8. Führen Sie Flutter in Docker aus

Start des VS-Codes

Starten Sie VSCode in dem Verzeichnis, in dem "docker-compose.yml" vorhanden ist.

$ code .

VSCode Remote Container öffnen

Klicken Sie auf den Teil > < unten links im Fenster oder öffnen Sie die Befehlspalette mit Shift + Alt + P und wählen Sie Remote-Container: Ordner in Container öffnen ....

Klicken Sie auf Öffnen.

Am unteren Rand des VS-Code-Fensters wird ein Terminal geöffnet. Das Ziel dieser Terminaloperation ist das erstellte Docker-Container-Image (Flutter-Docker / Ubuntu: Neueste).

Erstellen eines Projekts für die Flutter-Beispiel-App

Führen Sie von hier aus den folgenden Befehl im VS-Code-Terminal (Docker-Container) aus, um die Flutter-Beispiel-App auszuführen.

# flutter config --enable-linux-desktop
# flutter config --enable-web
# mkdir sample
# cd sample
# flutter create .

Führen Sie die Flutter-Beispiel-App aus

Beispiel-App für Linux Desktop

# flutter run -d linux

Zusätzlich zur Ausführung von Befehlen können Sie den Dart-Quellcode mit VSCode öffnen und Apps ausführen oder mithilfe von Haltepunkten mit GUI-Operationen debuggen.

Beispiel-App für das Web

Bitte warten Sie eine Weile, da dies unterstützt wird. ..

# flutter run -d chrome