이거 왜 올려요?

Angular는 내가 지난 몇 년 동안 선택한 전단 프레임워크이다. 나는 줄곧 그것을 매우 좋아했다.그러나, 전체 창고의 웹 응용 프로그램을 만들려면 요구의 절반만 덮어씁니다.한동안 나는 그것을 NestJS와 배합하여 여러 항목에서 매우 잘 운행해 왔다.
나는 줄곧 친구와 동료에게 이런 조합을 추천했기 때문에 마지막으로 내가 참고/기점으로 사용하는 설정을 쓰고 싶다.아마도 이 문장은 너도 한번 시도해 보라고 격려할 것이다.만약 그렇다면, 그것이 어떻게 당신을 위해 일하는지 알려 주세요.
TLDR: Angular은 본 사례의 전단 프레임워크가 될 것입니다. 우리는 NestJS을 백엔드로 사용할 것입니다. 이 모든 것은 Nx 작업 구역에서 행복하게 결합될 것입니다.우리는 삶의 질 개선을 도입하고 이 두 항목을 하나의 가방에 묶을 것이다.
간단히 돌이켜 보면 NestJS는 추상적인 층으로 Express나 Fastlify 위에 위치하고 이 두 가지 NodeJS는 모두 REST 프레임워크를 지원한다.이것은 Typescript로 작성된 것으로 Angular에서 발견된 많은 동일한 패턴 (주석, DI 등) 을 따른다.Nx는 전 구글이 개발한 도구로 모노포스 개발을 도왔다.그것들은 또한 상당히 합리적인 기본 선택과 설정 덮어쓰기를 제공했다.
준비됐어요?가자!

비계

우선 새 Nx 작업공간을 설정하고 Angular 및 NestJS 응용 프로그램을 만듭니다.

⇒  npx create-nx-workspace@latest

? Workspace name (e.g., org name)     my-fullstack-project
? What to create in the new workspace angular-nest      
? Application name                    client
? Default stylesheet format           CSS
? Use the free tier of the distributed cache provided by Nx Cloud? No  
// (to keep things simple for now)

완료되면 다음 작업이 완료됩니다.

작업공간 이름

의 새 디렉터리 만들기

apps/client에 있는 새로운 각도 항목 생성

apps/api 아래에 있는 새 NestJS 프로젝트 만들기

작업공간에서 예시 typescript 라이브러리 생성 - 클라이언트와api(libs/api-interfaces 아래에 있음)

사용
또한 Nx는 다음과 같은 두 항목에 대한 개선 도구를 제공합니다.

은 Jest over Karma를 단원 테스트 실행자로 사용하여

Cypress over 각도기로 E2E 규격 측정(각도만)

Prettier 자동 포맷 코드 사용

전체 작업공간의 체면 TSLint 설정

Nx는 tons more features을 제공했지만 이것은 내가 지금 지적하고 싶은 것이다.

프로젝트 실행

지금 우리는 이미 기본 프로젝트를 세웠으니, 그것들을 가동할 때가 되었다.터미널 창 2개를 열고 다음 명령을 실행합니다.

[Terminal 1]: npm run nx -- serve client
[Terminal 2]: npm run nx -- serve api

첫 번째 명령은 기본 Angular dev 서버를 실행하고 http://localhost:4200에서 전방에 서비스를 제공합니다.두 번째는 NestJS 개발 서버를 시작하여 Typescript를 NodeJS와 호환되는 자바스크립트로 컴파일하고 http://localhost:3333/api에서 결과를 제공합니다.좋은 보상으로 Nx는 Angular dev 서버에 프록시 설정을 추가했습니다. http://localhost:4200/api의 요청 프록시를 NestJS dev 서버에 추가합니다. 그러면 우리가 개발할 때 어떠한 CORS 문제도 겪지 않을 것입니다.프록시 설정은 apps/client/proxy.conf.json에서 찾을 수 있으며 angular.json 프로젝트 정의 파일에서 참조할 수 있습니다.
현재 http://localhost:4200에서 브라우저를 열면 다음과 같은 페이지를 볼 수 있습니다.

네트워크를 확인하고 새로 고치면 http://localhost:4200/api/hello으로 전송된 XHR 요청을 볼 수 있으며 에이전트가 올바르게 설정되어 있음을 나타냅니다.

잠깐만, 뭐야?

무슨 일이 일어났는지 설명해 드릴게요.
NestJS 프로젝트는 모든 컨트롤러에 사용할 접두사를 구성합니다.이 접두사는 다음과 같이 정의됩니다(apps/api/src/main.ts)

  const globalPrefix = 'api';
  app.setGlobalPrefix(globalPrefix);

Nx는 또한 AppController(apps/api/src/app/app.controller.ts)라는 예시 REST 컨트롤러를 생성하여 현재 정적 블록에 서비스를 제공하고 있습니다. 이 예에서 Typescript 인터페이스 Message의 대상은 다음과 같이 정의됩니다(libs/api-interfaces/src/lib/api-interfaces.ts).

export interface Message {
  message: string;
}

인터페이스 Message은 공유 라이브러리에 정의되어 있기 때문에 앞부분과 뒷부분을 모두 사용할 수 있습니다.두 항목 모두 안전합니다!
AppController 메소드 설명은

  @Get('hello')
  getData(): Message {
    return this.appService.getData();
  }

이것은 NestJS가 서버가 실행될 때 http://localhost:3333/api/hello에 새로운 GET 노드를 공개하고 우리의 메시지 대상을 되돌려준다고 알려 줍니다.
창고의 다른 한쪽에 Angular 프로젝트가 있습니다. 이 프로젝트는 이 정확한 단점에 대한 예시 GET 요청을 실행하도록 설정되어 있습니다.예제 코드는 apps/client/src/app/app.component.ts 아래의 프런트엔드 AppComponent에서 찾을 수 있습니다.

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

템플릿에서 비동기식 파이핑을 사용하여 직접 호출:

<div>Message: {{ hello$ | async | json }}</div>

현재 Angular dev 서버가 http://localhost:4200에서 실행되고 있기 때문에 httpClient 호출 중의 상대적인 경로로 인해 요청은 http://localhost/4200/api/hello으로 넘어갑니다.이것은 Angular proxy 구성에서 가져와 NestJS 서버로 전달됩니다.경탄했어🎉

개발을 위한 애플리케이션 조정

축하합니다. 현재 작업 영역이 하나 있습니다. NestJS와 Angular가 나란히 실행되고 있으며, 백엔드에서 어떻게 호출하는지에 대한 예시 코드가 있습니다.이것은 이미 상당히 괜찮다!
더 좋은 개발 체험을 얻기 위해 내가 좋아하는 것은 명령으로 전단과 백엔드 개발 서버를 병행 시작하는 것이다.이를 위해, 우리는 concurrently이라는 노드 조수를 설치할 것이다.

npm install --save-dev concurrently

완료되면 package.json을 다음과 같이 조정할 수 있습니다.

"start:fe": "ng serve client",
"start:be": "ng serve api",
"dev": "concurrently -p=\"{name}\" -n=\"Angular,NestJS\" -c=\"green,blue\" \"npm run start:fe\" \"npm run start:be\"",

현재 npm run dev을 실행하면 두 개의 dev 서버를 동시에 시작합니다. "Angular"또는 "NestJS"를 사용하여 터미널의 줄마다 접두사를 추가하고 접두사를 녹색과 파란색으로 칠합니다.경탄했어

단일 서버에서 프로덕션을 위한 프런트엔드 및 백엔드 서비스 제공

자, 이제 우리는 완전한 창고 응용 프로그램을 개발할 수 있습니다.마지막으로, 우리는 응용 프로그램을 실행 가능한 npm 패키지로 포장합니다. 이 패키지는 우리의 전단과 백엔드에 동시에 서비스될 것입니다.
이를 실현하기 위해, 우리는 Angular 응용 프로그램의 생산 구축을 만들고, NestJS 서버를 루트 경로 아래에서 전방에 서비스를 제공하도록 설정할 것이다. 그러면 우리는 둘을 하나의 포함된 패키지에 묶을 수 있다. (클라우드 파운드리나 다른 클라우드 공급업체에 배치할 수 있다.)
우선, 우리는 각도 전단의 생산 구축을 만들 것이다.

⇒  npm run nx -- build client --prod

> [email protected] nx /Users/hrichert/Projects/my-fullstack-project
> nx "build" "client" "--prod"


> ng run client:build:production
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

// ... A few seconds later...

Date: 2020-06-17T16:14:41.427Z - Hash: 4957569a994e1b83d273 - Time: 34832ms

현재 우리의 전단 컴파일(축소, 추함, 다충전) 출력은 dist/apps/client에서 찾을 수 있다
이 폴더의 루트 경로에 액세스할 때 서비스를 제공하기 위해 NestJS를 구성합니다.
우선 NestJS serve-static 패키지를 설치하여 정적 자산 서비스를 지원합니다.

npm install --save @nestjs/serve-static

지금 우리가 해야 할 일은 AppModule(ServeStaticModule)에서 이 패키지에서 제공하는 apps/api/src/app/app.module.ts을 가져오고 설정하는 것이다

import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

// ...

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'client'),
    }),
  ],
  // ...
})
export class AppModule {}

이것은 NestJS가 자신의 dist 폴더(../client)에서 dist/apps/api까지 옮겨다니며 루트 경로에 내용을 제공하도록 지시합니다.
역시, 우리가 Angular dev 서버를 실행할 때, npm run start:be을 통해 백엔드만 실행하고 http://localhost:3333/으로 내비게이션하면 이전과 같은 결과가 발생할 것이다.

배포를 위한 어플리케이션 패키지

현재 모든 내용을 npm 패키지에 묶는 것만 남았을 뿐, 우리는 우리의 완전한 창고 응용 프로그램을 배치할 수 있다.우리 지금 이대로 하자.
우리는 가방을 편집해야 한다.json은 dist 파일만 포함하고 편의를 위해 시작 스크립트를 추가합니다.

{
    ...
    "files": ["dist/apps/client", "dist/apps/api"],
    ...
    scripts: {
    "serve": "node dist/apps/api/main.js",
    ...
    }
}

현재 npm pack을 실행하면 프로젝트 디렉터리에 tarball 파일을 생성합니다.

⇒  npm pack
npm notice
npm notice 📦  [email protected]
npm notice === Tarball Contents ===
// ...
npm notice === Tarball Details ===
npm notice name:          my-fullstack-project
npm notice version:       0.0.0
npm notice filename:      my-fullstack-project-0.0.0.tgz
npm notice total files:   14

이제 이 패키지를 가장 좋아하는 클라우드 공급업체에 업로드할 수 있습니다. 업로드 후 npm install --production을 실행하고 serve 스크립트를 패키지의 시작 명령으로 사용할 수 있습니다. (이 단계는 클라우드 공급업체에 따라 다릅니다.)
물론, 이 패키지를 로컬에서 실행할 수도 있습니다. tarball 파일의 압축을 풀고 디렉터리에서 npm install --production을 실행한 다음 npm run serve을 실행할 수 있습니다.
나는 이 문장이 너에게 도움이 되기를 바란다.만약 당신이 어떤 중요한 절차를 놓쳤다면, 저에게 알려주세요!분명히 지금 우리는 이 설정을 가지고 있다. 우리는 더 많은 일을 할 수 있다. 예를 들어 전단이나 백엔드가 실행될 때 유형 검증, 같은 작업 구역에서 공유 라이브러리를 사용하여 전단과 백엔드를 공유하는 논리 등이다. 만약 당신이 이런 주제에 관심이 있다면, 나는 후속 글을 쓰기를 매우 좋아한다.
읽어주셔서 감사합니다!