如何利用nginx 单独构建前端应用

当前所作工作:
1. 执行npm run build-only 获得dist
2. 编写Dockerfile 文件:

            FROM nginx:latest
            COPY dist/ /usr/share/nginx/html/
            COPY ./nginx.conf /etc/nginx/nginx.conf
            EXPOSE 80
            # 启动 nginx(默认命令即可)
            CMD ["nginx", "-g", "daemon off;"]
  1. nginx 配置文件:
    server {
    listen 80;
    server_name localhost;

    location / {
    root /usr/share/nginx/html;
    index index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    root html;
    }
    }

  2. 编写 docker-compose.yml 文件
    version: ‘3.8’
    services:
    maxkbui:
    build: .
    container_name: kbui
    environment:
    # 时区上海
    TZ: Asia/Shanghai
    ports:
    - 3000:80
    restart: always

  3. docker-compose up -d, j镜像运行成功

  4. 访问页面 http:localhost:3000/ui/login 失败

  5. 该如何解决呢?

前后端源码分离部署还需要自己看看,前后端分离,你这里我没有看到后端啊。