Docker, NodeJs, Vuejs: 无法通过localhost访问

Question

我试图使用docker运行本地的vue应用程序，但似乎无法通过localhost访问它，我看到这是一个Windows问题，但我无法解决它。因为我在处理主机问题和Docker方面很新，所以我没有成功地应用解决方案。

当我运行时：

docker-compose up

一切看起来都很好，我的后端已经正确连接到数据库，我的Vue应用程序正在运行，但是当我尝试本地访问它时，出现了404错误。

我的项目结构：

项目
- 后端
-- DockerFile
- 前端
-- DockerFile

docker-compose

后端的DockerFile：

FROM node:14.17
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
EXPOSE 3000
CMD ["npm", "start"]

前端 DockerFile

FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

docker-compose.yml

version: '3.8'
services:
  backend:
    build:
      context: ./Backend
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    environment:
      - NODE_ENV=production
    networks:
      - backend_net
    depends_on:
      - mysqldb
  frontend:
    build:
      context: ./Frontend
      dockerfile: Dockerfile
    expose:
      - "8080"
    ports:
      - "8080:8080"
    volumes:
      - ./:/app
    networks:
      - backend_net
    depends_on:
      - mysqldb
  mysqldb:
    image: mysql:latest
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      - MYSQL_DATABASE=p07_social_network
      - MYSQL_ROOT_PASSWORD=secret
    ports:
      - 3306:3306
    expose:
      - 3306
    networks:
      - backend_net
networks:
  backend_net:
    name: p07_network

我的网络检查

[
    {
        "Name": "p07_network",
        "Id": "1114316946c08de4b3e7b966517e1bcb8e6cfe4d56d0bbad9dce5b67d1dddbf1",
        "Created": "2021-05-31T19:29:59.8465635Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": [
                {
                    "Subnet": "172.28.0.0/16",
                    "Gateway": "172.28.0.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": true,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {
            "2f1a7dc4151d13a374d10fd810b0155e07d1694837e57a6aacba8b97e06336a4": {
                "Name": "leonfrederic_7_07032021_mysqldb_1",
                "EndpointID": "d8480cf00d627de83f1524bb1433d4f6be262c5b9848a38ff7da85e4cefdb0df",
                "MacAddress": "02:42:ac:1c:00:02",
                "IPv4Address": "172.28.0.2/16",
                "IPv6Address": ""
            },
            "5a5f54be579538982bdbf35b1c5be60465a080bb8c8abc5584e27c64968b5dd7": {
                "Name": "leonfrederic_7_07032021_backend_1",
                "EndpointID": "43385ee40f09c497b1aaf54c691493a3d25efcb9ecfb6f08a3e08e34a6870e71",
                "MacAddress": "02:42:ac:1c:00:03",
                "IPv4Address": "172.28.0.3/16",
                "IPv6Address": ""
            },
            "e55cf7bd076f8e34901a039f5159450856b25d2186c1137d052438ded27329d3": {
                "Name": "leonfrederic_7_07032021_frontend_1",
                "EndpointID": "2712002e92f69b916dfd298ffa85cadbb9d785e35473d9825e7d65df5db84546",
                "MacAddress": "02:42:ac:1c:00:04",
                "IPv4Address": "172.28.0.4/16",
                "IPv6Address": ""
            }
        },
        "Options": {},
        "Labels": {
            "com.docker.compose.network": "p07_network",
            "com.docker.compose.project": "leonfrederic_7_07032021",
            "com.docker.compose.version": "1.29.1"
        }
    }
]

编辑：我安装了一个虚拟的Linux系统，但是我遇到了同样的问题。所以我很迷茫 ^^

- Frédéric Leon

---

在前端docker-compose.yml文件中删除volumes。 - Jiho Lee

@jiholee 谢谢你的帮助，但是仍然没有改变 :'( - Frédéric Leon

Answer 1

我有同样的问题。您需要在Dockerfile中将服务器从本地主机发布到0.0.0.0。

前端

FROM mhart/alpine-node:14.16.1
WORKDIR /app
ADD . /app/


RUN rm yarn.lock
RUN yarn
RUN yarn build

ENV HOST 0.0.0.0
EXPOSE 8080

CMD [ "yarn", "start" ]

那么你可以进入 localhost:8080/ 查看网页浏览器的结果。

- tanho