COR와 Webpack DevServer Proxy

Webpack Dev Server

웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다.

매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다.

웹팩 데브 서버의 특징

웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있다.

"scripts": {
  "dev": "webpack serve",
  "build": "webpack"
}

웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 좀 더 구체적으로 얘기하자면 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지는 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없다.

따라서, 웹팩 데브 서버는 개발할 때만 사용하다가 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 한다.
(컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 컴퓨터 자원이 덜 소모된다.)

 

프록시(Proxy) 설정

프록시 설정은 실무에서 가장 흔하게 사용하는 속성. 아래와 같이 선언.

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

위와 같이 설정하고 나면 로컬 웹팩 데브 서버에서 발생하는 API 요청에 변화가 생긴다.

먼저 프록시를 쓰지 않았을 때의 기본적인 웹팩 데브 서버와 API 서버의 통신 구조.

여기서 CORS는 브라우저 보안과 관계가 있는데, 쉽게 얘기하면 다른 도메인 간에는 자바스크립트로 자원을 요청할 수 없다는 의미. 위 그림에서도 서버에 로그인 관련 API 요청을 했는데 CORS 오류가 나는 걸 볼 수 있다.

뷰, 리액트와 같은 프런트엔드 프레임워크를 쓰면 개발 편의상 로컬에 웹팩 데브 서버를 띄워놓고 개발하는 경우가 많은데, 이 때, 이러한 문제를 해결하기 위해서 아래와 같이 프록시 속성을 설정하면 서버에서 해당 요청을 받아준다.

module.exports = {
  devServer: {
    proxy: {
      '/api': 'domain.com'
    }
  }
};

CORS가 브라우저 보안과 관련있기 때문에 브라우저에서 벗어나 서버에서 서버로 요청한다. 실제로 브라우저에서는 localhost:8080/api/login 으로 요청했지만 중간에 프록시 서버의 활약으로 domain.com 서버에서는 같은 도메인(domain.com)에서 온 요청으로 인식하여 CORS 에러가 나지 않는다.

위 프록시 설정은 최대한 간단히 설명하기 위해 옵션을 하나 뺐다. 위와 같이 도메인 이름이 IP 주소가 아니라 가상 이름(domain.com)으로 되어 있는 경우 아래 옵션을 추가.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'domain.com',
        changeOrigin: true
      }
    }
  }
};

 

브러우저에서 기본적으로 API를 요청할 때에는 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있게 되어 있다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 해주려면 CORS설정이 필요하다.

json-server로 만든 서버의 경우엔 모든 도메인을 허용해주는 CORS규칙이 적용되어 있다. 하지만 Open API를 만드는게 아니라면 모든 도메인을 허용하면 안되고 특정 도메이만 허용을 해주어야 한다.

서비스를 개발하면서 서버의 API를 요청해야 할 때, 기본적으로는 (localhost:3000에서)들어오는 것이 차단되기 때문에 서버쪽에 해당 도메인을 허용하도록 구현 해야한다. 백엔드 개발자가 따로 있다면 백엔드 개발자에게 해당 도메인을 허용해달라고 요청하기도 하지만, 웹팩 개발서버에서 제공하는 Proxy라는 기능을 이용할 수 있다.

 

웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청하지 않고, 현재 개발서버의 주소로 요청을 하게 됩니다. 그러면 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환합니다. 웹팩 개발서버의 Proxy설정은 원래 웹펙 설정을 통해서 적용 하지만, CRA를 통해 만든 리액트 프로젝트에서는 package.json에서 "proxy"값을 설정하여 쉽게 적용할 수 있다.

 

-package.json

(...),
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all" 
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
     ]
},
     "proxy": "http://localhost:4000"
     
}

 

그 다음에는 api/posts.js파일을 열어 http://localhost:4000/posts 대신 /posts URL로 요청을 하도록 하면 /된다.

이렇게 요청하는 주소의 도메인이 생략된 경우엔 현재 페이지의 도메인을(지금의 경우 localhost:3030) 가리키게 됩니다.

 

 

 

참고: https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html#webpack-dev-server