Docker镜像运行VUE项目+防止Nginx访问出现的静态资源404错误

完整的Vue项目发布，防止报404错。

Docker部署的应用需要上传文件，上传的静态文件需要通过nginx访问，出现nginx访问404问题！

首先可以确定nginx容器是正常启动的，但是前端代码部署的路径也没问题.

1、将vue项目编译，npm run build

之后形成的disk文件夹压缩成zip包，方便上传

在服务器上新建目录：

mkdir /app/myPro

将项目disk上传到myPro文件夹里

解压：

unzip disk

2、在myPro文件夹里新建dockerfile文件

Dockerfile内容如下：

#标准的nginx镜像,我们需要基于标准的nginx镜像制作自己的镜像

FROM nginx

#设置生成镜像的Author

MAINTAINER ss

VOLUME /tmp

#拷贝当前目录的文件到指定文件夹下，改文件夹为镜像中的文件夹

COPY dist/ /usr/share/nginx/html/

#拷贝.conf文件到镜像下，替换掉原有的nginx.conf

COPY nginx.conf /etc/nginx/nginx.conf

ENV LANG en_US.UTF-8

EXPOSE 80

EXPOSE 443

#输出完成

RUN echo 'build images is ok!'

3、在myPro文件夹里，新建ningx.conf文件，内容如下：

worker_processes auto;
events {
	worker_connections 1024;
}
http {
	include             mime.types;
	default_type        application/octet-stream;
	sendfile            on;
	keepalive_timeout 65;
	client_max_body_size 20m;
	server {
		listen       80;
		server_name  localhost;
		location / {
			root /usr/share/nginx/html; 		#配置Vue项目根路径
			index index.html index.html; 		#配置首页
			try_files $uri $uri/ /index.html; 	#防止刷新报404
		}
		error_page 500 502 503 504 /50x.html;
			location = /50x.html {
			root html;
		}
	}
}

4、创建镜像

docker build -t my-ui .

5、运行docker 容器

docker run --name my-ui -it -d -p 2889:80 my-ui

这样在浏览器里，http://ip:2889就可以访问了

不过这样挺麻烦的，一般都是用域名访问。

6、在宿主机的nginx里配置ninx.conf里加入域名访问，配置内容如下： 

server {
    listen       80;
    server_name  mypro.test.cn;
    location / {
        proxy_pass  http://localhost:2889;
        index index.html;
        error_page 404 /index.html;
    }
    error_page 404 /404.html;
        location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        root html;
    }
}

这样通过 mypro.test.cn 就可以直接访问了。