最初の Docker 拡張機能を構築する

Docker では、他の開発者の作業を楽にするツールの構築に情熱を注いでいます。 コンテナの構築と実行に関しては、Docker Desktopは開発者にとって頼りになる製品です。 Docker Desktop 4.8.0 では、独自の機能を Docker Desktop に追加して、何百万人もの人々の生活に影響を与えることができます。

このブログ投稿では、Docker Desktop 内で単純な拡張機能を開発、インストール、プレビューする手順について説明します。 このチュートリアルを終了すると、クリックすると拡張機能バックエンドに HTTP 要求を行い、Docker Desktop に応答を表示するボタンなど、基本的なユーザー インターフェイスを備えた拡張機能が作成されます。

任意のテキストエディタで拡張機能を開発し、JavaScriptに翻訳できるフロントエンドに任意の言語を使用できます(JavaScript自体を含む! ユーザーに最高のエクスペリエンスを提供するには、フロントエンドにTypeScriptとReact/マテリアルUIを使用することをお勧めします。 拡張機能のバックエンド サービス (RESTful API など) を作成する場合は、選択した言語 (Go、Python、dotnet など) でビルドできます。 バックエンドはコンテナ内で実行されるため、言語とフレームワークを完全に自由に選択できます。

開発者になるなんて素晴らしい時です! 最初の拡張機能の構築を始めましょう!

前提 条件

このチュートリアルを完了するには、次のものが必要です。

• Docker Desktop の最新バージョン。

拡張ファイルを作成する

Docker 拡張機能の使用を開始する最も簡単な方法は、 init Docker Extensions CLI のコマンド:

Docker Extension init my-extension

ビルドする拡張機能に関するいくつかの質問が表示されます。 これらの質問は、CLI がディレクトリに my-extension 一連の定型ファイルを生成するのに役立ちます。

拡張ディレクトリ構造

ザ 初期化 コマンドは、指定されたディレクトリに、Docker拡張機能を定義するために必要なすべてのファイルを入力します。

• ザ UI ディレクトリには、バックエンド サービスに HTTP 要求を行い、応答を表示する React アプリが含まれています。
• ザ ティッカー ディレクトリには、ソケットをリッスンして公開する Go バックエンド サービス (HTTP サーバー) が含まれています。 /こんにちは JSON ペイロードを返すエンドポイント。
• のような他のいくつかのファイル メタデータ.json拡張機能に関する情報が含まれています。

拡張機能をビルドしてインストールする

ザ 初期化 コマンドは、 メイクファイル 拡張ディレクトリのルートにあります。 これにより、複数のプラットフォーム用の拡張機能をビルドし、ローカルにインストールして、Docker Hub にプッシュすることが容易になります。

Docker 拡張機能は Docker イメージであるため、最初の手順は拡張機能イメージをビルドすることです。

多段階 Dockerfile バックエンドサービスを構築する最初のステージ、Reactアプリ用の2番目のステージ、バックエンドバイナリとReactアセットをコピーする最終ステージの3つのステージで構成されるように提供されています。 最後に、 ティッカー 命令は、ソケットを使用してReactアプリからのリクエストをリッスンし、バックエンドサービスを開始します。

あなたが使用することができます docker build または事前定義された make build-extension コマンドを使用して拡張機能をビルドします。

前のコマンドでは、コマンドに指定した Docker Hub リポジトリにちなんで名付けられた init Docker イメージが生成されます。 このガイドでは、 john/my-extension. この練習の目的のために、同じ入力を自由に使用してください。 そのリポジトリにプッシュすることはできませんが、すべてのローカル開発手順は引き続き機能します。

拡張機能を Docker デスクトップにインストールするには、次のコマンドを実行します。

ドッカー拡張機能インストールジョン/マイエクステンション

次の出力が表示されます。

Installing new extension "john/my-extension:latest"
Installing service in Desktop VM...
Setting additional compose attributes
VM service started
Installing Desktop extension UI for tab "My-Extension"...
Extension UI tab "My-Extension" added.
Extension "my-extension" installed successfully

Docker デスクトップを開くと、左側のメニューに次の名前の新しいタブが表示されます マイエクステンション.それをクリックして拡張機能に移動し、Reactアプリを表示します。 をクリックすると コールバックエンド ボタンをクリックすると、 {"メッセージ":"こんにちは"}表示。

拡張機能がインストールされていることを確認するには、次の CLI コマンドを使用します。

ドッカーエクステンションLS

アウトプット：

ID                  PROVIDER            VERSION             UI                    VM                  HOST
john/my-extension   John                latest              1 tab(My-Extension)   Running(1)          -

拡張コードを変更する

拡張機能コードを変更して変更を確認するには、イメージを再構築してから拡張機能を更新する必要があります。 これらのコマンドへのショートカットがいくつか提供されているため、次のことを心配する必要はありません。

make build-extension
make update-extension

舞台裏では、これらのコマンドは次のように実行しています。

docker build -t john/my-extension
docker extension update john/my-extension

拡張機能は、コードを変更して Docker Desktop に再インストールされ、もう一度テストできます。

ホット リロードを有効にする

拡張機能のフロントエンド側を開発している場合は、変更のたびにイメージを再構築する必要はなく、組み込みのホット リロードを使用できます。 この例では、http://localhost:3000 でフロントエンドを公開する単純な create-react-app プロジェクトでReactを使用しています 。

cd ui
npm start
docker extension dev ui-source john/my-extension http://localhost:3000

Docker Desktopダッシュボードを閉じて再度開き、拡張機能に移動すると、フロントエンドコードに対するすべての変更が、コードの変更を保存するとすぐに表示されます。

拡張機能の更新とテストが完了したら、次のコマンドを実行して ui-source のオーバーライドを削除できます。

ドッカー拡張機能開発リセットジョン/マイエクステンション

Chrome デベロッパー ツールを開く

拡張機能タブをクリックしたときに拡張機能のChrome開発ツールを開くには、次のコマンドを実行します。

Docker 拡張機能開発デバッグ john/my-extension

その後、拡張機能タブをクリックするたびに、Chrome開発ツールも開きます。 この動作を停止するには、次のコマンドを実行します。

ドッカー拡張機能開発リセットジョン/マイエクステンション

バックエンド サービス コードを変更する

バックエンド サービスに変更を加える必要がある場合は、拡張機能を再度ビルドする必要もあります。

make build-extension
make update-extension

この例では、拡張機能にコンテナーとして実行されるバックエンド サービスがあるため、コマンドはバックエンド コンテナーを削除し、 update 新しいコンテナーを開始します。

拡張機能のスタイル設定

Docker Desktop の UI は React と Material-UI で書かれています。 拡張機能でもこの組み合わせを採用することを強くお勧めします。 これにより、 Docker Material UI テーマを使用して Docker Desktop のルック & フィールを簡単に複製できるという利点があります。

設計ガイドラインをご覧ください。

マーケットプレースで拡張機能をプレビューする

未発行の拡張機能をビルドしてインストールすると、[Marketplace のインストール済み ] タブでプレビューできます。 これにより、ユーザーが拡張機能をインストールする前に、拡張機能の説明、スクリーンショット、リンクが拡張機能の詳細ページにどのように表示されるかを確認できます。
あなたはそのすべての情報を提供することができます s で LABEL Dockerfile:

LABEL org.opencontainers.image.title="my-extension" \
   org.opencontainers.image.description="My first extension" \
   org.opencontainers.image.vendor="John" \
   com.docker.desktop.extension.api.version=">= 0.2.3" \
   com.docker.extension.screenshots="[{\"alt\": \"docker build\", \"url\": \"https://www.docker.com/wp-content/uploads/2021/09/Docker-build.png\"}]" \
   com.docker.extension.detailed-description="My detailed description 🐳" \
   com.docker.extension.publisher-url="" \
   com.docker.extension.additional-urls="[{\"title\":\"Documentation\",\"url\":\"https:\/\/foo.bar\/docs\"},{\"title\":\"Support\",\"url\":\"https:\/\/foo.bar\/support\"}}]]"

次は何ですか?

Docker拡張機能を試したことがない場合は、拡張機能マーケットプレイスを調べて、それらのいくつかをインストールすることを強くお勧めします。 Docker Extensions の開発は、Windows、WSL2、Mac Intel および Apple Silicon、Linux のすべてのプラットフォームで開始できます。

拡張機能 SDK の詳細については、 公式ドキュメントを参照してください。 チュートリアル、設計ガイドライン、および Docker 拡張機能を構築するために必要なすべてのものが見つかります。

拡張機能を拡張機能マーケットプレースに提出しますか? こちらをクリックしてください。

フィードバックを送信しますか? ここをクリック

関連記事

• https://www.docker.com/blog/docker-extensions-preview/