Nx로 시작하는 Angular + NestJS 풀 스택 웹 앱 개발

이 기사는 Angular #2 Advent Calendar 2019 9일째 기사입니다.

올해 ng-japan에서 발표된 'Angular + NestJS'에 관심이 있었기 때문에 시도했습니다.
htps //w w. 요츠베. 이 m/와 tch? v = 2Q mr8-K

NestJS 은 Angular의 영향을 받아 만들어진 서버측 애플리케이션 프레임워크입니다. 프런트 엔드와 백 엔드 모두 같은 감각으로 쓸 수있는 것이 좋습니다.

ng-japan의 발표에서는 Lerna를 사용한 모노레포 구성이 되고 있었습니다만, 최근이라고 응 x 를 사용하는 것도 좋을 것 같았기 때문에, 샘플을 섞으면서 해설해 나가려고 생각합니다.

작업 공간 만들기

create-nx-workspace 명령으로 작업 공간을 생성합니다.

$ npx create-nx-workspace

작업 공간 이름을 지정하고 템플릿으로 'angular-nest'를 선택합니다.

$ npx create-nx-workspace
? Workspace name (e.g., org name)     workspace
? What to create in the new workspace 
  empty             [an empty workspace] 
  web components    [a workspace with a single app built using web components] 
  angular           [a workspace with a single Angular application] 
❯ angular-nest      [a workspace with a full stack application (Angular + Nest)]
  react             [a workspace with a single React application] 
  react-express     [a workspace with a full stack application (React + Express)
(Move up and down to reveal more choices)
? Application name                    web
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com ]

무려 단지 이것만으로 「Angular + NestJS」의 환경이 생겼습니다.

애플리케이션 시작

nx serve <プロジェクト名> 에서 각 응용 프로그램을 시작할 수 있습니다.

$ npm run nx serve api
$ npm run nx serve web

프로젝트 구성

생성된 프로젝트에는 apps 디렉토리에 각 프런트엔드 백엔드 애플리케이션이 포함되어 있으며 libs/api-interfaces 내에 공통 인터페이스가 정의되어 있습니다.
tsconfig.json 에서 경로 별칭도 설정되어 있으므로 가져올 때 @workspace/api-interfaces 를 지정하면 OK입니다.

apps/web/src/app/app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Message } from '@workspace/api-interfaces';

@Component({...})
export class AppComponent {
  hello$ = this.http.get<Message>('/api/hello');
  constructor(private http: HttpClient) {}
}

애플리케이션 추가

아래 명령으로 애플리케이션을 추가할 수 있습니다.

$ npm run ng g @nrwl/angular:app <アプリケーション名>

생성된 어플리케이션은 유닛 테스트와 E2E 테스트에 각각 Jest , Cypress 을 디폴트로 사용하는 설정이 되어 있습니다.

라이브러리 추가

아래 명령을 사용하여 라이브러리를 추가할 수 있습니다. 애플리케이션간에 공통으로 사용하는 서비스나 컴퍼넌트를 넣으면 좋을 것입니다.

$ npm run ng g @nrwl/angular:lib <ライブラリ名>

tsconfig.json의 별칭 설정도 라이브러리 생성시 자동으로 추가됩니다.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    (中略)
    "baseUrl": ".",
    "paths": {
      "@workspace/api-interfaces": ["libs/api-interfaces/src/index.ts"],
      "@workspace/ui": ["libs/ui/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

Schematic 추가

추가 설치나 설정 없이 Schematic을 만들고 실행할 수 있는 것도 Nx의 재미있는 곳입니다.

$ npm run ng g workspace-schematic

ng g workspace-schematic 명령을 실행하면 shcema.json 및 index.json가 생성됩니다.

다음 예제에서는 src/environments/envirnment.ts를 생성하는 Schematic을 보여줍니다. API 키가 포함되어 있는 등, 빌드에 필요해도 버전 관리하에 두고 싶지 않은 경우는 Schematic 를 사용해 생성하는 것도 하나의 손일까 생각합니다.

tools/schematics/environment/schema.json

{
  "$schema": "http://json-schema.org/schema",
  "id": "environment",
  "type": "object",
  "properties": {
    "project": {
      "type": "string",
      "description": "Name of the project.",
      "x-prompt": "Which project would you like to add environment variables?"
    },
    "production": {
      "type": "boolean",
      "description": "Production",
      "default": false
    },
    "apiToken": {
      "type": "string",
      "description": "API token"
    },
  },
  "required": ["project"]
}

tools/schematics/environment/index.ts

import { strings } from '@angular-devkit/core';
import { Rule, SchematicContext, apply, applyTemplates, mergeWith, mov, url } from '@angular-devkit/schematics';
import { toFileName } from '@nrwl/workspace';

export interface Schema {
  project: string;
  production: boolean;
  apiToken?: string;
}

export default function(schema: Schema): Rule {
  const name = toFileName(schema.production ? 'environment.prod' : 'environment');
  const directory = `apps/${schema.project}/src/environments`;
  return (_, _context: SchematicContext) => {
    return mergeWith(apply(url('./files'), [
      applyTemplates({
        ...strings,
        name,
        production: schema.production,
        apiToken: `'${schema.apiToken || ''}'`,
      }),
      move(directory)
    ]));
  };
}

tools/schematics/environment/files/__name__.ts.template

export const environment = {
  production: <%= production %>,
  apiToken: <%= apiToken %>
};

애플리케이션 테스트

nx test <プロジェクト名> 에서 단위 테스트, nx e2e <プロジェクト名>-e2e 에서 E2E 테스트를 실행합니다.

$ npm run nx test web
$ npm run nx e2e web-e2e

nx affected:test 명령을 사용하면 Nx가 자동으로 차이를 감지하고 필요한 테스트를 수행합니다. CI 환경 등에서 실행 시간을 최적화하고 싶을 때 추천합니다.

$ npm run nx affected:test  # nx affected -- --target=testでも可
>  NX   NOTE  Affected criteria defaulted to --base=master --head=HEAD
>  NX  Running target test for projects:
  - api-interfaces
  - web
  - api
  - ui

애플리케이션 빌드

응용 프로그램을 빌드하려면 nx build <プロジェクト名>를 실행합니다. 프로덕션 빌드의 경우 --prod 옵션을 지정합니다.

$ npm run nx build api -- --prod
$ npm run nx build web -- --prod

결론

백엔드에 NestJS를 채용하면 Angular와 지견을 공유할 수 있는 효율적으로 개발할 수 있을 것 같습니다. 또한 Nx를 사용하여 Angular + NestJS 환경을 쉽게 만들 수 있습니다. Angular + NestJS로 전체 스택 웹 앱을 개발하고 싶다면 Nx를 사용해보십시오.