Parcel Development Server에 백엔드 API 프록시

Parcel로 작업할 때 백엔드 API를 프론트엔드 개발 서버로 프록시하는 옵션을 놓쳤습니다.

Parcel은 localhost:1234에서 실행되고 내 API 백엔드 서버는 localhost:1337에서 실행됩니다. API 서버와 프론트엔드 서버를 모두 동일한 사이트에 두고 싶습니다. 이렇게 하면 CORS를 처리할 필요가 없으며 SameSite=Strict 과 같은 쿠키에 대한 보안 설정을 사용할 수 있습니다.

프로덕션 환경에서는 이를 위해 일종의 역방향 프록시를 설정합니다. 이것은 예를 들어 NGINX으로 달성할 수 있습니다.

개발 환경에서 Hot Module Reloading과 같은 Parcel 기능을 계속 사용하고 싶을 것입니다.
parcel-bundler과 함께 http-proxy-middleware을 익스프레스 미들웨어로 사용하여 node.js 익스프레스 스크립트를 만들었습니다.

const proxy = require('http-proxy-middleware').createProxyMiddleware;
const Bundler = require('parcel-bundler');
const express = require('express');

const bundler = new Bundler('src/index.html');
const app = express();

app.use(
  '/api',
  proxy({
    target: process.env.API_SERVER || 'http://localhost:1337/'
  })
);

app.use(bundler.middleware());

app.listen(Number(process.env.PORT || 1234));

package.json에서 나는 소포 스크립트를 사용한 시작 스크립트를 node server으로 바꿨다.

데모 프로젝트로 https://yesno.wtf의 클론을 만들었습니다.
node.js 익스프레스 백엔드와 반응 애플리케이션을 제공합니다.

https://github.com/terabaud/yesno-clone

질문이나 피드백이 있습니까? 자유롭게 의견을 남겨주세요.