將後端新增至您的擴充功能

目錄

您的擴充功能可以搭載一個後端部分，前端可以與之互動。此頁面提供有關為何以及如何新增後端的資訊。

在開始之前，請確保您已安裝最新版本的 Docker Desktop。

提示

查看快速入門指南 和 docker extension init <my-extension>。它們為您的擴充功能提供了更好的基礎，因為它更新穎且與您安裝的 Docker Desktop 相關。

為何要新增後端？

由於 Docker 擴充功能 SDK，大多數情況下，您應該能夠直接從 前端 執行您需要從 Docker CLI 執行的操作。

儘管如此，在某些情況下，您可能需要將後端新增至您的擴充功能。到目前為止，擴充功能建置者已使用後端來

  • 將資料儲存在本機資料庫中，並使用 REST API 將其提供回來。
  • 儲存擴充功能狀態，例如當按鈕啟動長時間執行的程序時，以便如果您導航離開擴充功能使用者介面並返回時，前端可以從上次停止的地方繼續。

有關擴充功能後端的更多資訊，請參閱 架構。

將後端新增至擴充功能

如果您使用 docker extension init 命令建立擴充功能，則您已經設定了後端。否則，您必須先建立一個包含程式碼的 vm 目錄，並更新 Dockerfile 以將其容器化。

這是具有後端的擴充功能資料夾結構

.
├── Dockerfile # (1)
├── Makefile
├── metadata.json
├── ui
    └── index.html
└── vm # (2)
    ├── go.mod
    └── main.go
  1. 包含建置後端並將其複製到擴充功能的容器檔案系統所需的一切。
  2. 包含擴充功能後端程式碼的來源資料夾。

雖然您可以從空目錄或從 vm-ui extension 範例

提示

docker extension init 會產生 Go 後端。但您仍然可以將其用作您自己擴充功能的起點，並使用任何其他語言，例如 Node.js、Python、Java、.Net 或任何其他語言和框架。

在本教學課程中，後端服務僅公開一個傳回 JSON 負載「Hello」的路由。

{ "Message": "Hello" }

重要

我們建議前端和後端透過通訊端，以及 Windows 上的命名管道進行通訊，而不是 HTTP。這可以防止與主機上執行的任何其他應用程式或容器發生連接埠衝突。此外，某些 Docker Desktop 使用者在受限的環境中執行，他們無法在其機器上開啟連接埠。為後端選擇語言和框架時，請確保它支援通訊端連線。

package main

import (
	"flag"
	"log"
	"net"
	"net/http"
	"os"

	"github.com/labstack/echo"
	"github.com/sirupsen/logrus"
)

func main() {
	var socketPath string
	flag.StringVar(&socketPath, "socket", "/run/guest/volumes-service.sock", "Unix domain socket to listen on")
	flag.Parse()

	os.RemoveAll(socketPath)

	logrus.New().Infof("Starting listening on %s\n", socketPath)
	router := echo.New()
	router.HideBanner = true

	startURL := ""

	ln, err := listen(socketPath)
	if err != nil {
		log.Fatal(err)
	}
	router.Listener = ln

	router.GET("/hello", hello)

	log.Fatal(router.Start(startURL))
}

func listen(path string) (net.Listener, error) {
	return net.Listen("unix", path)
}

func hello(ctx echo.Context) error {
	return ctx.JSON(http.StatusOK, HTTPMessageBody{Message: "hello world"})
}

type HTTPMessageBody struct {
	Message string
}

重要

我們目前尚無 Java 的有效範例。填寫表單 並讓我們知道您是否需要 Java 的範例。

重要

我們目前尚無 .NET 的有效範例。填寫表單 並讓我們知道您是否需要 .NET 的範例。

調整 Dockerfile

注意

使用 `docker extension init` 時，它會建立一個已包含 Go 後端所需內容的 `Dockerfile`。

要在安裝擴充功能時部署 Go 後端，您需要先設定 `Dockerfile`，以便它

  • 建置後端應用程式
  • 將二進位檔案複製到擴充功能的容器檔案系統中
  • 當容器開始在擴充功能通訊端上監聽時啟動二進位檔案

提示

為了簡化版本管理，您可以重複使用相同的映像檔來建置前端、建置後端服務，以及打包擴充功能。

# syntax=docker/dockerfile:1
FROM node:17.7-alpine3.14 AS client-builder
# ... build frontend application

# Build the Go backend
FROM golang:1.17-alpine AS builder
ENV CGO_ENABLED=0
WORKDIR /backend
COPY vm/go.* .
RUN --mount=type=cache,target=/go/pkg/mod \
    --mount=type=cache,target=/root/.cache/go-build \
    go mod download
COPY vm/. .
RUN --mount=type=cache,target=/go/pkg/mod \
    --mount=type=cache,target=/root/.cache/go-build \
    go build -trimpath -ldflags="-s -w" -o bin/service

FROM alpine:3.15
# ... add labels and copy the frontend application

COPY --from=builder /backend/bin/service /
CMD /service -socket /run/guest-services/extension-allthethings-extension.sock

重要

我們目前尚無 Node 的有效 Dockerfile。填寫表單 並讓我們知道您是否需要 Node 的 Dockerfile。

重要

我們目前尚無 Python 的有效 Dockerfile。填寫表單 並讓我們知道您是否需要 Python 的 Dockerfile。

重要

我們目前尚無 Java 的有效 Dockerfile。填寫表單 並讓我們知道您是否需要 Java 的 Dockerfile。

重要

我們目前尚無 .Net 的有效 Dockerfile。填寫表單 並讓我們知道您是否需要 .Net 的 Dockerfile。

設定中繼資料檔案

若要在 Docker Desktop 的虛擬機器中啟動擴充功能的後端服務，您必須在 `metadata.json` 檔案的 `vm` 區段中設定映像檔名稱。

{
  "vm": {
    "image": "${DESKTOP_PLUGIN_IMAGE}"
  },
  "icon": "docker.svg",
  "ui": {
    ...
  }
}

有關 `metadata.json` 檔案中 `vm` 區段的更多資訊，請參閱中繼資料。

警告

請勿取代 `metadata.json` 檔案中的 `${DESKTOP_PLUGIN_IMAGE}` 預留位置。安裝擴充功能時，預留位置會自動替換為正確的映像檔名稱。

從您的前端叫用擴充功能後端

使用進階前端擴充功能範例，我們可以叫用我們的擴充功能後端。

使用 Docker Desktop Client 物件，然後使用 `ddClient.extension.vm.service.get` 叫用後端服務中的 `/hello` 路由，它會傳回回應的本文。

將 `ui/src/App.tsx` 檔案替換為以下程式碼


// ui/src/App.tsx
import React, { useEffect } from 'react';
import { createDockerDesktopClient } from "@docker/extension-api-client";

//obtain docker desktop extension client
const ddClient = createDockerDesktopClient();

export function App() {
  const ddClient = createDockerDesktopClient();
  const [hello, setHello] = useState<string>();

  useEffect(() => {
    const getHello = async () => {
      const result = await ddClient.extension.vm?.service?.get('/hello');
      setHello(JSON.stringify(result));
    }
    getHello()
  }, []);

  return (
    <Typography>{hello}</Typography>
  );
}

重要

我們目前尚無 Vue 的範例。填寫表單 並告知我們您是否需要 Vue 範例。

重要

我們目前尚無 Angular 的範例。填寫表單 並告知我們您是否需要 Angular 範例。

重要

我們目前尚無 Svelte 的範例。填寫表單 並告知我們您是否需要 Svelte 範例。

重新建置擴充功能並更新

由於您已修改擴充功能的配置並在 Dockerfile 中新增了一個階段，因此您必須重新建置擴充功能。

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

建置完成後，您需要更新它，或者如果您尚未安裝，則需要安裝它。

docker extension update awesome-inc/my-extension:latest

現在，您可以在 Docker Desktop 儀表板的容器視圖中看到後端服務正在運行，並在需要除錯時查看日誌。

提示

您可能需要在設定中開啟顯示系統容器選項才能看到後端容器正在運行。 更多資訊請參閱顯示擴充功能容器。

開啟 Docker Desktop 儀表板並選擇容器標籤。您應該會看到後端服務呼叫的回應。

後續步驟？