간단한 확장 만들기
간단한 확장 만들기 (Create a simple extension)
plain HTML 기반의 최소(minimal) 프론트엔드 확장을 설정하는 방법을 설명하는 튜토리얼이에요.
출처: 문서
본문
확장을 만들기 시작하려면 먼저 확장의 소스 코드부터 필수 확장 전용 파일까지 담긴 디렉터리가 필요해요. 이 페이지는 plain HTML 기반의 최소 프론트엔드 확장을 설정하는 방법을 알려줘요.
시작하기 전에 최신 버전의 Docker Desktop을 설치했는지 확인하세요.
팁: 새 확장을 위한 코드베이스를 시작하려면 Quickstart 가이드와
docker extension init <my-extension>이 더 나은 기반을 제공해요.
확장 폴더 구조 (Extension folder structure)
minimal-frontend 샘플 폴더에는 HTML로 빌드된 UI 확장을 나타내는 바로 사용 가능한 예시가 있어요. 이 튜토리얼에서 이 코드 예시를 살펴볼 거예요.
빈 디렉터리에서 시작할 수도 있지만, 아래 템플릿에서 시작해 필요에 맞게 변경하는 것을 강력히 권장해요.
.
├── Dockerfile # (1)
├── metadata.json # (2)
└── ui # (3)
└── index.html
- 확장을 빌드하고 Docker Desktop에서 실행하는 데 필요한 모든 것을 포함해요.
- 이름, 설명, 버전 같은 확장에 대한 정보를 제공하는 파일이에요.
- 모든 HTML, CSS, JS 파일을 포함하는 소스 폴더예요. 로고와 아이콘 같은 다른 정적 자산도 있을 수 있어요. UI 빌드에 대한 자세한 내용과 가이드라인은 Design and UI styling 섹션을 참조하세요.
Dockerfile 만들기 (Create a Dockerfile)
최소한 Dockerfile에는 다음이 필요해요:
- 확장, 아이콘, 스크린샷에 대한 추가 정보를 제공하는 라벨
- 이 경우
ui폴더 안에 있는index.html인 소스 코드 metadata.json파일
# syntax=docker/dockerfile:1
FROM scratch
LABEL org.opencontainers.image.title="Minimal frontend" \
org.opencontainers.image.description="A sample extension to show how easy it's to get started with Desktop Extensions." \
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 .
메타데이터 파일 구성하기 (Configure the metadata file)
이미지 파일 시스템의 루트에 metadata.json 파일이 필요해요.
{
"ui": {
"dashboard-tab": {
"title": "Minimal frontend",
"root": "/ui",
"src": "index.html"
}
}
}
metadata.json에 대한 자세한 내용은 Metadata를 참조하세요.
확장 빌드하고 설치하기 (Build the extension and install it)
확장을 구성했으니 Docker Desktop이 설치에 사용할 확장 이미지를 빌드해야 해요.
$ docker build --tag=awesome-inc/my-extension:latest .
이 명령은 awesome-inc/my-extension:latest 태그의 이미지를 빌드했어요. docker inspect awesome-inc/my-extension:latest를 실행해 자세한 내용을 볼 수 있어요.
마지막으로 확장을 설치하고 Docker Desktop Dashboard에 나타나는 것을 확인할 수 있어요.
$ docker extension install awesome-inc/my-extension:latest
확장 미리보기 (Preview the extension)
Docker Desktop에서 확장을 미리 보려면 설치가 완료된 후 Docker Desktop Dashboard를 닫았다가 다시 여세요.
왼쪽 메뉴에 확장 이름으로 새 탭이 표시돼요.