docker 部署vue打包文件

通过nginx镜像部署

vue项目npm run build打包成dist目录，有的打包会加上版本号

启动 docker

将dist目录通过xftp拷贝到linux服务器上，同目录下新建Dockerfile

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

第一句指定基础镜像

第二句将dist目录下内容拷贝到容器中的/usr/share/nginx/html/目录

第三句将nginx.conf配置文件拷贝到容器中

nginx.conf如下

#user  nobody;
worker_processes  1;
  
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
  
#pid        logs/nginx.pid;
  
  
events {
    worker_connections  1024;
}
  
  
http {
    include       mime.types;
    default_type  application/octet-stream;
  
    #access_log  logs/access.log  main;
  
    sendfile        on;
    #tcp_nopush     on;
  
    #keepalive_timeout  0;
    keepalive_timeout  65;
  
    #gzip  on;
  
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  www.aaaaaa.com;
  
        #charset koi8-r;
  
        #access_log  logs/host.access.log  main;
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
 
    }
  
}

如果需要反向代理后台接口，需要加一句

   location ^~ /api/ {
       proxy_pass http://192.168.16.181:8080/api/;
   }

这样所有带/api/的访问请求都会转发到http://192.168.16.181:8080/api/

打包镜像 当前目录下运行：docker build -t nginx-test . 后面的 . 不能省 运行容器 docker run --name nginx-docker -p 8050:80 -d nginx-test 浏览器输入localhost:8005就可以访问了前端页面了

对于有版本号的vue项目打包后路由找不到对应的页面，浏览器会报Loading chunk {n} failed，我没找到项目的原因，

进入容器

上传到仓库