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

您的擴充功能可以包含後端部分，供前端與其互動。本頁提供關於為何以及如何新增後端的資訊。

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

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

為何新增後端？

歸功於 Docker 擴充功能 SDK，大多數時候您可以直接從前端執行您所需的操作。

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

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

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

將後端新增至擴充功能

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

以下是包含後端的擴充功能資料夾結構

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

包含建置後端並將其複製到擴充功能容器檔案系統所需的一切。
包含擴充功能後端程式碼的原始碼資料夾。

雖然您可以從空目錄或從 vm-ui 擴充功能 範例開始，但強烈建議您從 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 儀表板的容器檢視中看到後端服務正在執行，並在需要偵錯時查看日誌。

提示
您可能需要開啟設定中的 顯示系統容器 選項，以查看後端容器正在執行。請參閱顯示擴充功能容器以取得更多資訊。

開啟 Docker Desktop 儀表板並選取容器索引標籤。您應該會看到後端服務呼叫的回應顯示出來。

下一步是什麼？

了解如何分享和發佈您的擴充功能。
了解更多關於擴充功能架構的資訊。