이 문서에서는 Express-React 프로젝트를 설정하고 구성하는 방법을 보여 드리겠습니다.

폴더 구조

React Express 응용 프로그램을 설정할 때 항상 다음 폴더 구조를 사용합니다.

├─app
├─build
├─frontend

app 디렉터리는 Express 백엔드 응용 프로그램을 수용합니다.

build 디렉토리는 프런트엔드 및 백엔드 어플리케이션

의 운영 버전을 저장합니다.

frontend 디렉터리는 React 프런트엔드 응용 프로그램을 저장합니다.

다른 폴더 구조를 자유롭게 사용할 수 있습니다. 이것은 제가 좋아하는 방식일 뿐입니다.

React 응용 프로그램 만들기

React 응용 프로그램을 만드는 것부터 시작합니다.이를 위해, 나는 create-react-appnpm 패키지를 사용할 것이다.
npm 패키지를 실행할 수 있습니다. npx 도구를 사용하지 않아도 됩니다.

npx create-react-app frontend

react 프로그램은 frontend 폴더에 생성됩니다.
설치가 정확한지 테스트해 봅시다.

cd frontend
yarn run start

yarn run start 명령은 React 개발 서버를 실행합니다.파일을 변경할 때마다react 프로그램을 자동으로 다시 컴파일하고 브라우저를 다시 불러옵니다!🚀
create-react-app 패키지는 frontend 디렉터리에 있는git 저장소를 초기화합니다.하지만, 프로젝트 루트 디렉터리에git 저장소가 있기를 바랍니다.frontend 디렉터리에 있는git 저장소를 삭제하려면 .git 디렉터리만 삭제하면 됩니다.

rm -rf .git

Express 응용 프로그램 만들기

우리는 이제 백엔드 Typescript Express 프로그램을 설정할 때가 되었다.
나는 우선 프로젝트 루트 디렉터리에 새 패키지를 만듭니다.
그런 다음 Express와 Typescript 종속성을 추가하여 app 디렉토리를 만듭니다.

yarn init
yarn add express @types/express typescript
mkdir app

이어서 나는 상당히 표준적인 tsconfig.json 파일을 만들었다.이 파일에는 Typescript를 Javascript로 컴파일하는 설정이 포함되어 있습니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "./",
    "outDir": "build",
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["es6"],
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
  },
  "include": [
    "**.ts"
  ],
  "exclude": [
    "./frontend"
  ]
}

나는 단지 백엔드에서 Typescript를 사용하고 싶다. 적어도 지금은 그렇다.이것이 바로 내가 frontend 디렉터리를 배제한 원인이다.
응용 프로그램 디렉터리에 서버 클래스를 포함하는 Server.ts 를 만들 것입니다.

import {Express, Request, Response} from "express";

export class Server {

    private app: Express;

    constructor(app: Express) {
        this.app = app;

        this.app.get("/api", (req: Request, res: Response): void => {
            res.send("You have reached the API!");
        })
    }

    public start(port: number): void {
        this.app.listen(port, () => console.log(`Server listening on port ${port}!`));
    }

}

이것은 구조 함수에서 Express 응용 프로그램을 수신하고 응용 프로그램의 루트를 초기화합니다.
현실 세계에서 나는 다른 클래스Router.ts를 만들 수 있다. 이 클래스는 모든 응용 프로그램 경로를 수용할 수 있지만 이것은 본고의 범위를 넘어섰다.
이 서버를 초기화하기 위해서 프로그램 루트 디렉터리에 index.ts 파일을 만들었습니다.이 모든 것은 새로운 서버 클래스를 만들고 서버를 시작하는 것입니다.

import {Server} from "./app/Server";
import express from 'express';
const app = express();

const port = 8080;

const server = new Server(app);
server.start(port);

백엔드 서버를 시작하기 위해 다음 코드 세그먼트를 package.json 파일에 추가합니다.패키지를 사용하여 Typescript 코드를 직접 실행합니다.
이렇게 하면 Typescript를 Javascript로 컴파일하는 것을 걱정할 필요가 없습니다. 이 모든 것이 당신을 위해 완성되었기 때문입니다.

"scripts": {
    "start": "npx ts-node index.ts"
}

이것이 바로 내가 아래 명령을 실행하는 서버를 시작할 수 있는 이유이다.

보상으로 Nodemon 파일을 변경할 때 ts 노드를 자동으로 다시 시작할 수 있습니다.

React 애플리케이션 구축

React 응용 프로그램의 생산 버전을 만듭니다.ts-node 파일을 변경합니다.React 응용 프로그램을 구축한 후에 구축 파일을 frontend/package.json 폴더로 이동하고 싶기 때문입니다./build/frontend 행을 찾아 업데이트합니다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv ./build ../build/frontend"
  },

"scripts" 명령을 실행해서 효과가 있는지 봅시다!🙌

mkdir build 
cd frontend
yarn run build

"build" 디렉터리로 이동하면productionready React 응용 프로그램을 볼 수 있습니다!

Express 애플리케이션 구축

yarn run build 파일에 새로운 /build/frontend 스크립트를 추가합니다.

"scripts": {
    "start": "npx ts-node index.ts",
    "build": "npx tsc"
  }

이것은 Typescript 컴파일러 패키지"build"를 간단하게 호출하여 컴파일할 것입니다. 원한다면 전송할 수도 있습니다.💁‍♂— Typescript를 Javascript로 변환합니다.
build 명령을 실행하여 유효한지 테스트합니다!

yarn run build

만약 모든 것이 정상이라면, 당신의 구축 디렉터리는 아래와 같이 해야 합니다.

build/
├─app/
├─frontend/
├─index.js

Express 및 React 연결

우리는 백엔드와 프런트엔드 응용 프로그램을 개발하고 구축할 수 있다.그러나 우리도 반응하기 위해 Express를 연결해야 한다.
예를 들어, 만약 내가 package.json 을 훑어보았다면, 나는 React 응용 프로그램을 볼 수 있을 것이다.
만약 내가 tsc 를 조회한다면, 나는 API 메시지를 볼 수 있을 것이다.
이를 위해 localhost:8080/류localhost:8080/api를 업데이트했습니다.

constructor(app: Express) {
    this.app = app;

    this.app.use(express.static(path.resolve("./") + "/build/frontend"));

    this.app.get("/api", (req: Request, res: Response): void => {
        res.send("You have reached the API!");
    });

    this.app.get("*", (req: Request, res: Response): void => {
        res.sendFile(path.resolve("./") + "/build/frontend/index.html");
    });
}

우선, 나는 constructor 디렉터리를 정적 자산 디렉터리로 표시한다.이것은 Express가 자동으로 이 디렉터리의 파일에 서비스를 제공한다는 것을 의미한다.
다음으로, 나는 어댑터 Server 루트를 추가하고, 그것을 모두 build/frontend 파일로 보냈다.이것은 React 프런트엔드 응용 프로그램을 저장하는 파일입니다.
백엔드 응용 프로그램을 다시 실행합시다.

yarn run start

*로 이동하면 React 응용 프로그램을 볼 수 있습니다.🎉
index.html로 이동하면 API 메시지가 표시됩니다.🔥

그렇습니다!소스 코드를 찾을 수 있습니다 here on Github🚀