[TIL] Proxy

ㅜㅜ·2022년 12월 8일
TIL
1

Today I learn

목록 보기
69/77
post-thumbnail

Do you remember CORS?

브라우저에서 API 요청시 브라우저 현재 주소와 API 주소 도메인이 다를 경우 데이터에 접근하려면 CORS 설정이 필요했다.

Remember CORS?
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

웹 콘텐츠의 출처는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다.
일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있습니다.

이렇게 출처를 검사해서 다른 출처일 경우 차단되며, 접근 권한을 설정해주어야 한다는 것이 번거로울 수 있지만, 실제 서비스가 되는 상용 앱을 운영 중이라면, 구축한 클라이언트 뒤 서버와 연결되어 있는 DB에는 라이브 데이터(live data)가 쌓이게 되는데 (live data : 실제 서비스 되고 있는 앱의 DB에 적재되고 있는 데이터를 의미. 유저 및 상품, 결제 등 다양한 정보들을 예로 들 수 있음.) 이런 라이브 데이터는 민감성이 높은 데이터들이 많기 때문에 중요함.

모든 출처의 접근을 허용하게 된다면 이런 보안성이 현저히 낮아지게 된다.

따라서 개발자는 모든 도메인을 허용해서는 안 되고, 특정 도메인을 허용하도록 구현해야 한다. 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청을 해야하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담아서 전달을 해줘야 함. 서버에서 적절한 응답 헤더를 받지 못하면 브라우저에서 에러가 발생하기 때문.





Proxy

정석적인 과정 없이 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있음.

별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청
=> 해당 요청을 백엔드로 전달
=> 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달
=> 브라우저는 CORS 정책을 위반한지 모르게 됨.(출처가 같기 때문에)
⇒ 브라우저를 proxy 기능을 통해 속이는 것!

❓ proxy 사용법

🟢 webpack dev server proxy

: webpack dev server에서 제공하는 proxy 기능을 사용하는 방법.

webpack dev server의 proxy를 사용하게 되면, 브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 우회 요청을 하게됨.

그러면 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환.

웹팩 개발서버의 proxy 설정은 원래 웹팩 설정을 통해서 적용을 하지만, CRA 를 통해 만든 리액트 프로젝트에서는 package.json 에서 "proxy"값을 설정하여 쉽게 적용할 수 있도록 구성이 되어 있음. 

   ...
   "browserslist": {
       "production": [
         ">0.2%",
         "not dead",
         "not op_mini all"
       ],
       "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version"
       ]
     },
   	"proxy" : "우회할 API 주소"
   }

proxy는 보통 맨 밑에 작성을 해 금방 찾을 수 있도록 함.
그리고 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거하면 된다. 

    export async function getAllfetch() {
    
        const response = await fetch('우회할 api주소/params');
        .then(() => {
    			...
    		})
    }
    
    export async function getAllfetch() {
    
        const response = await fetch('/params');
        .then(() => {
    			...
    		})
    }

🟢 React Proxy 사용법

: webpack dev server 에서 제공하는 proxy는 전역적인 설정이기 때문에, 종종 해당 방법이 충분히 적용되지 않는 경우가 생기기도 함. 그래서 수동으로 proxy를 적용해줘야 하는 경우가 있는데, 이때는 http-proxy-middleware 라이브러리를 사용해야 한다.

http-proxy-middleware 라이브러리 설치

    npm install http-proxy-middleware --save

React App의 src 파일 안에서 setupProxy.js 파일을 생성하고, 안에서 설치한 라이브러리 파일을 불러온 다음, 아래와 같이 작성.

    const { createProxyMiddleware } = require('http-proxy-middleware');
    
    module.exports = function(app) {
      app.use(
        '/api', //proxy가 필요한 path prameter를 입력합니다.
        createProxyMiddleware({
          target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
          changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
        })
      );
    };

기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거.
밑의 부분은 webpack dev server 에서 제공하는 proxy 기능을 사용할 때와 동일하다.





과제 : 프록시 이용해 우회한 응답을 받아와서 렌더링하기

오늘 과제에서 주어진 래퍼런스코드에는 my-app이라는 클라이언트 폴더와 api, api2라는 서버 폴더 두 개로 이루어져있다. 각 폴더로 접속해 npm install을 끝내주고 나서, 각각 터미널에서 클라이언트는 npm run start, 서버 파일은 npm run dev를 통해서 서버와 클라이언트를 띄워주고 시작했다.

☁️ Bare minimum Requirement

  • Webpack dev server의 proxy 기능을 이용해 우회해서 응답 받아오기 (api만 사용)
  • http-proxy-middleware의 proxy 기능을 이용해 proxy를 유연하게 설정해 api, api2 도메인 모두에서 응답을 받아오기
  • api2에 관련된 fetch 함수를 만들고, 컴포넌트 하나 이상 만들어 2개의 도메인 모두에서 응답 받아오는지 테스트

☁️ 과제 완료 화면

☁️ 과제 수행 과정

1️⃣ webpack dev server proxy

  • CRA를 통해 만든 리액트 프로젝트에서는 package.json에 프록시 값을 설정해주면 쉽게 프록시를 이용할 수 있었다. 주어진 클라이언트의 도메인이 3000번 로컬 호스트였고, api의 도메인이 3080번 로컬 호스트여서 처음에는 어느쪽을 우회할 주소로 넣어주어야 할 지 조금 헷갈렸는데, 우회할 주소라는 게 결국 proxy를 통해 백엔드(서버)로 우회를 해야 하는 것이므로 3080번 주소를 입력해주면 됐다.

  • 🚫Error solving🚫 : 과제를 수행하다 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON라는 에러는 만나게 됐는데, package.json에 proxy 값을 설정해주고 나서 npm run start를 해주지 않으면 해당 에러가 계속해서 뜨는 것을 발견했다.
    (이후에 http-proxy-middleware 라이브러리를 사용할 때도 proxy 설정을 해주고 나서 npm start를 해주지 않으면 동일 에러가 발생함.)

2️⃣ React Proxy

  • http-proxy-middleware는 라이브러리라 npm install로 설치를 해주었다. 그 후, src 파일 내에 setupProxy.js라는 파일을 만들어주고, 아래와 같이 작성했다. 여러개의 경로를 우회할 때는 어떻게 해야하나 검색을 해봤는데, 그냥 여러 개를 적어주면 되는 것 같았음. 
const { createProxyMiddleware } = require("http-proxy-middleware");//import로 라이브러리 파일 불러오기 

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:3080", 
      changeOrigin: true,
    })
  ),
    app.use(
      "/api2",
      createProxyMiddleware({
        target: "http://localhost:3070", 
        changeOrigin: true, 
      })
    );
};

✚ 실시간 세션 듣고 추가
: setupProxy.js 파일 내에 여러 번 적지 않고 라우터를 이용해 아래와 같이 작성할 수도 있다. 

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    ['/api','/api2'],
    createProxyMiddleware({
      target: 'http://localhost:3080',
      changeOrigin: true,
      router: {
        '/api2': 'http://localhost:3070'
      }
    })
  );
};
  • 프록시 셋업 파일을 작성해주 난 뒤에는 웹팩에서 했던 것과 동일하게 fetch를 사용하는 곳에서 파라미터를 제외한 도메인을 지워준다. 
//src/services/TodoService.js

export const getAllTodos = async () => {
  const response = await fetch("/api2/todos");
  return await response.json();
};
  • 주어진 api2에서 보내주는 데이터는 todo에 대한 데이터였기 때문에 my-app파일에서 TodoList 컴포넌트를 새롭게 만들었다. BookTable에 들어가는 내용과 대부분 동일하게 작성했고, App.js 파일에서 todos라는 상태를 만들어서 TodoList 컴포넌트에 props로 내려주었다. (참고로 todos라는 상태 초기값은 빈 배열이고, getAllBook처럼, getAllTodo라는 함수를 만들어서 getAllTodos라는 fetch에서 데이터를 받아오는 함수에서 받은 데이터를 setTodos에 전달해주도록 했다.)
//App.js 
//todo와 관련없는 부분들은 생략

function App() {
 ...
  const [todos, setTodos] = useState([]);

  const getAllTodo = () => {
    getAllTodos().then((data) => {
      setTodos(data);
    });
  };


 ...

  return (
   ...
        <BookTable books={books} />
        <TodoList todos={todos} />
        <Footer />
      </div>
    </div>
  );
}

export default App;

//TodoList.js

import React from "react";

export default function TodoList({ todos }) {
  if (todos.length === 0) return null;

  return (
    <div className="table-wrapper">
      <div className="table-box">
        <h2>ToDo List</h2>
        <div className="table-scroll">
          <table>
            <thead>
              <tr>
                <th>Id</th>
                <th>ToDo</th>
                <th>Category</th>
                <th>isComplete</th>
              </tr>
            </thead>
            <tbody>
              {todos.map((todo, index) => {
                return (
                  <tr key={index} className={index % 2 === 0 ? "odd" : "even"}>
                    <td>{index + 1}</td>
                    <td>{todo.todo}</td>
                    <td>{todo.category}</td>
                    <td>{todo.isComplete}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
  • my-app 파일에는 DisplayBoard.js라는 파일이 있었는데 해당 파일에서 클릭 시 getAllTodo를 불러오도록 작성해주면 완성 화면과 동일한 결과가 나온다. 
//Display.js
import React from "react";

const DisplayBoard = ({ numberOfBooks, getAllBook, getAllTodo }) => {
  return (
    <div className="display-wrapper">
      <div className="display-box">
        <div className="display-board">
          <h4>생성된 수</h4>
          <div className="number">{numberOfBooks}</div>
        </div>
        <div className="get-button">
          <button onClick={() => getAllBook()}>Get all Books</button>
        </div>
        <div>
          <button onClick={() => getAllTodo()}>Get all Todos</button>
        </div>
      </div>
    </div>
  );
};

export default DisplayBoard;


덧붙임

프록시라는 걸 알게되기는 했는데, 실제 개발 현장에서 어떨 때 사용하는 걸지 궁금했는데 실시간 세션에서 설명해주셨다.

개발 단계에서 CORS 관련해서 백엔드에서 서버를 열어줄 수 없을 때, 혹은 열어주더라도 문제가 있어서 제대로 서버로 요청을 보낼 수 없을 때 proxy를 설정해서 테스트를 할 수 있다고 한다.

profile
ㅜㅜ
다시 일어나는 중
이전 포스트

[TIL] CI/CD, Github Action, YAML

다음 포스트

[TIL] 알고리즘 이해하기

0개의 댓글