让 vue devServer 代理在 docker 中使用不同的本地端口

Question

在这里试图正确设置有点疯狂。 我在 docker 中运行 Vue 和 devServer，然后是一个运行 json-server 的单独卷，用于提供虚假的 api 数据。 对于初学者来说，我很乐意让这个简单的示例工作，但我不断收到代理错误。 这是我当前的配置。

docker-compose：

version: "3.7"
services:
front:
container_name: front
build: .
volumes:
- .:/app
- ./node_modules:/app/node_modules
ports:
- '8080:8080'
api:
image: vimagick/json-server
command: -H 0.0.0.0 -p 3000 -w db.json
ports:
- "3000:3000"
volumes:
- ./server/data:/data

Dockerfile：

FROM node:lts-alpine as front
# install simple http server for serving static content
RUN npm install -g @vue/cli
# make the 'app' folder the current working directory
WORKDIR /app
# Add necessary files to app
ENV PATH ./:/app/:./node_modules/.bin:$PATH
ENV NODE_ENV=development
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package.json /app/package.json
COPY package-lock.json /app/package.lock.json
# install project dependencies
RUN npm install --silent
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY ./ .
EXPOSE 8080
CMD ["npm", "run", "serve"]

以上所有工作正常。 上面的所有内容都构建了，它们都在各自的端口上运行。

我可以导航到http://localhost:3000/posts，我看到了我期待的假 json。 我可以在http://localhost:8080/上进行热模块重新加载、开发等。 现在这是摩擦。 我想在 vue 应用程序中使用来自 json 服务器的数据，并且我想将我的请求从http://localhost:8080/api/*代理到http://localhost:3000/$1. 这是我的 Vue.Config 文件：

module.exports={
devServer: {
proxy: {
"^/api/": {
target: "http://localhost:3000/",
secure: false,
pathRewrite: {
"/api/*": "/"
}
}
}
}
};

然后在应用程序中，我发出类似axios.get('/api/posts/')的请求。 我已经在所有三个文件中尝试了大约 100 种不同的代码细微变体，但每次我都收到此错误：

代理

错误：无法将请求/帖子从本地主机：8080 代理到 http://localhost:3000/(ECONNREFUSED(。

我认为我对这应该如何工作有一个根本性的误解，因为我遵循了每条指令，并从 Vue 的指令中复制和粘贴。 任何人都可以提供的任何见解将不胜感激

Answer 1

这里的问题是代理localhost不正确。如果你将你的 vue 配置更改为以下内容，它应该可以工作：

module.exports={
devServer: {
proxy: {
"^/api/": {
target: "http://api:3000",
secure: false,
pathRewrite: {
"/api/*": "/"
}
}
}
}
};

基本上，更改是将主机从localhost替换到api。原因是 docker-compose 按服务名称解析主机。并且由于您的服务名称是api，主机也应该api。

为了澄清一点，这里的主机不是来自你机器的前景，而是来自 vue.js 容器前景。从 vue.js 容器前景来看，api 是一个单独的主机(不再是本地主机(。希望这是有道理的 - 如果需要更多澄清，lmk。