ドッカーコンテナへのwebpack-dev-serverプロキシ

Question

私は2つのドッカーコンテナをdocker-composeで管理しており、webpackを使用してバックエンドAPIへのリクエストを適切にプロキシすることはできません。

ドッキングウィンドウ-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 

サービスウェブはWebPACKの-devのサーバーによって提供されるアプリケーションをシンプルに反応されます。 サービス戻るはノードアプリケーションです。

私は私のホストからいずれかのアプリにアクセスするには問題がない：

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

私もウェブコンテナからバックサービスをpingとカールすることができます

$ 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は

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はあまり役に立たなかった：（

プロキシがコンテナにあり、リクエストがローカルホスト上にあるので、私はいくつかの奇妙なことを疑うが、私は本当にこれを解決する考えはしていない。

Answer 1

私は問題を解決することができたと思います。 ウェブパックの設定を次のように変更するだけでした。

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