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. スクリーンショット 2020-07-30 22.15.09.png

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.

image.png

Avantages de l'utilisation du conteneur Docker (exemple)

Environnement cible (PC hôte)

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.

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. スクリーンショット 2020-07-31 0.41.31.png

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.

Installation des extensions VSCode

Installez les trois extensions suivantes.

スクリーンショット 2020-07-30 23.44.14.png スクリーンショット 2020-07-30 20.25.05.png スクリーンショット 2020-07-30 20.25.30.png

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. スクリーンショット 2020-07-30 23.50.29.png

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 .... スクリーンショット 2020-07-31 0.26.14.png

Cliquez sur Ouvrir. スクリーンショット 2020-07-31 0.26.54.png

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). スクリーンショット 2020-07-31 0.29.10.png

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 .
スクリーンショット 2020-07-31 0.31.24.png

Exécuter l'exemple d'application Flutter

Exemple d'application pour Linux Desktop

# flutter run -d linux
スクリーンショット 2020-07-31 0.47.26.png

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. スクリーンショット 2020-07-31 1.22.16.png

Exemple d'application pour le Web

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

# flutter run -d chrome

Recommended Posts

Flutter dans Docker - Comment créer et utiliser un environnement de développement Flutter dans un conteneur Docker
[Django] Créez rapidement un environnement de développement de conteneur Django (Docker) à l'aide de VS Code + Remote Containers
Comment utiliser Docker pour conteneuriser votre application et comment utiliser Docker Compose pour exécuter votre application dans un environnement de développement
Comment exécuter une application Django sur un conteneur Docker (environnement de développement et de production)
Créer un environnement Docker qui peut utiliser PyTorch et JupyterLab
[Django] Créez rapidement un environnement de développement de conteneur Django (Docker) avec PyCharm
Utiliser WebDAV dans un environnement Docker portable
[DynamoDB] [Docker] Créer un environnement de développement pour DynamoDB et Django avec docker-compose
Comment rendre le nom du conteneur accessible dans Docker en tant que sous-domaine
Créer un environnement de développement de langage C avec un conteneur
[Python] Créer un environnement de développement Django avec Docker
Utilisez l'API Kaggle dans un conteneur Docker
Créez un environnement de développement de plugins Minecraft avec Eclipse
Créer un environnement de développement à l'aide de Jupyter et Flask avec Python dans Docker (prend en charge à la fois VS Code / code-server)
Créez un environnement PYNQ sur Ultra96 V2 et connectez-vous à Jupyter Notebook
Comment créer un environnement Django (python) sur Docker
Je souhaite créer facilement un environnement de développement basé sur un modèle
[Go + Gin] J'ai essayé de créer un environnement Docker
Comment créer un environnement de développement pour TensorFlow (1.0.0) (Mac)
Créez un conteneur Docker et enregistrez le png depuis altair
Créez un environnement de développement avec Poetry Django Docker Pycharm
Créer un environnement de développement d'API rapide léger à l'aide de Docker
Créez un environnement de développement Django avec Docker! (Docker-compose / Django / postgreSQL / nginx)
Avantages et inconvénients de la conversion de l'environnement de développement de Django en Docker
[Memo] Construire un environnement de développement pour Django + Nuxt.js avec Docker
Créer un environnement de développement Python avec Eclipse (ajouter un éditeur HTML)
Créer un environnement Python et transférer des données vers le serveur
Comment créer un environnement de développement de la série Python2.7 avec Vagrant
Créez un environnement de développement Flask à faible coût avec Docker
Mettez Jupyter et Docker Compose dans votre Chromebook et utilisez-le comme un environnement de développement léger!
Comment supprimer un conteneur Docker
Remarques sur la création d'un environnement LAMP à l'aide de Vagrant et VirtulBox
Créez et essayez un environnement OpenCV et Python en quelques minutes à l'aide de Docker
Je veux créer un fichier pip et le refléter dans le menu fixe
Apprenez à utiliser Docker en créant un environnement pour Django + MySQL
Apprentissage de l'historique pour participer au développement d'applications d'équipe avec Python ~ Créer un environnement Docker / Django / Nginx / MariaDB ~
J'ai créé un conteneur Docker pour utiliser JUMAN ++, KNP, python (pour pyKNP).
Après avoir acheté un nouveau Mac, utilisez pyenv + poetry pour créer un environnement Python.
Créez facilement un environnement de développement avec Laragon
Comment déboguer un programme Python en se connectant à distance à un conteneur Docker dans un environnement WSL2 avec VS Code
Méthode pour créer un environnement Python dans Xcode 6
Comment créer un environnement de traduction sphinx
Je voulais utiliser le notebook jupyter avec docker dans l'environnement pip (opticspy)
Je veux créer un environnement Python
Comment utiliser PyCharm avec des points de terminaison de développement Glue exécutés à l'intérieur de VPC
Créez un environnement CentOS Linux 8 avec Docker et démarrez Apache HTTP Server
Connectez-vous à postgreSQL depuis Python et utilisez des procédures stockées dans une boucle.
[Linux] Créer un environnement Jenkins avec Docker
Comment utiliser Tensorflow dans un environnement Docker
J'ai essayé de créer un environnement de développement Mac Python avec pythonz + direnv
Introduction à docker Création d'un environnement ubuntu dans ubuntu
Comment utiliser is et == en Python
Construisez Linux sur un environnement Windows. Étapes pour installer Laradock et migrer
[Linux] Construction de l'environnement Docker avec Amazon Linux 2
Construisez un environnement Python + bouteille + MySQL avec Docker sur RaspberryPi3! [Essai et erreur]
Utilisez libsixel pour générer Sixel en Python et générer le graphe Matplotlib vers le terminal.
Créez un environnement python pour apprendre la théorie et la mise en œuvre de l'apprentissage profond
Créer un environnement de développement TensorFlow sur Amazon EC2 avec une copie de commande