测试环境搭建流程_前端构建 DevOps 搭建 DevOps 基础平台（中）
前言
搭建基礎(chǔ)平臺搭建上篇的時候的時候，已經(jīng)介紹過了項目流程設(shè)計、數(shù)據(jù)庫搭建、jwt 登錄等模塊。
此篇我們介紹分支管理設(shè)計及其他的基礎(chǔ)模塊。
后端模塊
后期可能會根據(jù) DevOps 項目的實際開發(fā)進(jìn)度對上述系列進(jìn)行調(diào)整
Git 分支管理流程
Git Flow 流程
Production 分支
就是常用的 Master 分支，這個分支包含最近發(fā)布到生產(chǎn)環(huán)境的代碼，最近發(fā)布的 Release， 這個分支只能從其他分支合并，不能在這個分支直接修改
Develop 分支
這個分支是的主開發(fā)分支，包含所有要發(fā)布到下一個Release的代碼，這個主要合并于其他分支，比如 Feature 分支
Feature 分支
這個分支主要是用來開發(fā)一個新的功能，一旦開發(fā)完成，我們合并回 Develop 分支，并進(jìn)入下一個 Release
Release 分支
當(dāng)需要發(fā)布一個新 Release 的時候，基于 Develop 分支創(chuàng)建一個 Release 分支，完成 Release 后，合并到 Master 和 Develop 分支
Hotfix 分支
當(dāng)在 Production 發(fā)現(xiàn)新的 Bu g時候，需要創(chuàng)建一個 Hotfix, 完成 Hotfix 后，合并回 Master 和 Develop 分支，所以 Hotfix 的改動會進(jìn)入下一個 Release
整體的分支管理流程如下圖所示
項目自建流程
上述的 Git Flow 流程使用可以規(guī)范約束開發(fā)質(zhì)量跟流程，我們稍微修改一下部分流程，融入到項目中進(jìn)行使用。
如圖每個工程都共享一個 version 版本號，分支創(chuàng)建分為版本升級、特性更新、修訂補(bǔ)丁三種模式，強(qiáng)制項目所有分支創(chuàng)建的命名規(guī)則都會升級，不會出現(xiàn)重復(fù)跟降級。
上述流程的優(yōu)點：
上述流程的缺點：
沒有完美的解決方法，所有 devops 流程都要結(jié)合真實項目需求來設(shè)計，上述只是一種解決方案，有更通用的方案設(shè)計請加我微信 Cookieboty 探討
DevOps 開發(fā)中篇
添加全局報錯回調(diào)
沒有絕對安全的程序，所有程序在運行中因各種情況會出現(xiàn) error，全局錯誤回調(diào)是基礎(chǔ)模塊必要的。
export default class HttpExceptions extends Error { // 繼承修改 error 類型 code: number; msg: string; httpCode: number; constructor({ msg = "服務(wù)器異常", code = 1, httpCode = 400 }) { super(); this.msg = msg; this.code = code; this.httpCode = httpCode; }}import HttpExceptions from "../exceptions/http_exceptions"; // 全局?jǐn)r截錯誤處理export default () => { return async function errorHandler(ctx, next) { try { await next(); } catch (err) { // 所有的異常都在 app 上觸發(fā)一個 error 事件，框架會記錄一條錯誤日志 ctx.app.emit("error", err, ctx); let status = err.status || 500; let error: any = {}; if (err instanceof HttpExceptions) { status = err.httpCode; error.requestUrl = `${ctx.method} : ${ctx.path}`; error.msg = err.msg; error.code = err.code; error.httpCode = err.httpCode; } else { // 未知異常，系統(tǒng)異常，線上不顯示堆棧信息 // 生產(chǎn)環(huán)境時 500 錯誤的詳細(xì)錯誤內(nèi)容不返回給客戶端，因為可能包含敏感信息 error.code = 500; error.errsInfo = status === 500 && ctx.app.config.env === "prod" ? "Internal Server Error" : err.message; } // 從 error 對象上讀出各個屬性，設(shè)置到響應(yīng)中 ctx.body = error; if (status === 422) { ctx.body.detail = err.errors; } ctx.status = status; } };};如上，我們拓展默認(rèn)錯誤類，添加錯誤中間件攔截全局異常，如果出現(xiàn)自定義異常拋出的時候，則處理全局異常，否則統(tǒng)一拋出 500 錯誤，去除敏感信息。
webSocket 使用
為什么要使用 webSocket
項目管理中，會涉及到同一個項目多人協(xié)作操作，而 ajax 輪訓(xùn)既消耗性能，實時性也不能完全保證，也會推送大量無效信息。所以項目采用 websocket 來推送多人協(xié)作信息以及后期構(gòu)建流程的狀態(tài)推送。
egg-socket
框架提供了 egg-socket.io 插件，增加了以下開發(fā)規(guī)約：
- namespace: 通過配置的方式定義 namespace(命名空間)
- middleware: 對每一次 socket 連接的建立/斷開、每一次消息/數(shù)據(jù)傳遞進(jìn)行預(yù)處理
- controller: 響應(yīng) socket.io 的 event 事件
- router: 統(tǒng)一了 socket.io 的 event 與 框架路由的處理配置方式。
具體的使用方式請參考：egg-socket.io 使用，下面簡單說下 ts 的配置
import { Application } from "egg"; // io路由使用方式import { EggShell } from "egg-shell-decorators";export default (app: Application) => { const { router, controller, io } = app; EggShell(app); // socket.io io.of('/').route('server', io.controller.nsp.ping);};ts 使用中 io.controller.nsp 會報類型未定義，所以需要修改一下 typings/index.d.ts 文件。
import "egg";declare module "egg" { interface Application { } interface CustomController { nsp: any; } interface EggSocketNameSpace { emit: any }}socket.io-client
window.onload = function () { // init const socket = io('http://127.0.0.1:7001', { // 實際使用中可以在這里傳遞參數(shù) query: { room: 'nsp', userId: `client_${Math.random()}`, }, transports: ['websocket'], }); socket.on('connect', () => { const id = socket.id; log('#connect,', id, socket); // 監(jiān)聽自身 id 以實現(xiàn) p2p 通訊 socket.on(id, (msg: any) => { log('#receive,', msg); }); }); // 接收在線用戶信息 socket.on('online', (msg: any) => { log('#online,', msg); }); // 系統(tǒng)事件 socket.on('disconnect', (msg: any) => { log('#disconnect', msg); }); socket.on('disconnecting', () => { log('#disconnecting'); }); socket.on('error', () => { log('#error'); }); window.socket = socket;};客服端采用 socket.io-client 去鏈接 websocket。上述是基礎(chǔ)鏈接部分，具體的實現(xiàn)要根據(jù)業(yè)務(wù)需求開發(fā)。
客服端實現(xiàn)
為了保障項目開發(fā)速度，客戶端選擇了 ANT DESIGN PRO。具體安裝步驟請參考教程，這邊展示一下部分業(yè)務(wù)端的代碼。
JWT 前端使用
/** * 異常處理程序 */const errorHandler = (error: { response: Response }): Response => { const { response } = error; if (response && response.status) { const errorText = codeMessage[response.status] || response.statusText; const { status, url } = response; if (response.status === 401) { window.location.href = '/user/login'; } notification.error({ message: `請求錯誤 ${status}: ${url}`, description: errorText, }); } else if (!response) { notification.error({ description: '您的網(wǎng)絡(luò)發(fā)生異常，無法連接服務(wù)器', message: '網(wǎng)絡(luò)異常', }); } return response;};/** * 配置request請求時的默認(rèn)參數(shù) */const request = extend({ prefix: '/api', errorHandler, // 默認(rèn)錯誤處理 credentials: 'include', // 默認(rèn)請求是否帶上cookie headers: { authorization: localStorage.getItem('authorization'), // 讀取本地保存的 authorization token },});export default request;改造 request 模塊
import request from '@/utils/request';export interface LoginParamsType { username: string; password: string; mobile: string; captcha: string;}export async function fakeAccountLogin(params: LoginParamsType) { return request('/user/getUserToken', { getResponse: true, // 開啟可以拿到返回 header 參數(shù)，將對應(yīng)的 authorization token 存入本地使用 method: 'POST', data: { params }, });}如上，拿到 response header 里面的 token，后續(xù)可以正常請求接口。
尾聲
此項目是從零開發(fā)，后續(xù)此系列博客會根據(jù)實際開發(fā)進(jìn)度推出(真 TMD 累)，項目完成之后，會開放部分源碼供各位同學(xué)參考。
如對文章內(nèi)容有任何疑問、見解可添加微信 Cookieboty 溝通。
另外關(guān)注公眾號 Cookieboty1024，歡迎加入前端小兵成長營
總結(jié)
以上是生活随笔為你收集整理的测试环境搭建流程_前端构建 DevOps 搭建 DevOps 基础平台（中）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 汤药多少钱啊？
- 下一篇： python package_pytho