제목: Express와 React의 MERN 스택 구성 문제 해결하기
소개
MERN 스택을 사용하다가 React 컴포넌트 내에서 양식을 통해 데이터를 Node.js API 엔드포인트로 전송하려고 할 때 문제가 발생하는 경우가 있습니다. 이 문제는 일반적으로 Node 백엔드와 React 프론트엔드가 서로 다른 포트에서 실행되는 것과 관련이 있을 수 있습니다. 이 블로그 포스트에서는 이 문제를 해결하기 위한 솔루션을 제시하고, MERN 스택을 구성하여 일반 양식 POST를 사용하고 프론트엔드와 백엔드를 동일한 포트에서 실행할 수 있게 할 것입니다.
솔루션 1: Express를 사용한 역방향 프록시 설정
React가 기본 포트(3000)에서 실행되는 별도의 create-react-app(CRA)와 Node 백엔드가 다른 포트(예: 5000)에서 실행되는 경우, 역방향 프록시를 사용하여 React 프론트엔드에서 백엔드로의 요청을 전달할 수 있습니다. 이를 위해 백엔드 코드용 서버 폴더를 만들고 Express를 설정하여 원하는 포트(예: 5000)에서 대기하도록 구성합니다. 클라이언트 폴더에서는 package.json 파일을 수정하여 프록시 구성을 포함해야 합니다.
/server/index.js
const express = require('express');
const app = express();
app.get('/api/hello', (req, res) => res.send('Hello World!'))
app.listen(5000, () => console.log('Example app listening on port 5000!'))
/client/package.json
"proxy": {
"/api/*": {
"target": "http://localhost:5000"
}
}솔루션 2: Nginx를 사용한 프록시 구성 처리
프로덕션 환경에서는 Nginx와 같은 도구를 사용하여 역방향 프록시를 구성할 수 있습니다. Nginx는 정적 파일(React 앱, 스타일 등)을 제공하고 API 요청을 Node 백엔드로 프록시로 전달할 수 있습니다. API 요청을 결정하는 “/api/”와 같은 마스크를 지정하여 해당하는 백엔드 서버로 리디렉션할 수 있습니다.
솔루션 3: Docker를 사용한 단일 포트 사용
MERN 프로젝트를 배포하기 위해 Docker를 사용하는 경우, React 앱을 빌드하고 Express 백엔드와 함께 한 개의 포트에서 제공할 수 있습니다. 이 방법은 프론트엔드를 빌드하고 Express 정적 파일로 서비스하는 Dockerfile을 생성하는 것을 포함합니다. 이를 통해 프론트엔드와 백엔드를 동일한 포트에서 실행할 수 있으므로 배포 프로세스를 단순화할 수 있습니다.
솔루션 4: React에서 백엔드 API 직접 호출하기
더 간단한 접근 방식을 선호하는 경우, React에서 Node 백엔드의 API 엔드포인트를 직접 호출할 수 있습니다. 이 방법은 역방향 프록시가 필요하지 않지만 서로 다른 출처에서의 요청을 허용하려면 서버에서 CORS(Cross-Origin Resource Sharing)를 처리해야 합니다.
결론
이러한 솔루션 중 하나를 따르면 MERN 스택을 효과적으로 구성하여 Express 백엔드와 React 프론트엔드를 동일한 포트에서 실행할 수 있습니다. 역방향 프록시, Nginx, Docker를 사용하거나 직접 API 호출을 수행하는 방법 중에서 프로젝트 요구 사항에 가장 적합한 솔루션을 선택하고, “Cannot POST” 오류를 해결하고 프론트엔드와 백엔드 컴포넌트 간의 원활한 통신을 보장하세요. 적합한 솔루션을 구현하여 원활한 MERN 스택 개발 경험을 즐기세요.
