如何自动化部署项目?折腾服务器之旅~


Posted in Javascript onApril 16, 2019

本篇文章讲的不是如何把一个项目部署上线,而是如何自动化上线。

开发了一个需求管理和发布系统。

通过这个系统,可以创建需求、创建发布计划、创建分支、部署到测试环境、部署到生产环境、正式上线、合并代码等。

一、功能设计

9.9元的阿里云服务器真的很慢,但还是足够折腾完这个项目。
用3个目录来模拟不同的环境。

目录 存放
project 存放所有的项目,比如本系统的前后端代码。
pre-dir 预发环境,当然是用来测试的。
pro-dir 生产环境,测试没问题,部署上线。

一图胜千言。

如何自动化部署项目?折腾服务器之旅~

二、系统页面

我的任务

接到一个新的需求,可以新建一个需求,并创建开发分支。

如何自动化部署项目?折腾服务器之旅~

发布队列

开发结束之后,便可以到发布队列中,部署到预发环境进行测试。 测试通过指定Cookie 就可以访问到测试的代码。最终再进行线上部署。

 如何自动化部署项目?折腾服务器之旅~

项目信息

如何自动化部署项目?折腾服务器之旅~ 

二、技术栈

前端技术栈
Vue + elementUI,具体代码在Github,感兴趣的可以看下并点个star哈~✨
服务端技术栈
非常常见的Node.js(Koa2) + Mysql + Redis + Pm2。
具体代码在Github,感兴趣的可以看下并点个star哈~✨

三、Redis和Session配置

 

// utils/Store.js
const Redis = require("ioredis");
const { Store } = require("koa-session2");
 
class RedisStore extends Store {
  constructor() {
    super();
    this.redis = new Redis();
  }
 
  async get(sid, ctx) {
    let data = await this.redis.get(`SESSION:${sid}`);
    return JSON.parse(data);
  }
 
  async set(session, { sid = this.getID(24), maxAge = 1000 * 60 * 60 } = {}, ctx) {
    try {
      console.log(`SESSION:${sid}`);
      // Use redis set EX to automatically drop expired sessions
      await this.redis.set(`SESSION:${sid}`, JSON.stringify(session), 'EX', maxAge / 1000);
    } catch (e) {}
    return sid;
  }
 
  async destroy(sid, ctx) {
    return await this.redis.del(`SESSION:${sid}`);
  }
}
 
module.exports = RedisStore;
// 入口文件
const session = require("koa-session2");
const Store = require("./utils/Store.js");
// session配置
app.use(session({
  store: new Store(),
  key: "SESSIONID",
}));

 四、Router配置

为了Router看起来更优雅,也是通过中间件

// 1、middleware配置文件
const routers = require('../routers');

module.exports = (app) => {
  app.use(routers());
}

// 2、index.js入口文件
const middleware = require('./middleware');
middleware(app);

// 3、routers 注册文件
const Router = require('koa-router');
const router = new Router();
const koaCompose = require('koa-compose');

// 接口入口
const {insertDemand} = require('../controllers/demand/insertDemand');
const {deleteDemand} = require('../controllers/demand/deleteDemandByDid');
const {updateDemand} = require('../controllers/demand/updateDemandByDid');

// 加前缀
router.prefix('/api');

module.exports = () => {
  // 新增需求
  router.get('/insertDemand', insertDemand);
  // 删除需求
  router.get('/deleteDemand', deleteDemand);
  return koaCompose([router.routes(), router.allowedMethods()]);
}

五、nginx配置

最头痛的就是nginx配置了,因为不是很熟悉,一直在试错、踩坑。不过还好终于成功了!
前后端项目通过Nignx提供服务,Node服务通过Nginx转发,主要是为了验证各种环境。
如果不设置Cookie,默认访问的就是线上环境,设置Cookie 就会走到预发布测试环境,用于测试。

# cookie 取TEST 赋值给$proxy_node
map $cookie_TEST $proxy_node {
  default "";
  "1"   "1";
  "2"   "2";
  "3"   "3";
}

# 发布管理系统前端设置
server {
  listen    80;
  server_name test.xue.com;
  if ($proxy_node = ''){
    set $dollar "/data/pro-dir/dandelion/dist/";
  }
  if ($proxy_node = "1") {
    set $dollar "/data/pre-dir/dandelion/dist/";
  }
  location / {
    root $dollar;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

# 发布管理系统后端设置
# 反向代理到node服务
server {
  listen    80;
  server_name m.xue.com;
  if ($proxy_node = ''){
    set $dollar "/data/pro-dir/study-demo/";
  }
  if ($proxy_node = "2") {
    set $dollar "/data/pre-dir/study-demo/";
  }
  location / {
    root $dollar;
    index index.html;
  }
}

# demo项目前端设置
server {
  listen    80;
  server_name api.xue.com;

  location / {
    if ($proxy_node = "") {
      set $from 3001;
      proxy_pass http://47.107.188.55:3001;
    }
    if ($proxy_node = "3") {
      set $from 3002;
      proxy_pass http://47.107.188.55:3002;
    }
  }
}

六、一些中间件

常用的HTTP设置

解决跨域,OPTIONS请求,携带Cookie凭证等问题。

module.exports = () => {
  return async (ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', 'http://test.xue.com');
    ctx.set('Access-Control-Allow-Credentials', true);
    ctx.set('Access-Control-Allow-Headers', 'content-type');
    ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, HEAD, PUT, POST, DELETE, PATCH');

    // 这个响应头的意义在于,设置一个相对时间,在该非简单请求在服务器端通过检验的那一刻起,
    // 当流逝的时间的毫秒数不足Access-Control-Max-Age时,就不需要再进行预检,可以直接发送一次请求。
    ctx.set('Access-Control-Max-Age', 3600 * 24);
    if (ctx.method == 'OPTIONS') {
      ctx.body = 200; 
    } else {
      await next();
    }
  }
}

登录

这个系统属于强制登录的,登录统一进行了处理。

const Store = require("../../utils/Store");
const redis = new Store();
module.exports = () => {
  return async (ctx, next) => {
    // 白名单
    if (ctx.request.url === '/api/login') {
      return await next();
    } 
    const SESSIONID = ctx.cookies.get('SESSIONID');

    if (!SESSIONID) {
      return ctx.body = {
        mes: '没有携带SESSIONID~',
        data: '',
        err_code: 1,
        success: false,
      };
    }

    const redisData = await redis.get(SESSIONID);
    if (!redisData) {
      return ctx.body = {
        mes: 'SESSIONID已经过期~',
        data: '',
        err_code: 1,
        success: false,
      };
    }

    if (redisData && redisData.uid) {
      console.log(`登录了,用户uid为${redisData.uid}`);
      await next();
    }
  }
}

七、操作shell脚本

举个例子,创建项目分支

let path = ''; // 项目路径
// 创建分支
const branch_name = `branch_${new Date().getTime()}`;
cp.execSync(`/data/dandelion-server/shell/createBranch.sh ${path} ${branch_name}`);
#!/bin/bash

cd $1
git pull origin master
git checkout -b $2
git push --set-upstream origin $2

八、连接数据库

config.js配置文件

let dbConf = null;
const DEV = {
  database: 'dandelion',  //数据库
  user: 'root',  //用户
  password: '123456',   //密码
  port: '3306',    //端口
  host: '127.0.0.1'   //服务ip地址
}

const PRO = {
  database: 'dandelion',  //数据库
  user: 'root',  //用户
  password: '123456',   //密码
  port: '3306',    //端口
  host: 'xx.xx.xx.xx'   //服务ip地址
}
dbConf = PRO; //这个可以通过判断区分开发环境
module.exports = dbConf;

数据库连接文件

const mysql = require('mysql');
const dbConf = require('./../config/dbConf');
const pool = mysql.createPool({
 host: dbConf.host,
 user: dbConf.user,
 password: dbConf.password,
 database: dbConf.database,
})

let query = function( sql, values ) {
  return new Promise(( resolve, reject ) => {
    pool.getConnection(function(err, connection) {
      if (err) {
        reject( err )
      } else {
        connection.query(sql, values, ( err, rows) => {
          if ( err ) {
            reject( err )
          } else {
            resolve( rows )
          }
          connection.release()
        })
      }
    })
  })
}
module.exports = {
  query,
}

就可以在model层调用了~

const {query} = require('../common/mysql');

class UserModel {
  constructor() {}

  /**
   * @description: 根据pid和did创建一个分支
   * @param {pid} 项目id
   * @param {did} 需求id
   * @param {branch_name} 分支名
   * @return: 分支信息
   */
  async insertBranchInfo(sqlParams) {
    const sql = 'insert branch_info (pid, bid, branch_name, pub_time) values(?,?,?,?)';
    console.log(sql)
    let data = await query(sql, sqlParams, (err, result) => {
      return result;
    });
    return data; 
  }
}

九、域名

没有买域名,通过本地修改hosts(可以直接用工具)

47.107.188.xx为服务器IP

47.107.188.xx test.xue.com
47.107.188.xx api.xue.com
47.107.188.xx m.xue.com

 总结

算是第一次自己搭建一个完整的项目,从前端到后端。

尤其是后端,作为一个前端小白,从学习如何使用服务器,到Linux/Vim/Shell/Nignx/Pm2/Redis/Session/Mysql/Koa2。没有像以前一样,直接拿别的项目看,而是一步一个脚印的学习,虽然也都是皮毛,但是感觉自己的知识体系丰富了很多。也去了解了很多持续集成的知识,当然我做的小项目还是比较简单的啦~ 喜欢就点个赞鼓励一下吧,(^__^) 嘻嘻……
详细的使用都在前端项目、后端项目,感兴趣的可以看下并点个star哈~✨

 以上所述是小编给大家介绍的自动化部署项目详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 #Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 #Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 #Javascript
详解滑动穿透(锁body)终极探索
Apr 16 #Javascript
一些手写JavaScript常用的函数汇总
Apr 16 #Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 #Javascript
You might like
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
Three.js学习之网格
2016/08/10 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
如何理解python面向对象编程
2020/06/01 Python
python selenium xpath定位操作
2020/09/01 Python
静态成员和非静态成员的区别
2012/05/12 面试题
西式婚礼证婚词
2014/01/12 职场文书
大学生实习感言
2014/01/16 职场文书
根叔历年演讲稿
2014/05/20 职场文书
学校周年庆活动方案
2014/08/22 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
追悼会答谢词
2015/01/05 职场文书
工作推荐信模板
2015/03/25 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫