기존에 사용하고 있던 Harbor에 LDAP를 연동해서 쓰고 있었는데 LDAP 서버가 문제가 생기는 바람에 더 이상 로그인이 불가능 한 상황에 이르렀습니다. 밀고 다시 설치할까 하던 중에 공식 홈페이지에 2.0.0 버전이 릴리즈 되었다는 사실을 알게 되어 이렇게 된 김에 버전을 올리기로 하였습니다. 

 

공식 홈페이지 글에 따르면 크게 세가지 변경점이 있다고 합니다.

  1. OCI 호환.
  2. Aqua Trivy를 기본 스캐너로 탑재.
  3. 다크 모드 지원.

 

 

다크 모드로 보다 세련되어 보이게 변경되었습니다. 맘에 드네요. 그럼 기존 설치한 Harbor 1.10.2 버전을 2.0.0 버전으로 업그레이드해 보도록 하겠습니다.

 

 

 

1. Harbor 요구사항 확인.

 

다행스럽게도 기존 요구사항이 2.0으로 오면서 변경되거나 하지는 않았습니다. Harbor의 요구사항은 다음과 같습니다.

 

Harbor는 리눅스에서 동작합니다. 기존 버전에서는 우분투 서버 18.04.3버전을 사용했습니다.

 

하드웨어 요구사항은 다음과 같습니다.

리소스 최소 사양 권장 사양
CPU 2 CPU 4CPU
메모리 4 GB 8 GB
스토리지 40 GB 160 GB

 

소프트웨어 요구사항은 다음과 같습니다.

소프트웨어 버전
Docker Engine 17.06.0 CE 버전 이상
Docker Compose 1.18.0 버전 이상
OpenSSL 최신 버전 권장

 

도커 설치는 이 글을, 도커 컴포즈 설치는 이 글을 참고해주세요.

 

네트워크 포트 사용은 다음과 같습니다.

 

포트 프로토콜 설명      
443 HTTPS Harbor 포털 및 코어 API는이 포트에서 HTTPS 요청을 수락합니다. 구성 파일에서이 포트를 변경할 수 있습니다.
4443 HTTPS 하버 용 Docker Content Trust 서비스에 대한 연결입니다. 공증(Notary)이 활성화 된 경우에만 필요합니다. 구성 파일에서이 포트를 변경할 수 있습니다.
80 HTTP Harbor 포털 및 코어 API는이 포트에서 HTTP 요청을 수락합니다. 구성 파일에서이 포트를 변경할 수 있습니다.




2. Harbor Installer 다운로드.

 

Harbor 릴리즈 페이지로 이동하여 원하는 버전을 다운받습니다. 여러 버전이 있지만 이 글에서는 2.0 버전으로의 업그레이드를 목적으로 하고 있기 때문에 2.0.0 태그의 버전을 다운받도록 하겠습니다. 별다른 문제나 요구가 없는 한 "harbor-offline-installer-v2.0.0.tgz" 파일을 다운로드하여주시면 됩니다. 

 

다운로드한 파일이 위치한 폴더로 이동한 뒤 다음 명령어로 압축을 풀어줍니다.

 

$ tar xvf harbor-offline-installer-v2.0.0.tgz

 

 

 

 

3. Harbor 사전 설정.

 

파일이 준비되었으면 설치할 때 적용될 설정 파일을 수정해야 합니다. 기존 harbor.yml에서 .tmpl이 추가된 것으로 보입니다. hatbot.yml의 탬플릿의 느낌 같네요. 직접 파일을 열어보면 아시겠지만 변경된 내용이 좀 있습니다.

 

우선 TLS관련 설정이 추가되었습니다. HTTPS 바로 아래에 추가되었으니 TLS 설정이 필요하신분은 건드리시면 될 겁니다.

공식 홈페이지에 따르면 이 기능에 대한 설명은 다음과 같습니다.

 

By default, The internal communication between Harbor’s component (harbor-core,harbor-jobservice,proxy,harbor-portal,registry,registryctl,trivy_adapter,clair_adapter,chartmuseum) use HTTP protocol which might not be secure enough for some production environment. Since Harbor v2.0, TLS can be used for this internal network. In production environments, always use HTTPS is a recommended best practice.
This functionality is introduced via the internal_tls in harbor.yml file. To enabled internal TLS, set enabled to true and set the dir value to the path of directory that contains the internal cert files.

기본적으로 Harbor 구성 요소 (하버 코어, 하버 작업 서비스, 프록시, 하버 포털, 레지스트리, 레지스트리) 간의 내부 통신은 일부 프로덕션 환경에 충분히 안전하지 않을 수 있는 HTTP 프로토콜을 사용합니다. Harbor v2.0부터 이 내부 네트워크에 TLS를 사용할 수 있습니다. 프로덕션 환경에서는 항상 HTTPS를 사용하는 것이 좋습니다.
이 기능은 internal_tlsin harbor.yml파일을 통해 도입되었습니다 . 내부 TLS를 활성화하기 위해서는 enabled값을 true로 설정하고 dir을 내부 인증 파일이 포함된 디렉터리 경로로 설정하세요.

 

또한 Trivy설정이 추가되었습니다. Trivy를 간단하게 설명하자면 다음과 같습니다.

 

A Simple and Comprehensive Vulnerability Scanner for Containers, Suitable for CI

CI에 적합한 컨테이너를위한 간단하고 포괄적인 취약점 스캐너

 

Trivy에 관심이 있으신 분은 여기를 참조해 주시길 바라며 이 기능은 추후 사용하게된다면 포스팅하겠습니다.

 

그 외의 설정은 모두 동일합니다. 이제 이 파일을 복사해 줍시다.

 

$ cp harbor.yml.tmpl harbor.yml

 

복사한 harbor.yml파일을 적절하게 수정해 줍시다. 다른 건 몰라도 hostname은 변경해야 합니다. 물론 실제 도커를 사용하기 위해서는 인증서도 적용해야 합니다.

 

$ vi harbor.yml

 

 

 

4. Harbor 설치.

 

이제 남은 건 인스톨 스크립트를 실행하는 것뿐입니다. 업그레이드를 하는 경우 기존에 돌아가고 있는 harbor를 내리는 것을 잊지 마세요. 

 

$ sudo docker-compose down -v

 

 

혹시 몰라서 구 버전의 harbor docker compose 파일이 존재하는 폴더에서 실행시켜줬습니다.

 

이제 새 버전의 harbor을 설치합니다.

 

$ sudo ./install.sh

 

 

쭉 설치가 진행되고 마지막에 성공적으로 설치되었으며 자동으로 시작되었다는 메시지가 출력됩니다.

 

이제 호스트로 이동하면 정상적으로 harbor에 접속할 수 있습니다.

 

 

 

 

 

 

우분투 서버에서 ssh의 기본 포트인 22번 대신 다른 포트를 사용하는 방법에 대해 알아봅니다.

 

 

 

0. 사전 준비.

 

이 글은 우분투 서버 20.04를 기준으로 작성되었습니다. 당연히 해당 서버에 미리 ssh가 설치되어 있다는 전제로 작업이 진행됩니다.

 

 

 

1. ssh 포트 변경.

 

ssh에 접속할 때 사용하는 포트는 설정 파일에 기재되어 있습니다. 다음 명령어를 통해 설정 파일을 수정합니다.

 

$ sudo vi /etc/ssh/sshd_config

 

설정파일을 열면 바로 포트 정보를 확인할 수 있습니다.

 

 

우리는 여기에 기본값인 22 대신 원하는 값을 넣어 준 뒤 저장하도록 합니다.

 

 

 

 

2. ssh 재시작

 

변경된 설정파일을 적용하기 위해 ssh를 재시작해 줍니다.

 

$ sudo service sshd restart

 

 

 

3. 접속 확인.

 

terminal이나 putty와 같은 프로그램을 이용해 접속을 시도해 봅니다.

 

 

기본 포트로 접속시 위와 같은 메시지를 확인할 수 있습니다.

 

 

변경된 포트로 접속시 정상적으로 접속되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

Storybook 패키지에 대해 알아봅니다.

 

 

 

1. Storybook이란?

 

최근 프론트엔드 개발은 페이지 단위가 아닌 컴포넌트 단위로 개발된 다는 것을 들어본 적이 있을 겁니다. 프로젝트 내에서 컴포넌트를 개발하다 보면 초기에는 별 문제가 없지만 프로젝트의 규모가 커질수록 컴포넌트 개발에 독립성을 유지하기 힘들어집니다. 이런 경우 스토리북을 이용하면 보다 편하게 컴포넌트를 개발할 수 있습니다.

 

Build bulletproof UI components faster
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

 

스토리북의 공식 홈페이지를 방문하면 가장 먼저 우리를 반겨주는 문구입니다. 위의 설명대로 스토리북은 독립된 환경에서 컴포넌트를 개발하고 이를 확인해 볼 수 있는 오픈소스 라이브러리 입니다. 이러한 환경에서 개발된 컴포넌트는 독립성이 유지되기 때문에 자연히 재사용성이 좋아집니다. 또한 스토리북은 개발뿐 아니라 문서화, 테스팅에 대해서도 좋은 기능을 제공해 줍니다.

 

 

 

2. Storybook 사용해보기.

 

먼저 스토리북을 사용하기 위해 예시 프로젝트를 생성합니다. 이 글에서는 create-react-app을 통해 예시 프로젝트를 생성하겠습니다.

 

> create-react-app storybook-ex

> cd storybook-ex 

> npx -p @storybook/cli sb init --type react_scripts

 

여기까지 진행한 뒤 package.json파일을 확인합니다. script항목에 보면 전에 없던 스토리북에 관련된 스크립트를 확인할 수 있습니다. 

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },

 

이제 스토리북을 실행시켜 9009번 포트로 접속해 봅시다.

 

> npm run strorybook

> http://localhost:9009/로 이동.

 

 

정상적으로 스토리북이 실행된 것을 확인할 수 있습니다. 좌측에 "Welcom"과 "Button"이 보이시나요? 이것들을 스토리북에선 스토리라고 부릅니다. 스토리란 결국 우리가 컴포넌트를 구현하게 될 독립적 공간이 되는것 입니다. 

 

이제 다시 프로젝트로 돌아가서 위의 스토리들이 어디에 위치하는지 확인해 봅시다. ../.storybook 폴더 내의 main.js 파일을 열어보세요.

 

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

 

스토리북에서 사용하는 애드온들과 스토리에 대한 설정이 정의되어 있습니다. stories에 설정된 값을 확인해보면 src 폴더 내에 있는 .stories.js로 끝나는 모든 파일을 스토리 파일로 인식하도록 설정되어 있습니다. 실제로 위의 "Welcom"과 "Button" 스토리들은 src폴더 내의 stories폴더에 존재하고 있습니다.

 

새로운 스토리를 생성하기 위해서는 src폴더 내 임의 폴더에 파일이름.stories.js로 파일을 생성 한 뒤 컴포넌트를 작성하면 됩니다.

 

 

 

 

 

+ Recent posts