분류 Reactjs

동일한 출처의 백엔드에 React 앱을 연결하는 방법

컨텐츠 정보

  • 조회 275 (작성일 )

본문

서버에서 CORS를 사용하지 않고 포트에 대해 걱정할 필요 없이 동일한 출처에서 React 및 서버 측 백엔드 앱을 제공하는 방법


React 앱을 시작하는 가장 많이 사용되는 방법은 create-react-app를 사용하는 것입니다. 매우 편리합니다.


걸려 넘어 질 수 있는 한 가지 문제는 이미 가지고 있는 백엔드 또는 만들려는 백엔드에 연결하는 방법입니다.


개발 중 


앱을 개발할 때 핫 리로딩 및 create-react-app의 다른 모든 편리한 기능을 활용하고 싶습니다. 서버에서 CORS를 사용하지 않고 포트에 대해 걱정하지 않고 어떻게 백엔드와 결합 할 수 있습니까?


포스트에서 Express를 사용하는 예제를 제공하려고 하지만 다른 프레임워크에도 적용됩니다.


이것을 테스트한다고 가정하면 React 앱을 만들어 봅시다.

npx create-react-app testing
cd testing


이제 server.js 파일에 간단한 Express 서버를 작성하면 원하는 위치에 추가 할 수 있습니다. 심지어 별도의 폴더에 있을 수도 있습니다.


create-react-app 애플리케이션 코드 내에 이 파일을 추가하도록 선택한 경우 다음을 실행하십시오.

npm install express


이제 준비가 되었습니다. 이 간단한 Express 설정을 추가하십시오.

const express = require('express');
const app = express();

app.get('/hey', (req, res) => res.send('ho!'))

app.listen(8080)


여기서 중요한 점은 package.json 파일을 열고 이 행을 어딘가에 추가하십시오.

"proxy": "http://localhost:8080"


이는 React에게 Express로 빌드 된 Node.js 서버에 대한 프록시 API 요청을 지시합니다.


이제 node server.js를 사용하여 이 노드 프로세스를 실행하십시오. 다른 창에서 npm start를 사용하여 CRA 앱을 시작합니다.


브라우저가 포트 3000 (기본적으로)에서 열리면 DevTools를 열고 다음을 실행하십시오.

fetch('/hey')


네트워크 패널을 확인하면 Ho! 메시지.


생산 중 


프로덕션 환경에서는 배포 할 준비가 되면 npm run build를 실행하고 Express 서버를 사용하여 해당 정적 파일을 제공합니다.


전체 프록시는 이제 쓸모가 없습니다. 프로덕션에서도 작동하지 않습니다. 개발을 쉽게하기 위한 것입니다. 편리한 경우 package.json 파일에 그대로 둘 수 있습니다.


아래 코드에서 경로 내장 노드 모듈이 필요하며 앱에 React 앱의 정적 빌드를 제공하도록 지시합니다.

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'build')))

app.get('/ping', (req, res) => {
  return res.send('pong')
})

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
})

app.listen(8080)