Harbor 레지스트리 활성화#

Harbor 레지스트리를 활성화하려면 그룹 또는 프로젝트에 Harbor 통합을 구성해야 합니다. Harbor 구성에는 url, project_name, username, password 네 개의 필드가 필요합니다.

GitLab CI/CD 사전 정의 변수와 다음 Harbor 레지스트리 변수를 함께 사용해 Harbor 인스턴스에 데이터를 요청할 수 있습니다.

설정 테스트#

설정을 테스트하면 Harbor 인스턴스의 /api/v2.0/ping으로 요청을 보냅니다. 테스트가 성공하면 상태 코드 200을 반환합니다. 이 테스트는 주로 Harbor 인스턴스가 올바르게 구성되었는지 확인하기 위한 것입니다. username과 password가 올바른지까지 확인하지는 않습니다.

코드 구조#

app/controllers/concerns/harbor
├── access.rb
├── artifact.rb
├── repository.rb
└── tag.rb

app/controllers/projects/harbor
├── application_controller.rb
├── artifacts_controller.rb
├── repositories_controller.rb
└── tags_controller.rb

app/controllers/groups/harbor
├── application_controller.rb
├── artifacts_controller.rb
├── repositories_controller.rb
└── tags_controller.rb

app/models/integrations/harbor.rb

app/serializers/integrations/harbor_serializers
├── artifact_entity.rb
├── artifact_serializer.rb
├── repository_entity.rb
├── repository_serializer.rb
├── tag_entity.rb
└── tag_serializer.rb

lib/gitlab/harbor
├── client.rb
└── query.rb

app/controllers/projects/harbor와 app/controllers/groups/harbor 아래의 컨트롤러는 프론트엔드 호출을 위한 API 인터페이스를 제공합니다.

app/controllers/concerns/harbor 아래의 모듈은 컨트롤러가 공통으로 사용하는 메서드를 제공합니다.

Harbor 통합 모델은 app/models/integrations 아래에 있으며, Harbor 통합의 구성 정보를 담고 있습니다.

app/serializers/integrations/harbor_serializers 아래의 직렬화기는 app/controllers/projects/harbor와 app/controllers/groups/harbor 아래의 컨트롤러가 사용하며, 응답의 JSON 데이터를 직렬화하도록 돕습니다.

lib/gitlab/harbor 디렉터리에는 데이터를 가져오기 위해 Harbor 인스턴스에 API 요청을 보내는 Harbor 클라이언트가 있습니다.

시퀀스 다이어그램#

sequenceDiagram
    Client->>+GitLab: Request Harbor registry
    GitLab->>+Harbor instance: Request repositories data via API
    Harbor instance->>+GitLab: Repositories data
    GitLab->>+Client: Return repositories data
    Client->>+GitLab: Request Harbor registry artifacts
    GitLab->>+Harbor instance: Request artifacts data via API
    Harbor instance->>+GitLab: Artifacts data
    GitLab->>+Client: Return artifacts data
    Client->>+GitLab: Request Harbor registry tags
    GitLab->>+Harbor instance: Request tags data via API
    Harbor instance->>+GitLab: Tags data
    GitLab->>+Client: Return tags data

정책#

그룹과 프로젝트의 read_harbor_registry 정책은 사용자가 Harbor 레지스트리에 접근할 수 있는지를 제어합니다. 이 정책은 최소 Reporter 권한을 가진 모든 사용자에게 적용됩니다.

프론트엔드 개발#

관련 프론트엔드 코드는 app/assets/javascripts/packages_and_registries/harbor_registry/ 디렉터리에 있습니다. 파일 구조는 다음과 같습니다.

├── components
│   ├── details
│   │   ├── artifacts_list_row.vue
│   │   ├── artifacts_list.vue
│   │   └── details_header.vue
│   ├── list
│   │   ├── harbor_list_header.vue
│   │   ├── harbor_list_row.vue
│   │   └── harbor_list.vue
│   ├── tags
│   │   ├── tags_header.vue
│   │   ├── tags_list_row.vue
│   │   └── tags_list.vue
│   └── harbor_registry_breadcrumb.vue
├── constants
│   ├── common.js
│   ├── details.js
│   ├── index.js
│   └── list.js
├── pages
│   ├── details.vue
│   ├── harbor_tags.vue
│   ├── index.vue
│   └── list.vue
├── index.js
├── router.js
└── utils.js

harbor_registry/pages/index.vue 파일에는 Vue router-view 컴포넌트 하나만 있으며, 이 컴포넌트가 router.js를 통해 images list, image detail, tags list 페이지로 연결합니다.

registry_breadcrumb.vue 컴포넌트는 다단계 경로를 지원하지 않으므로, harbor_registry/components/harbor_registry_breadcrumb.vue 컴포넌트를 다시 구현했습니다.

harbor_registry_breadcrumb.vue에 경로 배열을 전달하면 다단계 브레드크럼 컴포넌트를 생성할 수 있습니다.

const routeNameList = [];
const hrefList = [];

this.breadCrumbState.updateName(nameList);
this.breadCrumbState.updateHref(hrefList);