webpack-dev-server到Docker容器的代理 [英] webpack-dev-server proxy to docker container
问题描述
我有2个通过docker-compose管理的docker容器,似乎无法正确地使用webpack将某些请求代理到后端api。
I have 2 docker containers managed with docker-compose and can't seem to properly use webpack to proxy some request to the backend api.
docker-compose。 yml:
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 服务是由webpack-dev-server提供服务的简单React应用程序。
服务 back 是一个节点应用程序。
the service web is a simple react application served by a webpack-dev-server. the service back is a node application.
我可以从主机访问任何一个应用程序都没问题:
I have no problem to access either app from my host :
$ curl localhost
> index.html
$ curl localhost:8081
> Hello World
我还可以从 web 容器:
$ 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始于
However i have a problem with the proxy. Webpack is started with
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:
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时,例如通用错误,链接和Google的帮助不大:(
When i try to request /api/test with a link in my app for exemple i get a generic error, the link and google did not help much :(
[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)
我怀疑有些奇怪的事情,因为代理位于容器上,而请求位于本地主机上,但是我真的不知道要解决这个问题。
I suspect some weird thing because the proxy is on the container and the request is on localhost but I don't really have an idea to solve this.
推荐答案
我想我已经解决了这个问题。
只需更改以下内容的webpack配置即可
I think I managed to tacle the problem. Just had to change the webpack configuration with the following
devServer: {
//redirect api calls to backend server
proxy: {
'/api': {
target: {
host: "back",
protocol: 'http:',
port: 8080
},
ignorePath: true,
changeOrigin: true,
secure: false
}
}
}
这篇关于webpack-dev-server到Docker容器的代理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!