前端使用docker的方法

问：

前端怎么使用docker进行项目打包部署？

回答：

1. 首先下载docker desktop软件

2. 在docker desktop桌面版的控制选项中增加配置：

"registry-mirrors": [ "​https://do.nark.eu.org", "​https://dc.j8.work", "​https://docker.m.daocloud.io", "​https://dockerproxy.com", "​https://docker.mirrors.ustc.edu.cn", "​https://docker.nju.edu.cn" ]

3. 在自己项目根目录中创建Dockerfile文件

同时，ADD xxx .这行命令，需要改为前端的打包文件，也就是dist文件名，否则的话会报错

4. 创建nginx.conf文件

server {
    listen       8089;
    listen  [::]:8089;
    server_name  localhost;

    access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 解决部分前端框架的路由问题，在浏览器刷新报错404
        try_files $uri $uri/ /index.html;
    }

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

这个文件不需要改什么，直接放上去就可以。

5. 在自己的前端项目中执行下面的命令：

docker build -t xxc-web:v1 .

注意：这里的xxc-web可以随便起名字

6. 在docker desktop查看上面命令打的镜像

7. 点击Actions列下方的开始按钮

端口写成80，也就是我们dockerfile文件中定义的端口号，

点击run就可以执行了。

8. 点击containers就可以查看当前运行的服务了

点击8089:8089这个Port链接，也就是上文鼠标悬浮的位置，点击就可以在本机查看到服务了

可以看到上面的服务是8089端口运行起来的。

后续我们希望打一个tar压缩包怎么操作？

回答：

执行docker images命令查看当前的docker服务，可以看到只有一个xxc-web镜像，同时他的标签是v1，然后我们执行：docker build -t xxc-web:v1 .这行命令，记住这里的xxc-web和v1要和自己项目对应。

然后就在项目的根目录中生成了tar压缩包：