번개 모임 웹 어플리케이션 - proxy 설치 및 설정

로컬 개발 환경에서 API 요청 시 발생하는 CORS 에러를 해결하기 위해 프록시 설정을 했다. 가장 간단한 방법으로는 package.json에 proxy 값을 설정하는 방법이 있다. 하지만 package.json 파일은 원격 레포지토리에 커밋하고 있기 때문에 해당 방법을 사용하면 서버 주소까지 원격 레포지토리에 올라가게 된다. 그래서 http-proxy-middleware 라이브러리를 사용하는 방법을 택했다.

---

proxy 설치 및 설정

1. http-proxy-middleware 설치

npm i -D http-proxy-middleware

2. setupProxy.js 작성

src/setupProxy.js

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

module.exports = (app) => {
  app.use(
    ["/auth", "/users", "/meeting"],
    createProxyMiddleware({
      target: "서버 주소",
      changeOrigin: true
    })
  );
};

3. .gitignore 파일에 setupProxy.js 추가

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

# proxy
setupProxy.js