React 및 Puppeteer: PDF 생성(프로젝트 설정)

요약

서버와 React를 템플릿 엔진으로 사용하여 PDF 문서를 생성하는 방법을 자세히 설명하는 실험입니다.

왜

나는 과거에 @react-pdf/renderer를 사용했으며 이것은 내가 가진 몇 가지 문제를 해결하는 것을 목표로 합니다.

문제

작업할 구성 요소 세트가 제한됨

유지 보수가 느려졌으므로 해결되지 않은 문제에 대한 미래 전망이 밝지 않습니다

.

현재 라이브러리가 react 18에서 작동하지 않으므로 응용 프로그램을 react 18로 업그레이드하기 어렵습니다

.

목표

클라이언트 응용 프로그램에서 pdf 생성을 분리합니다

.

PDF 문서를 생성하는 간단한 서버 프로세스가 있습니다

.

UI 개발을 위해 React를 친숙한 라이브러리로 계속 사용

중요한 코딩 단계만 자세히 설명합니다. 단계에서 누락된 항목이 있으면 최종 소스 코드를 확인하십시오

.

사용자의 브라우저/클라이언트에서만 수행하면 안 되는 이유는 무엇입니까?

이는 반복 가능한 프로세스가 필요한 사용 사례를 위한 것입니다

.

이 시나리오에서는 PDF에 필요한 보기가 반드시 클라이언트에서 보고 있는 것이 아니기 때문에 단순히 인쇄 스타일을 만드는 것이 작동하지 않습니다

.

사용자가 모바일 응용 프로그램을 사용 중일 수 있음

참고: 실험에 사용된 목표, 라이브러리 및 특정 데이터 흐름은 모든 사용 사례가 이러한 모든 단계를 수행할 필요가 없기 때문에 순전히 주관적입니다. 주로 PDF가 생성되는 방법에 중점을 둡니다.

기술

반응: 템플릿 엔진으로 사용합니다. 다른 템플릿 엔진을 사용할 수 있습니다.

chakra ui: ui 라이브러리로 사용됩니다. 필요하지는 않지만 데모를 위해 사용하기 쉬운 구성 요소가 많이 있습니다. 대안을 사용할 수 있음

storybook: UI 개발 보조 라이브러리로 사용됩니다. 필요하지는 않지만 보기/pdf를 시각적으로 개발하는 데 사용하기에 좋습니다

.

Puppeteer: 인플레이스 html 렌더러 및 오케스트레이터로 사용: 대안도 사용할 수 있음

nx: 프로젝트 관리에 사용됩니다. 동일한 저장소에 여러 프로젝트를 생성합니다. Nx를 사용하면 모든 프로젝트를 쉽게 연결할 수 있습니다. 대안을 사용할 수 있음

TL;DR;

github에서 전체 프로젝트 보기:
https://github.com/lwhiteley/pdf-generation-experiment

git clone https://github.com/lwhiteley/pdf-generation-experiment
cd pdf-generation-experiment
pnpm i
pnpm nx run-many --target=serve --projects=pdf-server,ui-app

이러한 명령을 실행한 후 앱을 사용하여 전체 솔루션을 경험할 수 있습니다.

설정

프로젝트 생성 + 의존성 설치

npx create-nx-workspace --pm pnpm pdf-generation
# ? Enable distributed caching to make your CI faste: No

cd pdf-generation
pnpm add -D @nrwl/react @nrwl/nest @nrwl/storybook @nrwl/node
pnpm add pdf-lib puppeteer utf-8-validate sharp
pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons @chakra-ui/styled-system use-debounce axios
pnpm add -D @chakra-ui/storybook-addon
pnpm add interweave interweave-ssr

작업할 프로젝트 생성

pnpm nx g @nrwl/react:application ui-app
  # Choose: emotion
  # use router: Yes

pnpm nx g @nrwl/nest:application pdf-server

pnpm nx g @nrwl/node:library constants

pnpm nx g @nrwl/react:library pdf-doc

pnpm nx g @nrwl/storybook:configuration pdf-doc
  # Choose: @storybook/react 

메모:

chakra ui storybook 플러그인을 추가해야 합니다

.

문서: https://chakra-ui.com/getting-started/with-storybook

React 및 배포를 위한 pdf-server 구성

@babel/core에서 dependencies로 package.json 이동

in apps/pdf-server/project.json

세트targets.build.options.generatePackageJson: true

기본적으로 추가: "generatePackageJson": true json 파일

의 지정된 위치에

.babelrc에서 ui-app 파일을 복사하여 pdf-server 루트 폴더

에 넣습니다.

추가 "jsx": "react-jsx" in

앱/pdf-server/tsconfig.app.json

apps/pdf-server/tsconfig.spec.json

apps/pdf-server/src/main.ts와 같은 수준의 파일을 만듭니다.

// file: dependencies.register.ts

/**
 * We import dependencies that are missed by nx auto package.json creation
 */

import '@babel/core';
import '@emotion/styled';
import '@chakra-ui/styled-system';
import 'utf-8-validate';
import { polyfill } from 'interweave-ssr';

// view this file for environment config
import { environment } from './environments/environment';

polyfill();

// this could be moved to a helper library
export const createDirectory = (directory: string) => {
  if (existsSync(directory)) return false;
  mkdirSync(directory, { recursive: true });
  return true;
};

createDirectory(environment.tmpFolder);

그런 다음 가져옵니다main.ts.

import './dependencies.register.ts'

nestjs pdf 모듈 만들기

pnpm nx g @nrwl/nest:module pdf --project=pdf-server
pnpm nx g @nrwl/nest:controller pdf --project=pdf-server
pnpm nx g @nrwl/nest:service pdf --project=pdf-server

pdf-server를 ui-app에 프록시

파일 만들기apps/ui-app/proxy.config.json

{
  "/api": {
    "target": "http://localhost:3333/api",
    "pathRewrite": { "^/api": "" },
    "secure": false,
    "logLevel": "debug"
  }
}

그런 다음 apps/ui-app/project.jsontargets.serve.configurations.development에 다음을 추가합니다.

"proxyConfig": "apps/ui-app/proxy.config.json",
"open": true

이제 설정이 완료되었으므로 일부 코드를 작성할 시간입니다.