NestJS에서 AngularUniversal 소개

Angular의 SSR을 NestJS로 실현하는 방법에 대해서입니다.

서버 측에 NestJS를 전면에 Angular 및 SSR을하는 아키텍처를 생각하고 있습니다.
하지만, NestJS의 기사가 너무 많아 고전했기 때문에 기사로 해 두려고 생각하고 기재하고 있습니다.

운영 환경

Angular CLI: 8.3.17
Node: 12.3.1
Angular: 8.2.13

SSR 설정 절차

Angular 작업 공간 만들기

먼저 보통 Angular 작업 공간을 만듭니다.
이 샘플 프로그램에서는 routing을 설정하고 stylesheet은 CSS로 만듭니다.
또, 이번의 작업 공간명은 nest-angular-ssr 로 했습니다만, 자유롭게 설정해 주세요.

$ ng new nest-angular-ssr
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

AngularUniversal 설치

방금 만든 작업 공간으로 이동하여 AngularUniversal을 설치합니다.

NestJS 용 AngularUniversal nest/universal가 준비되어 있으므로 여기를 설치합니다.
이 때 작업 공간 이름을 듣기 때문에 먼저 ng new (ワークスペース名)에서 설정한 것을 입력하십시오.

$ cd nest-angular-ssr/
$ ng add @nestjs/ng-universal
Skipping installation: Package already installed
? What is the name of your application? nest-angular-ssr

무려 이것으로 완성입니다.
작성된 디렉토리는 다음과 같습니다. (1계층만 기재합니다)

$ tree -L 1
.
├── README.md
├── angular.json
├── browserslist
├── dist
├── e2e
├── karma.conf.js
├── node_modules
├── package-lock.json
├── package.json
├── serve-script.js
├── server
├── src
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.server.json
├── tsconfig.spec.json
├── tslint.json
└── webpack.server.config.js

server 디렉토리에는 NestJS의 소스가 들어 있습니다.
src 디렉토리는 Angular의 소스입니다.

실행해보기

디폴트로 준비되어 있는 html 파일이라고 이해하기 어렵기 때문에, app.component.html 파일을 간단한 것으로 재작성해 봅니다.

src/app/app.components.html

 <span>{{ title }} app is running!</span>

여기는 참고까지 Components 파일의 내용입니다.
title 에 nest-angular-ssr 가 설정되어 있습니다.

src/app/app.components.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'nest-angular-ssr';
}

그럼 실행합니다.

$ npm run serve

SSR 확인

http://localhost:4200 에 연결하면 작성한 응용 프로그램이 실행됩니다.
Chrome에서 view-soure:localhost:4200을 실행하면 JavaScript가 실행되기 전에 서버 측에서 반환된 HTML을 볼 수 있습니다.<span _ngcontent-sc0="">nest-angular-ssr app is running!</span> 의 부분이 SSR에 의해 생성된 HTML입니다.






이제 SSR 성공을 확인할 수 있었습니다!
매우 간단합니다.

NestJS

참고로 NestJS에서 API도 작성해 보겠습니다.

server 디렉토리로 이동하여 컨트롤러를 작성합니다.

$ cd server
$ nest g controller cats
CREATE /src/cats/cats.controller.spec.ts (479 bytes)
CREATE /src/cats/cats.controller.ts (97 bytes)
UPDATE /app.module.ts (454 bytes)

생성된 컨트롤러를 수정합니다.

server/src/cats/cats.controller.ts

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get()
  findAll(): string {
    return 'This action returns all cats';
  }
}

그럼 실행합니다.

$ npm run serve

NestJS 실행 결과 확인

http://localhost:4200/api/cats 에 연결하면 API가 실행됩니다.
cats 컨트롤러에 설정된 값이 반환되었음을 확인할 수 있습니다!

참고 기사

Nest.js에서 컨트롤러 서비스 만들기

기타

앞에 된장이지만,,,
AngularUniversal에서 SSR을 실시했을 때에, 클라이언트와 서버로 2회 처리하고 있는 어떻게 하자・・・라고 곤란하면 아래 기사를 참고해 주세요.
AngularUniversal에서 클라이언트와 서버에서 두 번 API를 실행하지 않도록 방지