编写Dockerfie文件使用COPY命令复制vue项目的dist文件夹下的所有文件遇到的坑

一个vue框架的前端项目，编译后生成的dist文件夹里有如下文件

[root@localhost ]# cd dist/
[root@localhost dist]# ll
total 864
-rw-r--r-- 1 root root 723755 Jul 29 19:43 echarts.js
-rw-r--r-- 1 root root  16958 Jul 29 19:43 favicon.ico
-rw-r--r-- 1 root root   1609 Jul 29 19:43 imView3.html
-rw-r--r-- 1 root root   2103 Jul 29 19:43 imView.html
-rw-r--r-- 1 root root  14757 Jul 29 19:43 index.html
-rw-r--r-- 1 root root 112251 Jul 29 19:43 newPrivacy.html
drwxr-xr-x 7 root root     71 Jul 29 19:43 static
[root@localhost dist]# cd static/
[root@localhost static]# ll
total 24
drwxr-xr-x 2 root root 8192 Jul 29 19:43 css
drwxr-xr-x 2 root root   73 Jul 29 19:43 fonts
drwxr-xr-x 2 root root   78 Jul 29 19:43 img
drwxr-xr-x 3 root root 8192 Jul 29 19:43 js
drwxr-xr-x 5 root root   69 Jul 29 19:43 tinymce4.7.5

编写Dockerfile文件，要把dist文件夹下的所有文件(不包含dist文件夹)都放到nginx的html目录下

FROM nginx:stable-alpine
COPY dist/* /usr/share/nginx/html/ 
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

这样写后封装一个镜像，运行后会发现，容器目录：/usr/share/nginx/html/下的文件是这种的

[root@localhost ~]# docker exec -it lucid_lewin /bin/sh
/ # cd /usr/share/nginx/html/
/usr/share/nginx/html # ls
50x.html         echarts.js       fonts            imView3.html     index.html       newPrivacy.html
css              favicon.ico      imView.html      img              js               tinymce4.7.5

可以看到，原本应在是在html目录下有一个static文件夹的，但是在容器中却是把该static文件夹下的文件都给提到上一层，也就是html目录下了，没有static文件夹了。

导致前端项目访问的时候找不到static文件夹路径而报错。

解决办法：
安装如下写法编写Dockerfile文件

FROM harbor.miaohuanba.com/infra/nginx:stable-alpine
COPY dist/ /usr/share/nginx/html/ 
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。

这样一来，就能原封不动的把dist文件夹下的所有文件复制到nginx的html目录下来