노드를 사용하여 React 응용 프로그램을 설정합니다.js 서버 에이전트

Create React Application은 React 애플리케이션을 시작하고 실행하는 데 유용한 도구입니다.그러나 서버 측 구성 요소가 필요한 응용 프로그램을 구축하거나 원형화할 때 Twiliogenerating access tokens나Video 등은 잘 알려지지 않았다.나는 같은 프로젝트에서 서버를 사용하는 것이 가장 쉽다는 것을 발견했다. 그러면 명령으로 모든 것을 시작할 수 있다.
이 글의 마지막 부분에서, 리액션 프로그램과 함께 실행할 서버를 설정하는 법을 배울 것입니다.만약 네가 기다릴 수 없다면, 너는 바로 뛰어오를 수 있다 Chat.
Express
작업 원리
한 the starter project on GitHub 에이전트가 다른 백엔드에 요청하지 않았습니다.이 기능을 사용하면 다른 곳에서 실행되는 프로그램을 에이전트할 수 있지만, 오늘은 React 프로젝트 자체에서 서버를 실행하기를 희망합니다.
우리는 명령을 실행할 수 있도록, React 프로그램과 Express 서버를 동시에 실행할 수 있도록 npm 모듈 몇 개를 모을 것이다.

개시하다
이 문장의 나머지 부분을 따라가려면 노드가 필요하다.js와npm가 설치되어 있습니다.
먼저 Create React app를 사용하여 새 React 애플리케이션을 만듭니다.너는 전역적으로 package.json 패키지를 설치하지 않아도 이 점을 할 수 있다는 것을 알고 있니?대신 다음을 실행할 수 있습니다.

npm init react-app MyNewApp
cd MyNewApp

엔진 덮개 아래option that you can set in Create React App's text/html .
새 React 애플리케이션이 제대로 생성되었는지 확인합니다.

npm start

만약 네가 회전하는 표지를 보았다면, 우리는 시작할 수 있을 것이다.

서버 추가
서버 의존항을React 응용 프로그램 create-react-app 에 추가할 것입니다. 왜냐하면 이것은 구축 전단의 일부분이 아니기 때문입니다.npm init를 사용하여 서버를 중지하고 create-를 사용하여 Express 및 Body Parser를 설치합니다.

npm install express body-parser --save-dev

프런트엔드와 서버를 함께 실행할 수 있도록 다음 종속성을 추가합니다.

devDependencies takes an initializer name, prepends Cmd/Ctrl + C to it and uses npx to install and run the command - 개발 중인 프로필

node-env-run - 서버 변경 시 자동으로 서버를 재부팅하는 데 사용

Dominik's module for loading environment variables - 여러 npm 스크립트를 동시에 실행하는 데 사용

nodemon 및 npm-run-all - 더 나은 서버 로깅용

npm install node-env-run nodemon npm-run-all express-pino-logger pino-colada --save-dev

환경 변수를 저장하기 위해 프로젝트 디렉토리에 npm라는 파일을 생성합니다.아직 추가할 내용은 없지만 나중에 서버에 필요한 자격 증명(예: API 키)을 포함할 때 유용합니다.
다음에 프로젝트 디렉터리에 .env라는 새 디렉터리와 server 파일을 만듭니다.우리는 테스트할 수 있는 작은 프로그램을 만들 것이다.server/index.js에 다음 코드를 추가합니다.

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);

app.get('/api/greeting', (req, res) => {
  const name = req.query.name || 'World';
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ greeting: `Hello ${name}!` }));
});

app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
);

server/index.js를 열고 package.json 객체에 새 스크립트를 추가하여 "scripts" 및 node-env-run로 서버를 실행합니다.

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon | pino-colada"
  },

스크립트를 실행하여 서버가 제대로 작동하는지 테스트합니다.

npm run server

express-pino-logger를 열어 테스트를 진행합니다."Hello World!"인사해.URL에 nodemon 라는 검색 매개 변수를 추가해서 무엇을 얻을 수 있는지 보십시오.
pino-colada
서버 및 React 애플리케이션 실행
서버와 React 프로그램을 동시에 실행하려면 name에 더 많은 내용을 추가해야 합니다.
우선, 우리는 서버의 에이전트를 설정할 것이다.package.json키를 "proxy"에 추가합니다.우리는 이미 서버를 포트 3001에서 실행하도록 설정했기 때문에, 에이전트는localhost: 3001을 가리킨다.

"proxy": "http://localhost:3001"

서버와 프런트엔드를 동시에 실행하려면 스크립트가 필요합니다.이 작업은 package.json를 사용하여 수행합니다.두 개의 스크립트를 동시에 실행할 것이기 때문에, 병렬 모드를 사용하기를 희망합니다.npm-run-all npm-run-all 명령을 통해 우리에게 편리한 단축키를 제공하였다.run-p의 "scripts" 섹션에 다음을 추가합니다.

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start"
  },

package.json 를 실행하면 React 애플리케이션과 서버가 모두 시작됩니다.그러나 현재 브라우저에localhost:3000/api/greeting을 불러올 수 없습니다.Create-React-App 에이전트는 기본 HTML로만 응답하기 때문입니다.
React 애플리케이션 구성 요소에서 테스트해 보겠습니다.
http://localhost:3001/api/greeting
React의 프록시 서버 사용npm run dev 구성 요소에 폼을 추가합니다. 이 폼은 App 구성 요소로 인사말을 만들고 페이지에 표시됩니다.다음 구조 함수와 함수를 /api/greeting의 응용 프로그램 구성 요소에 추가합니다.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      greeting: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    fetch(`/api/greeting?name=${encodeURIComponent(this.state.name)}`)
      .then(response => response.json())
      .then(state => this.setState(state));
  }

이 양식을 src/App.js 함수의 JSX에 추가합니다.

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <form onSubmit={this.handleSubmit}>
            <label htmlFor="name">Enter your name: </label>
            <input
              id="name"
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
            <button type="submit">Submit</button>
          </form>
          <p>{this.state.greeting}</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

브라우저에서 React 응용 프로그램을 열고 이름을 입력하고 커밋합니다.인사말은 프록시 서버와 통화 중인 React 앱을 보여 줍니다.

이것은 단지 시작일 뿐이다
Create React Application은 React 응용 프로그램을 시작하는 데 매우 잘하지만, 서버 쪽 구성 요소가 필요하다면 매우 유연할 수 있다.본고에서, 당신은 render 옵션을 어떻게 사용하는지 알고, proxy 등 도구를 사용하여 Express 서버를 실행하는지 알고 있습니다.
Express API로 React 프로그램을 구축하려면 에서 이 문서의 모든 코드를 보고 시작점으로 사용할 수 있습니다.보상으로 React를 사용하여 또는 this GitHub repo 프로그램을 만들려면 Twilio Video를 되돌아오기Twilio Chat로 설정합니다.the Twilio branch의 지침을 따르기만 하면 됩니다.
access tokens를 사용하면 Express 서버에서 지원하는 React 응용 프로그램을 더욱 빠르고 쉽게 구축할 수 있습니다.나는 그것이 너에게 좋은 플랫폼을 제공하여 너로 하여금 자신의 생각을 세우게 할 수 있기를 바란다.나는 지체없이 네가 무엇을 지었는지 보고 싶다.