Flutter dans Docker - Comment créer et utiliser un environnement de développement Flutter dans un conteneur Docker

1.Tout d'abord

Nous allons vous montrer comment créer un environnement de développement Flutter dans un conteneur Docker (Ubuntu 20.04 LTS cette fois) et créer un environnement similaire à celui développé sur un PC hôte à partir d'un PC hôte avec macOS ou Linux OS. En utilisant ce mécanisme, vous pouvez créer un environnement de développement à distance (serveur) et y accéder depuis votre PC local pour développer des applications Flutter.

Vue d'ensemble de Flutter dans Docker

(Supplément) Je n'ai pas essayé cette fois, mais en principe, la version Android (opération sur l'émulateur avec Aundroid Studio) devrait pouvoir fonctionner dans le conteneur Docker.

Avantages de l'utilisation du conteneur Docker (exemple)

• Facile à dupliquer / supprimer l'environnement de développement, et le même environnement peut être distribué à des tiers
• Pratique pour CI / CD si l'environnement est transformé en un conteneur Docker
• Le fonctionnement peut être confirmé dans des environnements autres qu'Android / iOS sans dépendre du système d'exploitation (Linux ou macOS)

Environnement cible (PC hôte)

• macOS
• Linux OS (Fondamentalement, toute distribution est OK tant qu'il s'agit d'un environnement Linux 64 bits exécutant Flutter, Docker)

2. Installation de Docker

J'omettrai la méthode d'installation de Docker lui-même, mais en gros, ce n'est pas grave si vous suivez la procédure sur le site officiel.

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

3. Créez une image de conteneur Docker

Cette section décrit la procédure de création d'une image de conteneur Docker. Le système d'exploitation (rootfs) dans le conteneur Docker est Ubuntu 20.04. Cette fois, je n'utiliserai pas le Dockerfile, mais je vais tout expliquer manuellement.

Obtention de l'image Ubuntu 20.04 (rootfs)

$ docker pull ubuntu:20.04

Démarrer le conteneur Docker

Démarrez le conteneur Docker avec la commande suivante et entrez dans le conteneur. En gros, sans sécurité (--privileged), vous pouvez accéder avec les mêmes privilèges que le système d'exploitation du PC hôte.

De plus, étant donné que les paramètres spécifiés ici sont également utilisés dans le fichier de paramètres Docker-compose décrit plus loin, veuillez d'abord exécuter ces paramètres.

$ 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

S'il n'y a pas de problème, l'invite passe à «#» et l'opération passe à l'opération à l'intérieur du conteneur Docker. Par exemple, si vous tapez la commande ʻuname`, vous constaterez que vous êtes sous Linux OS.

# 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 des outils nécessaires

Installez les packages requis pour le système d'exploitation Ubuntu dans le conteneur Docker. Lors de l'installation de xserver-xorg, il vous sera demandé des informations sur les paramètres régionaux et le clavier, mais c'est très bien (US si sûr).

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

Installation du navigateur Chrome (si nécessaire)

# 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

Référence: https://qiita.com/pyon_kiti_jp/items/e6032eb6061a4774aece

Installer le SDK Flutter

Git clonez le SDK Flutter et placez-le sous / opt.

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

Enregistrer l'image du conteneur

C'est la fin de tout le travail dans le conteneur. Il sortira donc du conteneur.

# exit

Enregistrez le conteneur créé en tant que fichier image Docker. Étant donné que les paramètres spécifiés ici sont également utilisés dans le fichier de paramètres Docker-compose décrit plus loin, veuillez d'abord exécuter ces paramètres.

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

4. Paramètres du PC hôte (uniquement pour macOS)

Étant donné que l'application GUI dans le conteneur Docker s'exécute sur le protocole X11, il est nécessaire de transférer l'écran de l'application GUI vers le serveur X11 côté PC hôte. Dans le cas de macOS, il existe XQuartz comme serveur X11 côté hôte, alors installez-le et utilisez-le.

Installez XQuartz

$ brew cask install xquartz

Redémarrez le PC hôte. Après le redémarrage, assurez-vous que la variable d'environnement DISPLAY est définie comme suit:

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

Autorisez l'accès depuis le client X11 du conteneur Docker.

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

Lancez XQuartz à partir de la ligne de commande ou du LaunchPad.

5. Paramètres du PC hôte (pour OS Linux uniquement)

Dans le cas du système d'exploitation Linux, je pense que c'est le X11 par défaut dans la plupart des cas, donc seules les mesures suivantes seront prises.

$ xhost + local:root

6. Construction de l'environnement VS Code

Installez VS Code et Extensions, etc. pour utiliser le conteneur Docker de VS Code.

Installation de VS Code

Veuillez installer en vous référant à ce qui suit.

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

Installation des extensions VSCode

Installez les trois extensions suivantes.

7. Création d'un fichier Docker Compose

Pour utiliser le SDK Flutter dans le conteneur Docker de VS Code, créez un Docker Compose et le fichier de configuration VS Code Extensions Remote Development que vous venez d'installer. Le fichier créé est placé sur https://github.com/Kurun-pan/flutter-docker, veuillez donc l'utiliser en fonction du système d'exploitation hôte (Linux ou macOS).

$ mkdir flutter_docker
$ cd flutter_docker

Créez deux fichiers dans le répertoire courant (flutter_docker): le fichier docker-compose.yml et le fichier .devcontainer / devcontainer.json.

Lorsque le système d'exploitation hôte est macOS

Le but était de définir host.docker.internal: 0 dans la variable d'environnement DISPLAY, mais cela ne fonctionnait pas, donc la partie {écrivez votre nom d'hôte !!} spécifie le nom d'hôte de macOS. S'il vous plaît. .. Si quelqu'un connaît la bonne manière, faites-le moi savoir.

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"
}

Lorsque le système d'exploitation hôte est Linux

Pour le système d'exploitation Linux, montez en liaison / dev / dri pour rendre DRM (DRI) disponible pour les applications Flutter dans des conteneurs Docker dans OpenGL.

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

Hérite de la variable d'environnement DISPLAY du système d'exploitation hôte.

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. Exécutez Flutter dans Docker

Lancement de VS Code

Lancez VSCode dans le répertoire où se trouve docker-compose.yml.

$ code .

Ouverture du conteneur distant VSCode

Cliquez sur la partie > < en bas à gauche de la fenêtre, ou ouvrez la palette de commandes avec shift + alt + p et sélectionnez Remote-containers: Open Folder in Container ....

Cliquez sur Ouvrir.

Un terminal s'ouvre en bas de la fenêtre VS Code. La cible de cette opération de terminal est l'image du conteneur Docker créée (flutter-docker / ubuntu: latest).

Création d'un projet pour l'exemple d'application Flutter

À partir de là, exécutez la commande suivante dans le terminal VS Code (conteneur Docker) pour exécuter l'exemple d'application Flutter.

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

Exécuter l'exemple d'application Flutter

Exemple d'application pour Linux Desktop

# flutter run -d linux

En plus d'exécuter des commandes, vous pouvez ouvrir le code source de fléchettes avec VSCode et exécuter des applications ou déboguer à l'aide de points d'arrêt avec des opérations GUI.

Exemple d'application pour le Web

Veuillez patienter quelques instants car il est pris en charge. ..

# flutter run -d chrome