도커 컨테이너에 webpack-dev-server 프록시

Question

도커로 작성된 2 개의 도킹 컨테이너가 있고 백엔드 API에 대한 일부 요청을 프록시하기 위해 webpack을 제대로 사용할 수없는 것 같습니다.

고정 표시기-compose.yml :

version: '2' 

services: 
    web: 
    build: 
     context: ./frontend 
    ports: 
     - "80:8080" 
    volumes: 
     - ./frontend:/16AGR/frontend:rw 
    links: 
     - back:back 
    back: 
    build: 
     context: ./backend 
    expose: 
     - "8080" 
    ports: 
     - "8081:8080" 
    volumes: 
     - ./backend:/16AGR/backend:rw 

서비스 웹는 단순한는 웹팩-DEV-서버에서 제공하는 응용 프로그램 반응이다. 서비스 다시은 노드 응용 프로그램입니다. 웹 컨테이너에서 다시 서비스를 나는 또한 Ping 할 수

$ curl localhost 
> index.html 
$ curl localhost:8081 
> Hello World 

와 컬 :

내 호스트에서 응용 프로그램 중 하나에 액세스 할 아무 문제가 없다

$ docker ps 
CONTAINER ID  IMAGE    COMMAND    CREATED    STATUS    PORTS     NAMES 
73ebfef9b250  16agr_web   "npm run start"  37 hours ago  Up 13 seconds  0.0.0.0:80->8080/tcp  16agr_web_1 
a421fc24f8d9  16agr_back   "npm start"   37 hours ago  Up 15 seconds  0.0.0.0:8081->8080/tcp 16agr_back_1 

$ docker exec -it 73e bash 
$ root@73ebfef9b250:/16AGR/frontend# curl back:8080 
Hello world 

그러나이 전 프록시에 문제가있다. 웹팩은

webpack-dev-server --display-reasons --display-error-details --history-api-fallback --progress --colors -d --hot --inline --host=0.0.0.0 --port 8080 

로 시작되고 설정 파일은

프론트 엔드/webpack.config.js입니다 :

var webpack = require('webpack'); 
var config = module.exports = { 
    ... 
    devServer: { 
    //redirect api calls to backend server 
    proxy: { 
     '/api': { 
     target: "back:8080", 
     secure: false 
     } 
    } 
    } 
    ... 
} 

난에 대한 링크와 함께/API/테스트를 요청하려고 할 때 내 앱 예를 들어 일반적인 오류가 발생하면 링크와 Google은별로 도움이되지 않습니다. (

[HPM] Error occurred while trying to proxy request /api/test from localhost to back:8080 (EINVAL) (https://nodejs.org/api/errors.html#errors_common_system_errors) 

프록시가 컨테이너에 있고 요청이 localhost에 있기 때문에 나는 이상한 것을 의심합니다. 그러나 이것을 해결할 아이디어가 없습니다.

Answer 1

나는 그 문제를 해결할 수 있었다고 생각합니다. 다음을 사용하여 웹팩 구성을 변경해야합니다.

devServer: { 
    //redirect api calls to backend server 
    proxy: { 
     '/api': { 
     target: { 
      host: "back", 
      protocol: 'http:', 
      port: 8080 
     }, 
     ignorePath: true, 
     changeOrigin: true, 
     secure: false 
     } 
    } 
    }