webpack-dev-server代理到docker容器

Question

我有两个由docker-compose管理的Docker容器，似乎无法正确使用webpack代理一些请求到后端API。

docker-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

服务web是一个简单的React应用程序，由webpack-dev-server提供服务。 服务back是一个Node应用程序。

我可以从我的主机访问这两个应用程序，没有问题：

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

我还可以从web容器对back服务进行ping和curl测试：

$ 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

并且配置文件是

frontend/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/test 时，例如，我遇到了一个通用错误，并且链接和谷歌并没有提供太多帮助 :(

[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)

我怀疑出现了一些奇怪的事情，因为代理在容器中，而请求在本地主机上，但我真的没有想到解决办法。

- Sacapuces

Answer 1

我想我成功解决了这个问题。只需要用以下方法更改webpack配置：

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

- Sacapuces

---

不错！对我来说，ignorePath选项解决了问题。我的问题是，对于其他资源的请求，例如从样式表链接的背景图像，也继承了Docker容器名称，这意味着浏览器中的请求会404。例如，http://localhost/path/to/image.png被重写为http://back/path/to/image.png - 这并不是非常有帮助 :) - shankie_san