相见的难题显现出来正是如题所述,因而作为难题。

欣逢的难点显现出来便是如题所述,由此作为难点。

前言

供销合作社新品类是运用springboot作为后端的微服务,前端就让笔者要好捣鼓用明天相比火的vue来做的分开前端,边学边做折腾了一个月,项目也基本上了成就了二个意义,准备发布下测试环境了,但是难题来了.服务器上的后端服务是连接了cas中心认证服务的单点登录的(cas接单页应用真的很费劲啊,有时间就写下去).所以是基于https的,所以和同事钻探,那就选拔nginx大法搭建一个全站https吧

TeamCity是Jetbrains的不停集成工具,免费使用的话能够设置二十一个营造脚本,对于我们个人来说基本上是十足了。当然如若现在超过限定了,能够考虑选取另二个知名的无休止集成工具Jenkins。当然很早从前我就设置了TeamCity,但是平昔没机会用。这几天恰好随便写了四个私家小品种,就用它来测试一下TeamCity的不断集成成效吗。

小编们领略,前端有不少便于的塑造和包裹工具,如 webpack
等,平常我们会把前端文件打包到dist目录下,铺排到服务器上,如 nginx 等。

大家知道,前端有这几个福利的创设和包装工具,如 webpack
等,平时我们会把前端文件打包到dist目录下,安插到服务器上,如 nginx 等。

vue2项目中的配置

  • 在webpack布局里首要照旧config/index.js用TeamCity完毕npm项指标自动铺排,前端打包文件在。的assetsPublicPath的设置

  //config/index.js
  module.exports = {
  build: {
    testEnv: require('./test.env'),
    prodEnv: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/leo-face/',    //配置的是nginx下根目录新建的一个leo-face文件夹
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8089,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

只顾: 项目是用vue-cli脚手架搭建的,就有那么些config目录

  • 创设的配备路径弄好了.就要实践相应的下令了

npm run build:test
  • 附上packagejsonscript的命令

"build:test": "cross-env NODE_ENV=testing npm_config_preview=true  npm_config_report=true node build/build.js",
  • vue-cli生成的沙盘是向来不那些命令的,那是本身自个儿自定义的命令.首先会找到build/build.js读取相应安插,读取的或然webpack.prod.conf.js这一个布局,但是作者在那些webpack
    profile中做了有的改动

 // 调用方法,判断引入的后端接口地址
//这样一来,引入的就上面build.js对象中的testEnv的配置了
 var env = process.env.NODE_ENV === 'testing'
  ? config.build.testEnv
  : config.build.prodEnv

//plugins的HtmlWebpackPlugin修改
 new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      favicon: resolveApp('leo-face.ico'),
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

//下面是test.env.js的配置
var merge = require('webpack-merge')
var devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  BASE_API: '"https://testx.xxx.net/leo"',   //整个应用后端请求的地址
}) 
  • 装进环境安排好了,包也打好了转移的目录便是这么的,下图

WX20170830-222558@2x.png

  • 现行反革命还无法一直去折腾nginx,因为还有个关键的安装没有变动,假使您的种类中选拔的vue-router,想安顿上服务器有幽雅的途径,那么今后就必要设置你的router对象属性了

//创建路由
export default new Router({
  mode:'history',  
  base: '/leo-face/',
  routes: constantRouterMap
});

参数笔者就不表达了,百度,官方一堆介绍

  • 好了上面能够去折腾一下nginx了,由于自家在当地曾经搭建过nginx,也从没难题,所以就径直上服务器折腾.

先来说下自家的规范,作者的TeamCity是陈设在自身的微型总计机上,本身的微型计算机上当然还有任何部分开发软件。此外作者还有一台服务器,安装着Nginx等软件,并开启了FTP。以后要做的就是安装一个不断集成,每当小编付出Vue项指标时候,TeamCity自动打包项目,然后上传到FTP目录,让服务器更新文件。那几个进程说起来好像挺复杂,其实倒是挺简单的。

此次遭受的难点是自家下载了人家的两个代码压缩包,是八个 vue.js + webpack
的种类,营造好后上传服务器,能够确认保证的是服务器上的 nginx
配置完全正确,不过在浏览器上怎么访问都以 403 forbidden 。

本次蒙受的难点是本人下载了人家的一个代码压缩包,是叁个 vue.js + webpack
的类别,打造好后上传服务器,能够保证的是服务器上的 nginx
配置完全正确,可是在浏览器上怎么访问都是 403 forbidden 。

Nginx 相关安排

  • 服务器是linux的,和mac的差异相当小.然而因为本人是用homebrew装的nginx,只是目录有点不一样等而已,附上本身三脚猫的图画武术的流程图.

image.png

服务器配置

自笔者用的FTP软件是vsftpd,那是一个比较安全的FTP服务器端,一般Linux上都是用它。那个软件的败笔正是当您登录的时候,FTP文件夹只可以是用户主目录,无法自定义修改为别的目录。而Nginx默许的文件目录一般在/var/www/html或者/usr/share/nginx/html等等的。由此nginx需求将HTML文件目录配置修改为用户主目录。

自然一般情状下不会将整个用户主目录暴露在Web服务器下,而是只揭破二个子文本夹。所以nginx配置文件能够那样写。

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /home/yitian/html/my-website;
....

当然如此配置来说,访问nginx只会获得403张冠李戴。那几个题材找麻烦了本人任何一个夜晚的岁月。最终到底找到了化解办法。Linux下软件对权力格外乖巧。假使nginx要访问用户主目录下的文书夹的话,该公文夹下全体文件必须对全数人可读,该文件夹下的全部子文件夹必须对全部人开放可实施权限,用户主目录也亟须对全数人可读。所以对于小编的话,必要对用户主目录和Web文件目录施加701和755权力,恐怕直接将用户主目录设置为755也得以。当然笔者觉得用户主目录的权杖照旧小一点好。

chmod 701 /home/yitian
chmod 755 -R /home/yitian/html/my-website

除此以外再说一句,很四个人管理VPS喜欢使用root账户管理,那样做的利益是不须要频仍输入管理员密码。然而一贯用最高权力或然有安全隐患,而且使用root账户成立的种种文件和文件夹的权限也正如高。小编已早先接纳的正是root账户创制的my-website文件夹,然后发现FTP不能向里面传文书,因为权限不够。重新采纳普通账户创设该文件夹之后,FTP服务才方可健康访问文件。

最后在说一点,即便您传入的文书夹含有汉语文件名的话,服务器要求将locale设置为汉语(zh_CN.UTF-8),不然粤语文件名会突显成??。Ubuntu等操作系统或然还索要安装中文支持。这些标题得以参考澳门金沙国际,干什么作者的Linux服务器不帮衬Unicode。

仔细观望项目结构与公事权限,发现项目下全体文件都以 755
的权能,全数文件夹都是 700
的权位,塑造出来的公文也如出一辙延续了那样的权限,导致 nginx
无法访问文件。详细原理请参考 linux 文件权限和 nginx 文书档案。

有心人考察项目布局与公事权限,发现项目下拥有文件都以 755
的权柄,全部文件夹都以 700
的权能,创设出来的文本也一致继承了那般的权位,导致 nginx
不能访问文件。详细原理请参见 linux 文件权限和 nginx 文书档案。

https域名入口服务器的nginx.conf配置,那台服务器是215

  • linux上的nginx/config目录nginx.conf配置

    //后端服务负载策略
    upstream leo {
        server   xxx.xxx.xxx.213:8424 weight=1;
        server   xxx.xxx.xxx.214:8424 weight=1;
    }
  //前端负载策略
    upstream leo-face {
        server   xxx.xxx.xxx.213:443 weight=1;
        server   xxx.xxx.xxx.214:443 weight=1;
    }

 //server配置
  server {
        listen       443;
        server_name  testx.xxx.net;

        ssl on;

        ssl_certificate      "name.pem"
        ssl_certificate_key  "name.key";

        ssl_session_cache    shared:SSL:10m;
        ssl_session_timeout  10m;
        ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;

        ssl_ciphers  HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP:+MEDIUM;
        ssl_prefer_server_ciphers  on;

        location ~ /leo-face {
            access_log logs/leo-faceacc.log main;
            error_log logs/leo-face.log warn;
            proxy_pass https://leo-face;
            proxy_redirect          off;
            proxy_set_header        Host            $host:443;
            proxy_set_header        X-Real-IP       $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout   180;
            proxy_send_timeout      180;
            proxy_read_timeout      180;
            proxy_buffer_size       128k;
            proxy_buffers           4 128k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            add_header  Nginx-Cache "$upstream_cache_status";
        }

        location ~ /leo {
            access_log logs/leoacc.log main;
            error_log logs/leo.log warn;
            proxy_pass https://leo;
            proxy_redirect          off;
            proxy_set_header        Host            $host:443;
            proxy_set_header        X-Real-IP       $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout   180;
            proxy_send_timeout      180;
            proxy_read_timeout      180;
            proxy_buffer_size       128k;
            proxy_buffers           4 128k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            add_header  Nginx-Cache "$upstream_cache_status";
        }
    }

重启nginx服务器访问测试nginx的https是还是不是打开

TeamCity配置

澳门金沙国际 1

澳门金沙国际 2

转折服务器nginx.conf的布署

server {
    listen       443;
    server_name  xxx.xxx.xxx.213;

    location /leo-face {
        try_files $uri $uri/ /leo-face/index.html;   
        root   /opt/nginx/html;
        index  index.html index.htm;
    }

    ssl on;

    ssl_certificate      "name.pem"  
    ssl_certificate_key  "name.key";

    ssl_session_cache    shared:SSL:10m;
    ssl_session_timeout  10m;
    ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;

    ssl_ciphers  HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP:+MEDIUM;
    ssl_prefer_server_ciphers  on;

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

连锁注解:

  • 213
    服务器的证书能够从进口服务器215方面拷贝一份过来,保持一致,ssl配置也得以拷贝
  • try_files $uri $uri/ /leo-face/index.html;出于页面是由js内部进行加载的,匹配当前url的兼具地点,没有页面重定向到index.html.
    法定认证
  • 有人觉得自家后台服务为何没有配备ssl?
    上海体育场面已经宣示了,后端springboot微服务应用的是consul这一个分布式服务发现和共享配置的缓解方案,在行使运转时读取了consul配置中央敞开的springboot应用内置tomcat容器的ssl配置..并且证件放在应用包中.

创办项目

自家的那几个类别是利用Vue脚手架搭建的一个基于WebPack的npm项目,并上传到了Git仓库。在下图中填入项目所需各个音讯即可。鲜明以后,TeamCity会自动拉取项目并尝试进行创设。当然那一个尝试十分九景色下都会破产,必要大家手动设置构建步骤。那也是TeamCity免费版20个营造步骤的限制原因所在。

澳门金沙国际 3

创立项目

(如图左为常规成立的公文权限,右为相当权限)

(如图左为正规创造的公文权限,右为格外权限)

发布

  • 计划一体都形成了,接下去就是主要的点了.发表你的前端选拔,记得前边打包好的文书了吧.
    • 在nginx负载转载出来的应用服务器上(著作中是213,214俩台服务器)的nginx/html目录下新建一个leo-face目录.把公文拷贝进去.
    • 以后您的拜访目录就应当像那样https://test.xxx.net/leo-face
    • 运行nginx或许重启nginx,nginx -s reload
  • 新建文件夹的名号是因为事先打包时webpack中布署了assetsPublicPath的不二法门正是以此名字,所以在index.html引入的js,css地址前缀也会带那一个称号
  • 好了,今后做客一向下探底望,OK~ 完美…

https main.png

成立营造步骤

其一地点就是本文的主导所在,当通晓了TeamCity的营造设置进程之后,大家就足以随意的组成出比较复杂的营造进度。

澳门金沙国际 4

构建进度

那边也有贰个链接描述了那些难点:403 Forbidden Error and How to Fix it |
Nginx Tips

此处也有3个链接描述了这么些标题:403 Forbidden Error and How to Fix it |
Nginx Tips

会遭受的题材

  • nginx入口服务器
    配置相同域名四个访问路径时.是有12分规则的,比如小编把leo-face放在leo下就不可能访问到/leo-face那么些地方了
  • 如遵照小说中的顺序无法过渡成功,则
    先能够配备基于http单点应用服务器的nginx是或不是能够寻常访问前端应用.前面再将https入口服务对接负载转载到应用服务器上

安装npm包

对此三个档次以来,第3步做的政工必然正是拉取重视包,然后尝试编写翻译运维。对于作者这种npm项目来说,TeamCity没有预设的选项,所以要求选择命令行类型。由于npm包在国内访问不太通畅,所以在填写命令行的时候,使用了Taobao的镜像。

npm install --registry=https://registry.npm.taobao.org

澳门金沙国际 5

安装npm包

自然在这一步笔者还一向在自定义脚本那里填写了npm run build这一行代码,不过结果发现TeamCity好像并从未进行这一行,所以只可以讲这些添加为单独的营造步骤。其余本来作者是准备选用天猫商城封装的cnpm命令,可是结果发现那几个命令在这里并不可知,强行使用的话只会唤起找不到该命令,所以不得不选拔那种折中方法。

上面大家需求修补文件权限,使得全体文件是 644 权限,而持有文件夹是 755
权限。几个一个装置太费事了,能够动用 find
命令加上文件类型判断,来拓展批量操作。

上面大家要求修补文件权限,使得全数文件是 644 权限,而有所文件夹是 755
权限。2个2个设置太难为了,能够使用 find
命令加上文件类型判断,来拓展批量操作。

以上内容正是这么些前端的单页应用发表测试环境的享有手续了.不过发表正式环境恐怕还不是完全一致

包装项目

摸底了第3个步骤,那么打包项目那几个手续就很简单领会了。

澳门金沙国际 6

包装项目

# 更改文件夹权限
find . -type d -exec chmod 755 {} \;
# 更改普通文件权限
find . -type f -exec chmod 644 {} \;
# 更改文件夹权限
find . -type d -exec chmod 755 {} \;
# 更改普通文件权限
find . -type f -exec chmod 644 {} \;

上传dist文件夹

这一步正是那个不断集成最珍视的一步了,它关系到服务器的FTP配置。但是做起来也不算难。首先后面包车型客车FTP服务端必要配置好,服务器端nginx也要安装好。然后在那边设置FTP的用户名和密码。那里最重大的一步正是Path
to
sources的安装了。这是多少个箭头分隔的字符串,左面是项目中供给上传的文本夹,右面是FTP服务器中要上传的公文夹。那里还足以选拔***通配符。详细布署介绍能够点击下边包车型地铁小问号按钮(图里没截到)查看官方文书档案。

澳门金沙国际 7

上传项目

设置完成以往,点击项目右上角的run按钮,起始履行创设进度。假使拥有配置都不错的话,稍等片刻就会产出创设成功的提醒,然后访问服务器,就会意识nginx也健康的体现了打包之后的品种。那样一来就水到渠成了。等到下次付出好项目并交付的时候,TeamCity就会自动物检疫查和测试到变化并履行打造、提交到服务器。这么些进程是完全自动化的,大家要做的就算等待片刻就能够看来服务器上的实时变化,是还是不是很爽呢?

find 命令的用法请参见 man 手册。

find 命令的用法请参见 man 手册。

如此,大家再度在浏览器访问服务端地址,就足以日常访问了。

那样,大家再次在浏览器访问服务端地址,就足以健康访问了。

本文基于澳门金沙国际 8知识共享署名-非商业性利用-相同方法共享
4.0
国际许可协议公布,欢迎引用、转发或演绎,可是必须保留本文的签订契约BlackStorm以及本文链接,且未经许可不可能用来生意指标。如有疑问或授权协商请与自笔者关系。

本文基于澳门金沙国际 9文化共享署名-非商业性利用-相同方法共享
4.0
国际许可协议揭露,欢迎引用、转发或演绎,然而必须保留本文的署名BlackStorm以及本文链接,且未经许可不能够用来生意指标。如有疑问或授权协商请与本人沟通。

相关文章