2、部署项目
上面的东西准备好后我们进入上面保存那三个文件的目录frontend-docker，已经在该目录的请忽略。
cd / cd frontend-docker #已经在frontend-docker目录就不用执行这两条命令
构建镜像
1. docker build -f Dockerfile -t my-frontend:v1.0 . 2. #注意最后那个点是必须的，代表当前目录
成功如下：
设置容器运行镜像
docker run -d --name nginx01 -p 3000:80 --restart=always my-frontend:v1.0 # -后台运行 # --name nginx01 设置容器名字叫nginx01 # -p 3000:80 公网ip的3000端口对应该容器的80端口 # --restart=always设置了开机自启 # my-frontend:v1.0 构建的镜像的名字
最后浏览器公网ip:3000就可以打开了，若打开提示无法访问此网站请输入：
1. docker logs nginx01 2. #有报错信息的根据提示修改即可，一般多为前面my-frontend文件夹下的文件内容粘贴少了打头的几个
最后，上面的表示该vue项目已经成功部署！ 经过验证重启服务器后仍旧可以正常打开！
这里有一点提个醒，部分浏览器会禁用一些端口，例如谷歌禁用6666等，如果出现下文的情况，请docker run的时候更换端口 ！
无法访问此网站
网址为 http://106.126.3.4:6666/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。
知识点（需要的可查阅）
容器命令（需要时可查）
常规命令
docker pull **** #下载最新的**** //新建容器运行 docker run [可选参数] imageid #参数说明 -d # 后台方式运行 --name # 容器名称 用来区分容器，例如nginx01 --restart=always #开机自启 #下方为端口组合 -p # 随机指定端口 -p 主机端口：容器端口(常用) -p ip:主机端口容器端口 -p 容器端口 容器的端口 -P #详见菜鸟教程 or w3c
容器退出删除命令
exit #容器退出 Ctrl+P+Q #不停止推出 docker rm 容器id # 删除指定的容器 不能删除正在运行的 docker rm -f $(docker ps -aq) # 删除所有容器 docker ps -a -q | xargs docker rm # 删除所有容器
启动、停止容器命令
docker start 容器id docker restart 容器id docker stop 容器id docker kill 容器id
更多详细的命令还请大家查阅相关资料，这里不再一一列举。
结束语
以上关于docker前端部署的实战就差不多到此了,后续会推出前端自动化部署的方案，如果小伙伴们觉得满意，还请点个关注、收藏、或者赞赞支持一下😁。
