Docker简单粗暴的部署Vue项⽬详解（Docker+Nginx+Vue⽂件），适合第⼀次
部署
关键词：Docker、Nginx、Vue、Node.js、DockerFIle
Docker是流⾏的容器引擎，通过Docker部署项⽬/服务已经是流⾏的⽅式；Nginx是⾼性能的Web服务器，⼤⼚都在⽤。显然，作为初学者来说，如果有Vue项⽬，通过Docker+Nginx的⽅式部署到服务器上，是⼀个简单、粗暴、合理的选择，还能学到很多东西。
但是这三样内容，其实并不在⼀本教材上，可能需要看三本书才能做好。并且三个东西结合，可能会有⼀些坑和思路上的选择， 笔者在部署时也有遇到，因此写了⼀篇⽂章专门来讨论，算是⽐较详细的理解和教程，欢迎讨论。
如果选⽤编写DockerFile的标准部署⽅式，可以直接跳到正式开始部署环节。
Docker简单粗暴的部署Vue项⽬详解（Docker+Nginx+Vue⽂件）
总体思路设计
我们期待的最终效果⼀个⼀般的⽹站的形式。所以部署Web服务，显然需要考虑三个问题。
（1）如何运⾏Vue项⽬？ 写了项⽬，如何让⽤户的浏览器能够运⾏？
（2）Nginx服务如何配置？ ⼀般来讲需要⾃⼰修改/配置Nginx中的.conf⽂件
（3）上述两件事，如何在Docker中完成？
针对这前两个问题的不同思考，会衍⽣出不同的部署⽅案。换⾔之，我们在百度或CSDN上搜索，会有很多种⽅案，不同的⽅案除了个⼈配置，甚⾄在思路上都是不⼀样的。笔者也给出了三种思路。
但是如果考虑Docker的特性，会发现⼀些思路是不合理的（前两种思路），⽽且绝⼤多数部署Docker都是通过编写DockerFile的⽅式。所以想看具体步骤的同学，可以直接跳到第三种思路（本⽂选⽤的也是第三种思路，前两种只做讨论）。
1.Docker中创建Node.js容器
当我们在本地运⾏Vue项⽬的时候，我们需要安装Node.js环境，执⾏相关的npm命令。
npm run dev
所以，我们如果要部署Vue项⽬，是否也需要在服务器端安装Node.js的环境，然后这样开启⼀个对外服务的进程呢？这种⽅案，我们要在docker中实例化node.js容器。
答案是否定的，Vue项⽬本质上是⼀堆静态⽂件（HTML、CSS、JS），就是直接运⾏在浏览器中的。
换⾔之，如果我们单纯的部署Vue项⽬，浏览器本⾝的引擎就是解析这些代码⽤的，我们只需要把资源放到对于的位置上即可。
这⾥在知乎关于vue部署的问题中，有详细的讨论。如果是第⼀次接触部署前端项⽬，可以详细读⼀下。也可以去了解⼀下Node.js到底是什么。
⾸先VUE 是⼀个javascript的前端框架，注定了它是运⾏在浏览器⾥的，对服务器本地没有任何要求，只要⼀个静态⽂件服务器能通过http访问到其资源⽂件就⾜矣。
npm run dev 是⽤来在本地开发的时候做调试⽤的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，⽣产环境⾥就不该存在npm，甚⾄nodejs也不需要（⽤nodejs来做web静态服务的除外）
（因此，该⽅案被否）
2.Docker实例化Nginx容器，进⼊容器修改配置⽂件
先说结论：第⼆种⽅案，思路是正确的。但是实际上不可⾏。
思路：既然vue就是⼀堆静态⽂件，通过HTTP访问即可运⾏。
步骤：（1）那我实例化⼀个Nginx容器 （2）把Vue⽂件扔进去 （3）进⼊容器，修改.conf⽂件（Nginx配置⽂件，匹配对应⽬录）。
这⾥，把vue⽂件扔到Docker容器中，可能需要Docker⾃带的拷贝命令。
# docker cp 要拷贝的⽂件路径容器名：要拷贝到容器⾥⾯对应的路径
docker cp /opt/test.js（被拷贝的⽂件）容器id：/usr/local/tomcat/webapps/test/js（容器⽬标路径）
# 通过docker exec进⼊容器，这⾥其实⽤的容器中的Ubuntu提供的Bash(shell)
sudo docker exec -it xxxxxx（容器id） /bin/bash
这个思路⾛下来，是能够成功部署Vue项⽬的，但存在问题。
如果我们实例化⼀个Nginx服务，会发现它是跑在⼀个Ubuntu上⾯的，对外看起来是⼀个容器。Docker执⾏的逻辑是：Ubuntu容器+安装Nginx+启动Nginx，这三个东西整合为了1个容器，作为宿主机（我们的电脑上看）是⼀个进程。
但如果⼿动修改Nginx配置⽂件导致Nginx挂掉，会导致启动Nginx这⼀步报错，产⽣异常退出（exit），进⽽这个容器（进程）也就挂掉了，⽽挂掉以后⽆法在操作容器。
不能操作容器的原因：
我们之所以能够操作容器（修改容器中的⽂件），是因为容器中的精简Ubuntu为我们提供了Bash(Shell控制台)，如果容器这个进程产⽣异常/错误挂掉，我们就⽆法使⽤容器中的shell了，因为容器的shell是进程中的Ubuntu提供的，如果进程直接挂了，那shell⾃然也就没了。
换⾔之，docker exec进⼊容器修改⽂件的⽅法此时难以实现。
1个Nginx服务 （对外提供Web服务）
1个精简的Ubuntu/CentOS系统 （提供了基础环境+给⽤户使⽤的shell）
1个Docker容器
所以采⽤第⼆种⽅案会遇到两个问题
修改配置⽂件⿇烦。 精简的Ubuntu仅是运⾏环境，没有提供Vim这样的⼯具。
修改配置⽂件导致Nginx挂了，会导致整个容器挂掉，并且⽆法再启动。
因此，第⼆种⽅案，其实也不合理，并且很⿇烦，放弃。
3.编写DockerFile，将基础镜像Nginx和配置⽂件写⼊
综上所述，选择⽅案3是合理的，也是Docker官⽅推荐的部署⽅式，在正式开始部署单元，可以看到具体的步骤。
这⾥写⼀些啰嗦的话（可以略过）
还在更新中。。。。。
正式开始部署（选择编写DockerFile的⽅式，简单直接）
1.获取dist⽂件，编译好的⽣产环境代码
（1）在Vue的项⽬⼯程⽂件⽬录下，执⾏命令，得到dist⽂件。dist⽂件是我们最终需要的代码。
npm run build
（2）将⽂件拷贝到我们的服务器中（也可以通过ftp等⽅式，scp简单直接）
# 从本地复制到服务器的scp命令（win10也有scp，⽆须额外安装。可以直接使⽤scp）
scp local_file remote_username@remote_ip:remote_file
# 若拷贝⽂件夹使⽤-r
scp -r local_file remote_username@remote_ip:remote_file
2.编写DockerFile
我们将要编写的DockerFile，和dist⽂件中的代码，放在同⼀⽬录下，执⾏Docker相关命令，就可以获得Docker镜像。
（1）编写DockerFile。如果在服务器中，通过vim Dockerfile就可以创建⽂件，然后将以下内容按需要的复制到⽂件中。
# 设置基础镜像
FROM nginxnginx部署前端项目
# 定义作者
MAINTAINER xujiang
# 将dist⽂件中的内容复制到 /usr/share/nginx/html/ 这个⽬录下⾯
# /nginx/html是f中index对应⽬录，不同版本Nginx可能有区别
COPY dist/  /usr/share/nginx/html/
注：
【1】COPY命令是将相关的代码拷贝到Nginx的默认的⽬录下，①需要注意代码存放⽬录，②是否需要⾃定义f⽂件，如果按照默认的Nginx设置，放到/nginx/html⽬录（默认⽬录）即可。
【2】为什么要⽤COPY命令？解析：由于 docker 的运⾏模式是 C/S。我们本机是 C，docker 引擎是 S。实际的构建过程是在docker 引擎下完成的，所以这个时候⽆法⽤到我们本机的⽂件。这就需要把我们本机的指定⽬录下的⽂件⼀起打包提供给 docker 引擎使⽤。（来⾃菜鸟教程）
（2）考虑是否需要添加Nginx的配置⽂件。如果使⽤默认配置⽂件，不需要考虑（2）。
注：这⾥熟悉Nginx的同学⾃⾏完成即可。阅读f可知，Nginx会默认#include相关⽬录下的.c
onf⽂件，如果需要配置Nginx，可以按需要编写后，添加到DockerFile中，COPY到容器的对应⽬录。
注：
【1】Dockerfile 是⼀个⽤来构建镜像的⽂本⽂件，⽂本内容包含了⼀条条构建镜像所需的指令和说明。
【2】所以Dockerfile定义的是要做的事，既有Docker提供的FROM、COPY、ADD等命令，可以以执⾏shell指令，⽐如合理的使⽤shell中的echo语句输出⼀些有意义的信息。
【3】如果想要做更多的事，建议学习⼀些Dockerfile，
【4】Nginx相关的事需要了解⼀下Nginx的原理，不在本⽂的讨论范畴。单就部署⼀个服务来说，最主要的是可以看⼀下Nginx配置⽂件f和f，关注配置⽂件映射了哪些内容（可以单纯的实例化⼀个标准的Nginx容器，进⼊容器中，通过cat命令打印出来查看）
3.获得镜像，实例化得到Vue项⽬的容器
（1）通过Dockerfile构建镜像
# -t 指定1个名字
sudo docker build -t vue-test-01(⾃定义镜像名).
这⼀步意义：将Dockerfile发给Docker，由Docker引擎⾃动的帮我们构建镜像。
如FROM Nginx,Docker，（可以在控制台观察执⾏的过程）
Docker会⾃动的帮我们拉取Nginx
顺序执⾏，以此类推。
这⾥可以注意⼀下：[1]构建命令中的 ‘.’ 是不可省略的（此处填写上下⽂路径），也就是说如果我们在Dockerfile所在⽬录下执⾏build 命令，写 ‘.’ 即可 [2]如果build命令执⾏的有问题，不会⽣成镜像，并且会提⽰相应的错误。
上下⽂路径，是指 docker 在构建镜像，有时候想要使⽤到本机的⽂件（⽐如复制），docker build命令得知这个路径后，会将路径下的所有内容打包。（来⾃菜鸟教程）
（2）如果构建完成，可以在Docker中查看到该镜像。
# Docker查看镜像列表
sudo docker image ls
# 如果镜像有问题，可以删除对应的镜像
docker rmi vue-test-01
此时，我们通过DockerfIle构建的镜像已经在我们的本地仓库中（服务器的Docker中）已经可以查看到和使⽤了。如果我们想要放到Docker Hub中，则需要⾃⼰推送到对应的位置。
（3）实例化对应的容器
# --name指定容器的名字，-p是端⼝映射：将服务器 8080 端⼝映射到容器内部的 80 端⼝
# -d 后台运⾏
docker run --name vue-test-01-Con(容器名) -p 8080:80 -d nginx
（end）到此为⽌，部署⼯作就完成了。我们访问对应的地址：端⼝，就可以访问刚刚部署的Vue服务了，服务是持续运⾏的。可以查看刚刚实例化的容器。
如果出现错误，会发现容器的状态是Exit(错误码)，可以查⼀下原因。
# 列出正在运⾏的容器
sudo docker ps
# 显⽰所有的容器，包括未运⾏的（包括运⾏后停⽌的）
sudo docker ps -a
注：
部署以后可能会遇到访问⽐较慢的情况。主要有两个原因：【1】部署在Docker中，相当于在服务器上⼜跑了Ubuntu+Nginx，会有⼀部分性能损失 【2】Vue默认设置开发的是单页⾯应⽤，默认情况下，访问会⼀次加载应⽤中的所有页⾯（尽管你可能访问的是Home，但是其他组件也被加载了），这⾥属于Vue部分的问题，可以通过懒加载等⽅式解决。
其实选定合理的⽅案以后，正式的部署是⽐较简单的。
后续⽅案的思考（持续集成、持续交付为⽬标）
K8s管理docker容器⽅案，正在更新中。
通过Docker容器化部署⼀个Vue应⽤是⽐较简单的。⽽且如果代码进⾏了修改/更新，通过Dockerfile重新构建镜像（甚⾄Dockerfile都不需要修改），在实例化容器即可，可以⾮常迅速的完成部署和服务的对外发布。如果你不要这个服务了，可以通过Docker轻松地销毁他，体验容器带来的便利。
但是这仅仅是容器化部署带来的⾮常⼩的⼀部分好处，如果单纯为了这个⽬的，其实写脚本可以完成。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。