Angular

TypeScript 기반 Angular 프론트엔드 컴포넌트

Angular는 TypeScript를 기반으로 개발된 개발 플랫폼입니다. 플랫폼이면서 동시에:

확장가능한 컴포넌트 구조로 웹 애플리케이션을 만드는 프레임워크입니다.
라우팅, 폼 관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 조화롭게 통합한 모음집입니다.
애플리케이션 개발, 빌드, 테스트, 수정에 필요한 개발자 도구를 제공합니다.

Angular는 혼자 개발하는 프로젝트는 물론이고 기업용 애플리케이션에도 활용할 수 있습니다.

Turaco에서는 Angular를 간단하게 구성하고 배포할 수 있게 컴포넌트로 제공합니다.

본 챕터에서는 Turaco에서 제공하는 Angular 컴포넌트의 사용법에 대해 설명합니다.

컴포넌트 배치

Angular 컴포넌트는 아키텍처 설계 화면 (이하 디자이너 화면)에서 좌측에 위치한 컴포넌트 목록에서 프론트엔드 카테고리에 있습니다.

설계화면 왼쪽 컴포넌트 리스트 화면에서 Vue 컴포넌트를 선택 후 디자이너 화면으로 드래그 & 드롭합니다.

컴포넌트배치

배치된 Vue 컴포넌트에 대한 이름과 설명을 입력합니다. 이름과 설명은 필수 입력값이며 입력하지 않으면 확인 버튼이 활성화되지 않습니다. 입력된 이름과 설명은 아키텍처 설계 및 생성되는 리소스에 사용됩니다.

포트 설정

3. 포트 정보는 3가지 정보를 반드시 입력해야 합니다.
미 입력시 컨테이너 실행 후 정상적으로 접속이 되지 않을 수 있습니다.

프로토콜 -> 통신시 사용할 프로토콜 설정(현재는 http만 지원)
입력포트 -> 서비스 입력 포트로 사용
타겟포트 -> 서비스 출력 포트이며 컨테이너의 입력 포트로 주입

입력된 정보는 애플리케이션 생성시 배포를 위한 Helm 차트 생성에 사용됩니다.
포트 정보를 입력하지 않으면 Helm 차트 리소스가 만들어지지 않거나 배포 시 애플리케이션이 정상적으로 동작하지 않을 수 있습니다.

스토리지 설정

컨테이너는 로컬 스토리지를 사용할 수 있으나 컨테이너의 특성상 재시작되거나 삭제되는 경우 저장된 데이터가 같이 삭제됩니다.이러한 특성 때문에 외부에 영구 볼륨을 설정하고 저장을 해야 데이터가 유실되지 않고 보관이 됩니다.

Turaco에서는 운영 환경에서 많이 사용하는 2가지 스토리지 클래스를 지원합니다.

NFS 기반의 스토리지 클래스 (tlc-nfs-sc)

Disk 기반의 스토리지 클래스 (tlc-block-sc)

4. 스토리지 설정시 아래와 같이 3개의 속성이 있습니다.

접근 모드 -> 스토리지 접근 모드
볼륨 크기 -> 볼륨 크기 입력(ex. 5Gi)
스토리지 클래스 -> 스토리지 클래스 이름 입력(기본값 유지 추천)

Angular 컴포넌트에서는 접근모드는 ReadWriteOnce로 고정되어 있으며 변경할 수 없습니다.
스토리지 클래스는 NFS 또는 Disk 기반의 스토리지 클래스 이름을 입력해야 하며 잘못된 값을 입력할 경우 정상적으로 배포가 되지 않을 수 있습니다.

SSR 적용 가이드

Angular 템플릿은 Angular CLI의 SSR/hybrid rendering 흐름을 기준으로 확장합니다. 자세한 내용은 Angular Server and hybrid rendering 공식 가이드를 참고합니다.

현재 Turaco Angular 템플릿은 기본적으로 CSR(Client-Side Rendering) 방식으로 동작합니다. SSR을 적용하더라도 Jenkins CI/CD의 기본 흐름은 재사용하는 것을 원칙으로 합니다. SSR 차이는 주로 Angular SSR 구성, package.json 스크립트, Dockerfile 런타임 구성에서 흡수합니다.

Angular SSR 구성

신규 프로젝트는 SSR 옵션으로 생성할 수 있습니다.

ng new --ssr

기존 Angular 템플릿에는 SSR 패키지를 추가합니다.

ng add @angular/ssr

SSR 적용 후에는 서버 라우팅 설정을 추가하고, 라우트별 렌더링 방식을 결정합니다.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '',
    renderMode: RenderMode.Client,
  },
  {
    path: 'about',
    renderMode: RenderMode.Prerender,
  },
  {
    path: 'profile',
    renderMode: RenderMode.Server,
  },
  {
    path: '**',
    renderMode: RenderMode.Server,
  },
];

빌드 스크립트

기존 Jenkinsfile은 podman build --build-arg PROFILE=$PROFILE ... 방식으로 Dockerfile을 빌드합니다. Jenkinsfile을 바꾸기보다 기존 CI가 호출하는 build/build:dev 스크립트 이름을 유지합니다.

{
  "scripts": {
    "build": "ng build",
    "build:dev": "ng build --configuration=dev",
    "start": "node dist/server/server.mjs"
  }
}

배포 기준

Jenkinsfile stage 이름과 순서는 변경하지 않습니다.
Dockerfile은 기존처럼 ARG PROFILE을 받고 npm run build:${PROFILE}를 우선 실행한 뒤 없으면 npm run build로 fallback합니다.
Dockerfile runtime stage만 Nginx 정적 서빙에서 Node SSR 서버 실행으로 바꿉니다.
이미지 태그, registry login, push, Helm values 업데이트, ArgoCD sync는 기존 Jenkinsfile 흐름을 그대로 사용합니다.
Helm chart는 기존 frontend deployment 템플릿을 최대한 유지하되, SSR 컨테이너의 listen port와 health check만 필요한 경우 조정합니다.
window, document, navigator, localStorage 같은 브라우저 전용 API는 서버 렌더링에서 오류가 나지 않도록 분리합니다.

컴포넌트 배치​

Angular 컴포넌트는 아키텍처 설계 화면 (이하 디자이너 화면)에서 좌측에 위치한 컴포넌트 목록에서 프론트엔드 카테고리에 있습니다.​

포트 설정​

스토리지 설정​

SSR 적용 가이드​

Angular SSR 구성​

빌드 스크립트​

배포 기준​