解决Docker部署前端页面报404错误

前端页面部署

1、创建一个文件夹

2、将打包好的前端dist文件放到创建好的文件夹中

3、在该文件夹下创建nginx.conf文件，内容如下：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        charset utf-8;

        location / {
            root   /usr/share/nginx/html/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/ {
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://xx.xx.xx.xx:8080/;
        }

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

注意：上述proxy_pass http://ip地址:8080/ 中ip地址必须是服务器的IP地址，不可以写成localhost，否则就会报系统404错误

4、拉取 nginx 镜像

        docker pull nginx

5、运行nginx容器，并通过 docker ps -a 查看容器

        sudo docker run -d --name nginx -p 8180:80 -v ./nginx:/usr/share/nginx/html -v ./nginx/nginx.conf:/etc/nginx/nginx.conf nginx

6、通过访问 主机地址加8180端口号访问前端页面