리액트 프록시(Proxy)

리액트 프록시

프록시에 대해서 알아가기(1)

 //server.js
 const express = require('express');
 const httpProxy = require('http-proxy');
   
 const app = express();
 const proxy = httpProxy.createProxyServer();
 
 app.use(express.static(__dirname + '/public'));
 
 app.all('/api/*', function(req, res) {
   // 스프링부트 서버 URL
   proxy.web(req, res, { target: 'http://localhost:8080' });
 });
 
 app.listen(3000, function() {
   console.log('Proxy server is running on port 3000');
 });
 

코드내용)

1. 위 코드에서는 Express를 사용하여 3000번 포트에서 Proxy 서버를 구동하며, 모든 /api/* URL로 요청이 들어오면 8080번 포트로 프록시하여 요청을 전달한다. 이 때, 프록시할 서버의 URL은 http://localhost:8080 으로 지정한다.
2. 이렇게 프록시 서버를 구축했다면, 리액트앱에서 프록시를 사용하도록 package.json 파일에 proxy 옵션을 등록하면 끝이다.

프록시에 대해서 알아가기(2)

http-proxy-middlewar 으로 프록시서버를 만들고 리액트앱에서 AXIOS 을 통해 API 요청을 Ajax URL Proxy 설정하는 예시이다.

//server.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();
const port = process.env.PORT || 3001;

const apiProxy = createProxyMiddleware('/api', {
  // 스프링부트 서버 URL  
  target: 'http://localhost:8080', 
  changeOrigin: true,
});
 
app.use('/api', apiProxy);

app.listen(port, () => {
  console.log(`Proxy server listening on port ${port}`);
});
 

위처럼 http-proxy-middlewar 으로 프록시서버를 만들고

# (1)설치
npm install axios --save

리앱트 앱측에선 XIOS 으로 API 요청을 Ajax URL Proxy 를 한다.

// (2)AXIOS 사용
import axios from 'axios';

const API_BASE_URL = '/api'; // Ajax URL Proxy 서버 URL

const ApiService = {
  get(endpoint) {
    return axios.get(`${API_BASE_URL}${endpoint}`);
  },

  post(endpoint, data) {
    return axios.post(`${API_BASE_URL}${endpoint}`, data);
  },

  // 기타 HTTP 메소드
};

export default ApiService;

위 코드는 다음과 같다.

1. API_BASE_URL 변수를 Ajax URL Proxy 서버 URL로 설정한다.
2. 그리고 Axios 요청 시, URL 앞에 API_BASE_URL을 붙여 Ajax URL Proxy를 통해 요청을 보낸다.
3. 이제 React 앱에서 Ajax URL Proxy를 사용해 스프링부트 앱과 통신할 수 있게된다.