Angular Universal Rest API 끝점

NestJS를 사용한다면 REST API 끝점을 만드는 것이 얼마나 쉬운지 알 것입니다. 개인적으로 SvelteKit에서 필요에 따라 사용하는 앱을 만들고 있습니다. Nust도 그것들을 사용합니다. 나는 어딘가에서 "그들을 지원하는 프레임워크..."에 대해 이야기하는 기사를 읽었습니다.

Nuxt

SvelteKit

NextJS

Vercel이 File System API 때문에 NextJS에서 이것을 대중화하기 시작했다는 사실을 모를 수도 있습니다. 기본적으로 각 경로에 대한 콜드 스타트 ​​시간을 최소화하기 위해 각 Rest 끝점에 대한 서버리스 기능을 구축합니다.

Vercel은 AWS Lambda 50MB 제한으로 인해 Angular Universal App을 Vercel에 배포해서는 안 된다고 말했습니다. 압축을 풀면 실제로는 250MB입니다.

그래서 어쨌든 방법을 만들었습니다. 나는 반역자입니다.

이 게시물은 서버리스 기능을 고려하지 않았지만 Vercel에서 쉽게 할 수 있습니다. api 폴더에 새 파일을 추가하기만 하면 됩니다.

즉, 시작합시다.

handler.ts

루트 디렉터리에 handler.ts 파일을 만듭니다. 다음은 내 예제 내용입니다. 이것은 모든 경로를 처리하지만 다른 파일로 쉽게 분리할 수 있습니다.

export const handler = (req: any, res: any) => {
  const func = req.params[0];
  let r = 'wrong endpoint';

  if (func === 'me') {
    r = me();
  } else if (func === 'you') {
    r = you();
  }
  res.status(200).json({ r });
};

const me = () => {
  return 'some data from "me" endpoint';
};

const you = () => {
  return 'some data from "you" endpoint';
};

서버.ts

이 주석 처리된 행을 찾으십시오.

// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser

다음과 같이 변경하십시오.

// remember to import handler at top of page
import { handler } from 'handler';
...

// Example Express Rest API endpoints
server.get('/api/**', handler);

그리고 이것이 백엔드를 위한 것입니다!

그 부분이 쉬운 만큼 저는 여전히 Angular Universal이 이러한 것들을 단순화할 수 있다고 믿습니다.

app.component.ts

import { DOCUMENT, isPlatformServer } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { 
 Component, 
 Inject, 
 Optional, 
 PLATFORM_ID
} from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { REQUEST } from '@nguniversal/express-engine/tokens';

declare const Zone: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'angular-test';

  data!: string;
  baseURL!: string;
  isServer: Boolean;

  constructor(
    @Inject(PLATFORM_ID) platformId: Object,
    @Optional() @Inject(REQUEST) private request: any,
    @Inject(DOCUMENT) private document: Document,
    private http: HttpClient
  ) {
    this.isServer = isPlatformServer(platformId);

    // get base url
    if (this.isServer) {
      this.baseURL = this.request.headers.referer;
    } else {
      this.baseURL = this.document.location.origin + '/';
    }

    // grab data
    this.getData().then((data) => this.data = data.r);
  }

  async getData(): Promise<any> {
    return await firstValueFrom(
      this.http.get(this.baseURL + 'api/me', {
        headers: {
          'Content-Type': 'application/json',
        },
        responseType: 'json'
      })
    );
  };
}

따라서 여기에는 몇 가지 핵심 개념이 있습니다.

HttpClient를 사용하여 데이터를 가져옵니다. Angular는 이것을 observable로 반환하므로 이를 약속합니다. HttpClientModule 의 가져오기에 app.module.ts 를 추가하는 것을 잊지 마십시오.

서버가 기본 URL이 무엇인지 모릅니다. npm run dev:ssr 테스트에 관심이 없다면 걱정할 필요 없이 전체 URL을 사용하면 됩니다. 그러나 로컬 및 프로덕션에서 작동하려면 올바른 baseURL을 가져와야 합니다. 요청 개체의 헤더로 전달되므로 서버의 해당 개체에서 가져옵니다. 브라우저에서는 원점에서 가져옵니다. 이를 수행하는 방법에는 여러 가지가 있지만 DOCUMENT 경로를 사용했습니다.

<h1>{{ data }}</h1>를 app.component.html 파일에 추가합니다.

예시

여기 이 걸작이 있습니다.

https://angular-endpoint-test.vercel.app/

그리고 물론 Github .

두 번 가져 오지 마십시오

수행해야 할 단계가 하나 더 있는데 간결함을 위해 생략했습니다. Angular는 REST API 끝점을 두 번 가져옵니다. 서버에서 한 번, 브라우저에서 한 번입니다. 이는 필요한 것보다 한 번 더 읽을 수 있음을 의미합니다.

이제 내 예제는 실제로 두 번 가져오지만 서버에서 한 번 가져오고, DOM을 채우고, 데이터를 JSON 문자열로 저장하고, 증분 DOM에 데이터를 다시 적용할 수 있습니다.

나는 이미 Angular에서 이것에 대한 기사를 썼습니다.

따라서 이것도 구현해야 합니다.

행복한 Angular Universaling,

제이