nuxt에서 proxy가 필요했던 이유:
SPA 모드로 로컬에서 개발시 nginx 없이 API 서버를 호출하면서 결과값 기준으로 개발을 하고 싶었습니다.
Webpack의 devServer의 proxy
Nuxt에 webpack이 포함되어 있어서 webpack의 dev server가 들어가 있을거라 생각하고 nuxt의 build 옵션에서 proxy를 설정해봤는데요. 설정이 동작하지 않더군요… nuxt proxy로 검색한 결과물을 찾아보았는데 대부분이 서버렌더링을 사용한 경우라서 원하는 답을 찾지 못해서 nuxt 개발모드 코드를 살펴보았는데요.
dev 모드에서 nuxt 실행 따라가기
node_modules의.bin 폴더에서 dev 모드 실행시 호출 코드를 찾아봤는데요. Nuxt 인스턴스를 생성한 다음 코드 변경을 감지해서 새로운 인스턴스에서 nuxt.listen()을 호출합니다. listen() 코드(lib/core/nuxt.js)를 따라가면 renderer.app.listen()을 다시 호출하는데요. 여기의 app이 node connect 를 서버로 사용하는 것을 확인할 수 있습니다.
serverMiddleware
nuxt 인스턴스가 생성할 때 renderer의 ready()를 호출하는데요. 이 메소드 안에서 setupMiddleware()를 호출하고 여기에서 connect 서버에서 사용할 middleware를 등록합니다. dev인 경우에는 webpack dev middleware와 hot middleware를 등록하게 되며 사용자가 serverMiddleware 옵션을 설정한경우 이들을 connect에 등록하게 됩니다.
여기에서 사용되는 미들웨어는 nuxt의 connect 서버가 호출되기 전에 클라이언트 또는 서버사이드 렌더링 호출하기 전에 호출되게 됩니다. (nuxt의 routes middleware와 전혀 다릅니다.)
- nuxt proxy 모듈의 코드를 보면 serverMiddleware를 사용하여 proxy를 등록하는 것을 확이할 수 있습니다.
옷장수 