為您的擴充套件新增後端

您的擴充套件可以附帶一個後端部分，前端可以與其互動。本頁提供了關於為什麼以及如何新增後端的資訊。

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

提示
查閱快速入門指南和 docker extension init <my-extension>。它們為您的擴充套件提供了更好的基礎，因為它們更具時效性，並且與您安裝的 Docker Desktop 相關。

為什麼要新增後端？

得益於 Docker Extensions SDK，大多數情況下，您應該能夠直接從前端完成 Docker CLI 所需的操作。

儘管如此，在某些情況下您可能需要為擴充套件新增後端。目前為止，擴充套件構建者已使用後端來

將資料儲存在本地資料庫中，並透過 REST API 將其返回。
儲存擴充套件狀態，例如當按鈕啟動一個長時間執行的程序時，這樣如果您離開擴充套件使用者介面並返回，前端可以從上次中斷的地方繼續。

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

為擴充套件新增後端

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

這是一個帶有後端的擴充套件資料夾結構

.
├── Dockerfile # (1)
├── Makefile
├── metadata.json
├── ui
    └── index.html
└── vm # (2)
    ├── go.mod
    └── main.go

包含構建後端並將其複製到擴充套件容器檔案系統所需的一切。
包含擴充套件後端程式碼的原始檔夾。

儘管您可以從空目錄或 vm-ui extension 示例開始，但強烈建議您從 docker extension init 命令開始，並根據您的需求進行更改。

提示
docker extension init 會生成一個 Go 後端。但您仍可以將其作為自己擴充套件的起點，並使用任何其他語言，如 Node.js、Python、Java、.Net 或任何其他語言和框架。

在本教程中，後端服務只暴露一個返回“Hello”JSON 負載的路由。

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

重要
我們還沒有 Node 的工作示例。如果您需要 Node 的示例，請填寫表格告知我們。

重要
我們還沒有 Python 的工作示例。如果您需要 Python 的示例，請填寫表格告知我們。

重要
我們還沒有 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 的 VM 中啟動擴充套件的後端服務，您必須在 metadata.json 檔案的 vm 部分配置映象名稱。

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

有關 metadata.json 檔案 vm 部分的更多資訊，請參閱元資料。

警告
不要替換 metadata.json 檔案中的 ${DESKTOP_PLUGIN_IMAGE} 佔位符。當擴充套件安裝時，佔位符會自動替換為正確的映象名稱。

從前端呼叫擴充套件後端

使用高階前端擴充套件示例，我們可以呼叫擴充套件後端。

使用 Docker Desktop 客戶端物件，然後透過 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 Dashboard 的 **容器** 檢視中看到後端服務正在執行，並在需要除錯時檢視日誌。

提示
您可能需要在 **Settings** 中啟用 **Show system containers** 選項才能看到後端容器執行。有關更多資訊，請參閱顯示擴充套件容器。

開啟 Docker Desktop Dashboard 並選擇 **Containers** 選項卡。您應該會看到後端服務呼叫返回的響應。

下一步是什麼？

瞭解如何共享和釋出您的擴充套件。
瞭解有關擴充套件架構的更多資訊。