zoukankan      html  css  js  c++  java
  • 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自动的构建,走这个流程


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


     

    结束



     

  • 相关阅读:
    gradle 使用本地maven 仓库 和 提交代码到maven
    eclipse 快捷键
    eclipse gradle 找不到依赖解决办法
    java web 简单的权限管理
    spring 配置properties 编码
    html 一些坑。。。
    js 的 一些操作。。。
    maven 过滤webapp下的文件
    django 模型
    vue系列之webstrom的设置
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/13630005.html
Copyright © 2011-2022 走看看