26.Vue技术栈开发实战-项目部署

jenkins和nginx docker 配置教程： http://note.youdao.com/noteshare?id=755ceb8a2c34b517688de474a87f3e70

Jekins个Nginx都是用docker来安装。

项目中需要注意的地方

竖线是baseUrl，这里是你的基本路径。

服务器上要看你放在什么文件夹下，再来设置这个路径。

如果是域名下的/admin路径的话，那么这里就要改成/admin. 如果直接就是域名的话，这里直接设置为 / 就可以了。

接口的地方，一般如果是生产环境都会加个前缀/api/ 所有的接口都会加上这个前缀。然后在服务器上做代理。前面会拼上域名和端口。后面的接口都会有api这个字段。

如果你是通过vue.js做代理的话。下面这个代理是开发环境用的代理。解决跨域问题。这里一大包就失效了。它是不能在生产环境下用的。只能在你本地devServer上做的代理。你打包之后在生产环境上去通过，

mock

这里判断只有当不是生产环境的时候，才会用到mock

路由模式

如果这里不是设置，那么在正式环境。是用#号哈西的模式来模拟路由的跳转的。

设置为history就不会有#号了。但是设置这种模式，需要服务端的配置支持。待会讲到nginx配置的时候，我们会讲到这个地方。

如何创建这连个docker，如何的配置

Jenkins配置

上面起个名字，下面选择构建一个多配置项目。最下面点击ok即可。

github的项目，这配置github的地址。

构建时的脚本命令
手动的做这个操作。，首先是拉取下来，npm install 先安装所有的依赖，然后打包就需要npm run build

打包后把 node_modules依赖文件夹全部删掉。

$name就是上面代表的vue-cource

如果以前打包过，那么就删除vue-cource文件夹，然后吧dist重命名为vue-cource文件夹

用tar执行打包压缩的操作。把vue-cource打包成vue-cource.tar.bz2这样一个压缩包。

scp这个命令，把这个文件上传到服务器上的user/local/product目录下。172.17.0.3是另外一个docker容器的ip。这是要上传到另外一个nginx的docker容器里面的。

通过ssh来运行这些命令

首先删掉这个路径下的文件夹。就是把旧的先删掉。

进入这个文件夹

把上面传过来的压缩包进行解压。解压完成后就是一个vue-cource的文件夹了。

点击立即构建，就会自动的把刚才我们配置的那些命令依次去执行。

点进去

nginx的配置

首先进去etc/nginx/conf文件夹下编辑 default.conf文件

监听的端口是80，serverName是localhost

root就是发布的文件夹路径。index就是默认打开的页面
try_files很重要的一个

前端这里使用history的时候。后端的配置

所有匹配不到静态资源的，都指向index.html。前端的路由都是在这个index.html上做的操作。通过前端路径控制加载不同的js加载渲染。打开的都是index.html. 只不过url它是在变化。如果这里不配置这个的话。只要刷新浏览器就会报错，一片空白。什么都没有。因为url匹配不到静态资源。所以这里要配置这个，匹配不到资源的时候，指向index.html.

这个在vue-route的官方文档有。

接口的跨域问题。所有请求中带api的请求都会被代理到192.168.199.207

192.168.199.207是本地起的服务。起的就是代码中Server的服务。

配置完之后，热重载一下。

构建的过程

上传到服务器

测试

1234映射的nginx的80端口

点击登陆报错

后端服务报的401错误。是因为登陆的密码不正确，我们写死的是123

再来测试

登陆后进入

点击跳转，所有的链接都是没有#号的

这个错误是因为表格数据在前端用mock模拟生成的，而在server端是没有自定义这个getTableData接口的。所以这里报的401

每次与代表提交变动都可以来让Jenkins自动的构建，走这个流程

打包完的代码，名字里都加了哈希，这种随机的字符串。这样就能避免每次生成的文件名一样，造成的浏览器缓存。