문제를 해결하기 위해 react app와 Express를 만듭니다.

인터넷에서 프로그램이나 사이트를 시작하고 실행하는 가장 빠른 방법이지만, 한 포트에서만 프로그램을 실행합니다.예를 들어create-react 프로그램과 백엔드를 사용할 때 더 많은 것을 필요로 할 때가 있습니다.다음은 어떻게 프록시 중간부품과 일부 포트 교환 논리를 사용하여 이 제약을 해결합니까!

문제.

Glitch의 원격 개발은 많은 장점이 있다. 응용 프로그램이나 웹 사이트를 웹에서 실시간으로 시작하고 실행하는 가장 빠른 방법으로 웹 개발의 많은 번거로운 부분을 추상화할 뿐이다.이것은 어느 정도에 내가 구축하고자 하는 대부분의 생각의 시도였지만, 나는 가끔 작은 감속대를 만날 수 있다. 이런 감속대는 전형적인 현지 개발 환경에서 진정한 문제가 아니다.
이러한 감속은 Glitch가 한 포트에서만 내용을 제공하는 것이다.이것은 보통 문제가 아닙니다. 같은 프로젝트에서 전방 작업에 사용되는 웹 패키지 개발 서버와 백엔드 서버를 동시에 실행하려고 시도하지 않으면, 서비스 자원에 사용할 포트를 얻을 수 있지만, 전방과 백엔드 서버는 모두 자신의 포트가 필요합니다.create-react-app으로 전단을 구축하고 Express으로 후단을 구축할 때 이것은 흔히 볼 수 있는 장면이다.
더 중요한 것은Glitch의watcher는 파일 변경의 실시간 미리보기를 제공하지만,create react 응용 프로그램의 웹 개발 서버도 마찬가지입니다!
네?우리는 화목하게 지낼 수 없습니까?
(스포일러: 그래, 그래, 우리는 할 수 있어.)

솔루션

우리 팀이 11월 국회 기록 web app 활동을 위해 Capitol Royale을 건설했을 때 나는 이 문제에 부딪혔다.
Glitch에서 노드 프로그램을 만들 때 starter 항목은 서버를 포함합니다.기본 Express 서버의 js 파일을 실행합니다.이 서버는 응용 프로그램의 각 부분에 대한 루트를 처리하고 감청 포트 3000.1로 설정합니다
이와 유사하게 create-react-app을 사용하여React 응용 프로그램을 만들면 react-scripts은 웹 개발 서버를 시작하고 기본적으로 이 서버도 포트 3000을 감청합니다.
그렇다면, React 프로그램을 사용하고 있지만, Express 백엔드를 추가하고 싶을 때, 어떤 일이 일어날까요?
기본적으로 우리의 업무 방식은 다음과 같다.
패키지에서 start 스크립트를 "npm run production"으로 설정하면

입니다.json, React 프로그램을 구축할 것입니다. Express는 포트 3000을 통해 정적 묶음 서비스를 제공합니다.하지만!

패키지에서 start 스크립트를 "npm run development"으로 설정하면

입니다.json, 웹 패키지 dev 서버/watcher, Express 서버를 동시에 시작합니다.후자는 3001포트를 감청할 것입니다. 그러나 코드의 어떤 내용도 변경할 필요가 없습니다. 왜냐하면: 에이전트!

😲 이게 무슨 마법이야

이것은 몇 가지 이동 부분 덕분이다. 한 에이전트가 어떤 포트의 요청을 감청하여 다른 포트로 전송하고, 환경 변수를 검사해서 어느 포트를 감청해야 하는지 알 수 있도록 하는 스크립트와 서버 측 논리도 있다.우리 시작합시다!

대리인

우리는 단지 하나의 포트만 사용할 수 있기 때문에, 우리는 일부 포트의 요청을 감시하고, 에이전트를 통해 그것들을 백엔드 서버로 전송하기를 희망한다.
src/setupProxy를 만드는 경우js,React는 개발 서버(details here)를 시작할 때 자동으로 등록됩니다.따라서 src/setupProxy에 추가합니다.js 파일:

const proxy = require("http-proxy-middleware");

// This proxy redirects requests to /api endpoints to
// the Express server running on port 3001.
module.exports = function(app) {
  app.use(
    "/api",
    proxy({
      target: "http://localhost:3001"
    })
  );
};

React와 에이전트가 여기서 하는 일은 본질적으로 함께 하는 것이다. "네, /api에 대한 어떠한 요청도 정적 자산에 대한 요청이 아니기 때문에 목표에게 전달합니다. 목표는 Express 서버입니다. http-proxy-middleware 을 소포에 넣는 것을 잊지 마세요.src/setupProxy에서 json 파일.js require이 바로 그것입니다.
재미있는 사실!'Globbing'은 이상하게 들리는 단어지만, 에이전트에'/api'만 추가하면'/api/ping','/api/user/:userid'등 루트를 목표물에 정확하게 보낼 수 있다는 뜻이다. - 우리는 함수에 가능한 모든 루트를 추가할 필요가 없기 때문에 우리의 생활을 더욱 가볍게 할 수 있다.

항구.

대리인이 도착한 후 항구의 상황은 지금 그다지 사람을 곤혹스럽게 하지 않는다.그러나 Glitch는 여전히 하나의 포트에만 서비스를 제공하기 때문에 우리는 작업 모델에 따라 약간의 전환을 해야 한다.

development 모드에서 웹팩 dev 서버 감청 포트 3000 모드에서 우리는 Express를 감청 포트 3001으로 설정하고 상기 방식을 통해 모든 요청을 /api 포트로 에이전트합니다.

은 production 모드에서 웹 패키지 개발 서버가 없기 때문에 저희는 Express를 감청 포트 3000으로 설정하고 Express는 정적 자원 서비스입니다.

바꾸다

npm run production인지 npm run development인지 여부에 따라 다른 서버 및/또는 에이전트가 실행되고 NODE_ENV이 production 또는 development으로 설정되므로 한 애플리케이션에서 변경할 필요가 없습니다.환경 파일.NODE_ENV의 값을 설정하면 가방에서 완성하는 것이 좋습니다.json의 scripts:

"scripts": {
    "start": "npm run development",
    "development": "NODE_ENV=development concurrently --kill-others \"npm run client\" \"npm run server\"",
    "production": "npm run build && NODE_ENV=production npm run server",
    "client": "react-scripts start",
    "server": "node server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

우리가 위의 스크립트에서 한 것은 development과 production을 정의하는 것이다.development에서 NODE_ENV을 development으로 설정하고 concurrently 패키지를 사용하여 전면 Webpack 서버(client)와 Express 서버(server) 스크립트를 동시에 실행합니다.이것은 로컬 기기에서 두 개의 단말기를 켜는 것과 같다. 하나는 npm run client을 실행하고, 다른 하나는 npm run server을 실행한다.production에서 우리는 React 응용 프로그램을 구축하여 NODE_ENV을 production으로 설정한 다음에 Express 서버를 시작합니다.
너무 좋아요!그러나 Express가 각 모드에서 어떤 포트를 사용하는지 알려주는 문제는 여전히 존재한다. 우리는 Express가 development에서 3001포트를 사용하고 production에서 3000포트를 사용하기를 바란다.우리는 서버/서버에서 이 문제를 처리한다.js, 파일 끝에 약간의 논리가 있습니다. 이것은 NODE_ENV의 값을 검사하고 탐지기의 포트를 적당히 설정합니다.

let port;
console.log("❇️ NODE_ENV is", process.env.NODE_ENV);
if (process.env.NODE_ENV === "production") {
  port = process.env.PORT || 3000;
  app.use(express.static(path.join(__dirname, "../build")));
  app.get("*", (request, response) => {
    response.sendFile(path.join(__dirname, "../build", "index.html"));
  });
} else {
  port = 3001;
  console.log("⚠️ Not seeing your changes as you develop?");
  console.log(
    "⚠️ Do you need to set 'start': 'npm run development' in package.json?"
  );
}

const listener = app.listen(port, () => {
  console.log("❇️ Express server is running on port", listener.address().port);
});

구체적으로 NODE_ENV=development이면 포트 익스프레스 탐청은 3001으로 설정하고 서비스 자산을 웹팩 dev 서버에 위탁한다.또한 콘솔에 메시지를 인쇄하였으며, 개발 과정에서 변경 사항을 보지 못하면 가방의 start 스크립트가 변경되었는지 확인해야 할 수도 있습니다.json에서 npm run development까지.
마찬가지로 NODE_ENV=production이면port Express 탐지기는 3000으로 설정되고 /build 디렉터리에 정적 자원을 서비스하기 위한 루트를 추가합니다.

👀 관찰자

현재, 우리는 요청을 그들이 필요로 하는 곳으로 가게 할 수 있다. 개발 모델에서 웹 패키지 개발 서버에 서비스를 제공하고, API 요청을 Express 서버로 에이전트할 수 있다. 생산 모델에서, 우리는 Express 서버로 하여금 API 포트와 서비스 정적 자원을 처리하게 한다.그런데 우리 아직 안 끝났어!
우리가 프로젝트에서 해결하고 싶은 마지막 일은 파일을 보는 것이다.Webpack 개발 서버와 Glitch는 파일의 변경 사항을 감시하고 입력할 때 live app를 자동으로 업데이트합니다.이런 빠른 피드백 외관은 당신의 수정을 미리 보는 데 매우 편리하지만, 우리는 관찰자가 서로 방해하는 것을 원하지 않습니다!
Webpack watcher는 프로젝트가 development 모드에 있을 때만 시작하고/src 디렉터리의 변경 사항을 감시합니다.우리는 그곳에 들어가서 너무 많은 변경을 할 수 없지만, 그럴 필요는 없다. 고장 관찰자에게/서버 폴더의 변경 사항만 볼 수 있도록 알려주는 것이 필요하다.
이를 위해 프로젝트 루트 디렉토리에 다음과 같은 특수 watch.json 파일을 추가했습니다.

{
  "install": {
    "include": [
      "^package\\.json$",
      "^\\.env$"
    ]
  },
  "restart": {
    "exclude": [
      "^public/",
      "^src/"
    ],
    "include": [
      "^server/",
      "^watch\\.json$"
    ]
  },
  "throttle": 100
}

여기서 Glitch의 관찰자를 위해 몇 가지 조건을 지정합니다.

패키지를 변경할 때만 install 스크립트를 실행하기를 원합니다.제이슨과.환경 파일.설치에 시간이 걸릴 수 있기 때문에 다른 변경 사항으로 터치하고 싶지 않습니다.

/server 폴더나watch에서만 변경할 때 restart에서 이 항목을 삭제합니다.json 파일.우리는 손목시계를 포함한다.재부팅이 필요하지 않도록 json - throttle 값을 변경하면 이 동작이 실행됩니다.리셋을 시작하기 위해/public/src 디렉터리에 있는 모든 파일을 현저하게 무시했습니다. - Webpack watcher가 이 파일들을 처리하기를 원합니다.

throttle을 100으로 설정하면 오류 모니터가 100ms를 기다린 다음 프로그램을 다시 시작합니다.만약 이것이 너무 빨라 보인다면, 너는 그것을 늘릴 수 있다.

이런 변화가 있으니, 우리는 출발할 준비가 되었다!원클릭 솔루션을 원하는 경우 이 엔트리 애플리케이션을 다시 혼합하십시오.

서버/서버에 API 라우트를 추가합니다.js (서버가 시작되었는지 확인하기 위해 GET에서 /api/ping까지의 경로로 시작했습니다) src 디렉터리에 React 프로그램을 구축합니다. (당신이 알고 있는 create-react-app starter 프로그램이 이미 거기에 있습니다. 공격을 시작할 수 있습니다.)

재미있게 놀았어요. 당신의 제품을 우리에게 보여주는 것을 잊지 마세요

---

¹은Glitch에서 포트 처리에 미묘한 점이 있습니다. 본문에서 설명을 건너뛰겠습니다.긴 말은 짧게 하자면Glitch는 백엔드에서 몇 가지 작업을 했고 실제로는 몇 개의 포트에서 실행되는 응용에 서비스를 제공했다.예를 들어, 기본 ~hello-node 프로젝트의 Express 서버는 3000을 사용하지만 포트 8000과 8080은