webpack-dev-server代理到docker容器
我有2 docker-compose托pipe容器pipe理,似乎无法正确使用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
服务networking是由webpack-dev-server服务的一个简单的反应应用程序。 服务返回是一个节点应用程序。
我没有任何问题从我的主机访问任何应用程序:
$ curl localhost > index.html $ curl localhost:8081 > Hello World
我也可以从Web容器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
和configuration文件是
前端/ 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 /testing与我的应用程序中的链接例如我得到一个通用的错误,链接和谷歌没有帮助:(
[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)
我怀疑一些奇怪的事情,因为代理是在容器上,请求是在本地主机,但我真的没有一个想法来解决这个问题。
我想我设法克服了这个问题。 只需要改变下面的webpackconfiguration
devServer: { //redirect api calls to backend server proxy: { '/api': { target: { host: "back", protocol: 'http:', port: 8080 }, ignorePath: true, changeOrigin: true, secure: false } } }