Docker、NodeJs、Vuejs：无法使用 localhost 访问

Posted 2023-02-25

【中文标题】Docker、NodeJs、Vuejs：无法使用 localhost 访问

【英文标题】：Docker, NodeJs, Vuejs : can't access with localhost

【发布时间】：2021-08-19 03:06:17

【问题描述】：

我尝试使用 docker 运行我的本地 vue 应用程序，但我似乎无法使用 localhost 访问它，我读到这是一个 Windows 问题，但我无法解决它。我是主机问题和 docker 的新手，我没有成功应用解决方案。

当我跑步时

docker-compose up

一切似乎都很好，我的后端已正确连接到我的数据库，我的 vue 应用程序正在运行，但是当尝试在本地访问它时，我遇到了 404 错误。

我的结构项目：

项目 - 后端 -- Docker文件 - 前端 -- Docker文件 码头工人撰写

后端 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，我有同样的问题。所以我迷路了^^

【问题讨论】：

删除前端 docker-compose.yml 上的 volumes。

@jiholee 谢谢你的帮助，这没什么改变：'(

【参考方案1】：

我也有同样的问题。您需要将服务器从 localhost 发布到 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/ 查看网页浏览器的结果。