⚠️ Traduction non officielle - Cette documentation est une traduction communautaire non officielle de Docker.

Créer une extension simple

Table des matières

Pour commencer à créer votre extension, vous avez d'abord besoin d'un répertoire avec des fichiers qui vont du code source de l'extension aux fichiers spécifiques à l'extension requis. Cette page fournit des informations sur comment configurer une extension frontend minimale basée sur du HTML simple.

Avant de commencer, assurez-vous d'avoir installé la dernière version de Docker Desktop.

Astuce

Si vous voulez démarrer une base de code pour votre nouvelle extension, notre Guide de démarrage rapide et docker extension init <my-extension> fournissent une meilleure base pour votre extension.

Structure de dossier d'extension

Dans le dossier d'exemple minimal-frontend sample folder, vous pouvez trouver un exemple prêt à l'emploi qui représente une Extension UI construite sur HTML. Nous passerons en revue cet exemple de code dans ce tutoriel.

Bien que vous puissiez commencer depuis un répertoire vide, il est fortement recommandé de commencer depuis le modèle ci-dessous et de le changer en conséquence pour répondre à vos besoins.

.
├── Dockerfile # (1)
├── metadata.json # (2)
└── ui # (3)
    └── index.html
  1. Contient tout ce qui est requis pour construire l'extension et l'exécuter dans Docker Desktop.
  2. Un fichier qui fournit des informations sur l'extension comme le nom, la description et la version.
  3. Le dossier source qui contient tous vos fichiers HTML, CSS et JS. Il peut également y avoir d'autres ressources statiques comme des logos et des icônes. Pour plus d'informations et de directives sur la construction de l'UI, voir la section Conception et style UI.

Créer un Dockerfile

Au minimum, votre Dockerfile a besoin de :

  • Labels qui fournissent des informations supplémentaires sur l'extension, l'icône et les captures d'écran.
  • Le code source qui dans ce cas est un index.html qui se trouve dans le dossier ui.
  • Le fichier metadata.json.
# syntax=docker/dockerfile:1
FROM scratch

LABEL org.opencontainers.image.title="Frontend minimal" \
    org.opencontainers.image.description="Un exemple d'extension pour montrer comme c'est facile de commencer avec les Extensions Desktop." \
    org.opencontainers.image.vendor="Awesome Inc." \
    com.docker.desktop.extension.api.version="0.3.3" \
    com.docker.desktop.extension.icon="https://www.docker.com/wp-content/uploads/2022/03/Moby-logo.png"

COPY ui ./ui
COPY metadata.json .

Configurer le fichier de métadonnées

Un fichier metadata.json est requis à la racine du système de fichiers de l'image.

{
  "ui": {
    "dashboard-tab": {
      "title": "Frontend minimal",
      "root": "/ui",
      "src": "index.html"
    }
  }
}

Pour plus d'informations sur le metadata.json, voir Métadonnées.

Construire l'extension et l'installer

Maintenant que vous avez configuré l'extension, vous devez construire l'image d'extension que Docker Desktop utilisera pour l'installer.

$ docker build --tag=awesome-inc/my-extension:latest .

Cela a construit une image taguée awesome-inc/my-extension:latest, vous pouvez exécuter docker inspect awesome-inc/my-extension:latest pour voir plus de détails à son sujet.

Finalement, vous pouvez installer l'extension et la voir apparaître dans le tableau de bord Docker Desktop.

$ docker extension install awesome-inc/my-extension:latest

Prévisualiser l'extension

Pour prévisualiser l'extension dans Docker Desktop, fermez et ouvrez le tableau de bord Docker Desktop une fois l'installation terminée.

Le menu de gauche affiche un nouvel onglet avec le nom de votre extension.

Extension frontend minimale

Et ensuite ?