# 前言
上一章,已经学习了虚拟机与 GitLab 搭建,同时也熟悉了部分 Linux 的操作命令。
本章将介绍项目开发中所需要工具、环境的配置:
- MySQL -数据库
- PostMan - 接口测试工具
- Egg - Node 开发框架
- Jenkins - 构建工具
- Nginx - 静态服务器
下文会详细介绍上述工具的配置与使用方法。
# 开发环境配置
# MySQL
# 安装 MySQL
数据库使用常规的 Mysql,具体安装详情可见 Mysql 安装教程 (opens new window)。
针对 windows 的安装是非常简单的,点击下载社区版 (opens new window),选择 msi 版本,直接一路 next 选择即可,主要注意设置的 root 用户密码一定不要忘记。(重置密码有点麻烦,每个 MySQL 的版本重置命令可能都不一样,如果忘了也不知道怎么解决的话,可以留言。)

# 配置 MySQL 环境变量
如果对于 sql 有经验的同学,可能会习惯用 sql 去建表、查询等。对于没有 sql 经验的同学来说,一般也不会直接去操作 MySQL,可以直接忽略,毕竟学习成本也不低,有兴趣的同学可以尝试一下。


配置完成之后,终端输入 mysql -u root -p,密码是之前安装 MySQL 设置的,出现如下图所示,即代表配置环境变量成功

# Navicat for MySQL
Navicat for MySQL 可连接任何本机或远程 MySQL 服务器,功能包括数据模型工具、数据同步、导入或导出、报表、以及更多功能。
那么没有 sql 经验的同学,可以尝试这个可视化工具,减少一些学习成本,通过简单的可视化操作完成建表、查询等一系列操作。
# 连接 Mysql

# 创建数据库

# 查询表

当然这个工具是需要付费的,作为学习整本小册来说,15 天的试用期也是足够了,如果还想使用可视化工具的话,建议同学们可以使用免费的 SQLite 或者 SQLyog。毕竟学习为目的的话,可以节约成本,同时 SQLite 跟 SQLyog 也是一款非常出色的可视化工具。
# Postman
Postman 是一个 Chrome 扩展,提供功能强大的 Web API & HTTP 请求调试。使用 Node 开发服务端项目,用它来测试接口比较方便。
Postman 有 Chrome 插件与 App 两种版本,下载地址 (opens new window)。

具体使用在下个章会有介绍,先安装完预备着。
# Egg
Egg.js (opens new window)为企业级框架和应用而生(引自官网介绍)。
这里之所以没有使用 Koa (opens new window) 是因为过于简单,对于一个稍具规模的中型项目不太适合,而 NestJS (opens new window) 与 Midway (opens new window) 的上手成本比较高,对于初中级前端来说,可能会有一定学习成本。
所以本系列将使用 Egg 来作为 Node 框架作为学习 demo。如果有同学更喜欢 NestJS 模式的开发框架,可以以小册的设计与 demo 作为参考,进行项目学习。后期可能会出一个 Midway 升级版, Egg 项目迁移到 Midway 还是较为方便。
直接选择基础的 ts egg 版本进行开发。
$ mkdir egg-example && cd egg-example
$ npm init egg
$ yarn

启动项目:
$ yarn dev
浏览器输入 http://localhost:7001,即可查看页面:

这只是一个简单的 ts 模板,在项目开发中,还需要增加额外的插件或配置更改。
# 构建环境配置
# Jenkins
Jenkins 是一个开源的、提供友好操作界面的持续集成(CI)工具,起源于 Hudson(Hudson 是商用的),主要用于持续、自动的构建/测试软件项目、监控外部任务的运行。Jenkins 用 Java 语言编写,可在 Tomcat 等流行的 servlet 容器中运行,也可独立运行。通常与版本管理工具(SCM)、构建工具结合使用。常用的版本控制工具有 SVN、GIT,构建工具有 Maven、Ant、Gradle。
在此项目中,Jenkins 作为主要构建工具来搭配使用。
# 安装
# Java 环境配置
由于 Jenkins 是使用 Java 编写,需要 Java 的运行环境,根据自己的系统选择下载对应的 JAVA SDK 1.8 (opens new window) 版本(Windows、Mac、Linux)。
接下来需要配置 Java 环境变量,先介绍较复杂的 Windows 环境变量配置步骤。
- 下载 Java Windows Installer,双击安装(不建议直接安装 C 盘,可以选择其他的安装路径)。

- 打开电脑环境变量窗口,win 键直接搜索环境变量即可。

- 新建 JAVA_HOME 变量。
- 变量名:JAVA_HOME
- 变量值:Java Installer 安装地址

- 新建/修改 CLASSPATH 变量。
- 变量名:CLASSPATH
- 变量值:
.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;(不要遗漏前面的.;)
- 修改 Path 变量。
新增两条路径
%JAVA_HOME%\bin%JAVA_HOME%\jre\bin

- 打开 cmd,输入 java,出现如下指令提示,则代表 Java 环境配置成功。

# Windows 版本
直接下载 Windows 版本的 Jenkins (opens new window) 安装包。
- 双击安装包,选择
Run service as LocalSystem,接下来一路 Next 即可

- 安装完之后打开 Jenkins 页面需要密码,按照提示路径可以找到对应的密码,输入进去,初始化 Jenkins

- 安装推荐插件或者选择自定义后期在安装插件都行

- 创建管理员账号之后,完成 Jenkins 安装

虽然教程使用的是 Windows 版本,不建议用,有兴趣的同学可以是用之前搭建的虚拟机,用 Centos 来安装 Jenkins,体验效果翻倍
# Mac 版本
建议用 brew (opens new window) 直接下载,比较容易管理
brew 安装过慢的解决方案:点击这里 (opens new window)
# 插件安装速度过慢
- 先进入 http://ip:10086/pluginManager/advanced (opens new window) 插件管理页,将地址从 updates.jenkins.io/update-cent… (opens new window) 换成 mirror.xmission.com/jenkins/upd… (opens new window)
- 修改 Jenkins/updates/default.json 配置
替换 updates.jenkins-ci.org/download 为 mirrors.tuna.tsinghua.edu.cn/jenkins
替换 www.google.com (opens new window) 为 www.baidu.com (opens new window)
修改完毕后直接浏览器输入 http://ip:10086/restart (opens new window) 重启 Jenkins 即可。
# Jenkins 使用
# pipeline 脚本
先简单介绍一下: node, agent 以及 slave 都用来指被 Jenkins master 管理的用来执行 Jenkins jobs 的服务器。
区别:agents 用在表述性 pipeline 中,可以不仅仅是 nodes ,还可以是 docker container 等。node(这个不是那个 js node) 用在脚本化 pipeline 中。
- 新建一个流水线任务

- 输入配置项

配置参数:
| 名称 | 描述 |
|---|---|
| PROJECT_NAME | 工程名称 |
| PROJECT_VERSION | 工程版本号 |
| PROJECT_GIT_PATH | 工程地址 |
| BRANCH_NAME | 工程分支 |
| BUILD_PATH | 构建目录 |
| CACHE | 是否缓存 |
- 编写
Pipeline script

可以直接复制下述 Pipeline script
node {
stage('Pre Git') {
echo "${params.PROJECT_NAME},${params.PROJECT_VSERSION},${params.PROJECT_GIT_PATH}"
dir("D:/jenkins/build") {
if(fileExists("${params.PROJECT_NAME}")) {
echo " git exit"
dir("D:/jenkins/build/${params.PROJECT_NAME}") {
powershell " git fetch --all && git reset --hard origin/${params.BRANCH_NAME} && git pull"
powershell " git checkout ${params.BRANCH_NAME}"
}
} else {
echo " git is not exit"
powershell " git clone ${params.PROJECT_GIT_PATH}"
}
}
}
stage('Pre Env') {
echo "check node_modules,${params.CACHE}"
dir("D:/jenkins/build/${params.PROJECT_NAME}") {
if(!fileExists("node_modules")) {
powershell "cnpm i"
}
if(!params.CACHE) {
echo "CACHE --- ${params.CACHE}"
powershell "rimraf node_modules"
powershell "cnpm i"
}
}
}
stage('build') {
echo "check node_modules"
dir("D:/jenkins/build/${params.PROJECT_NAME}") {
bat "npm run build"
}
}
stage('test') {
echo "test case"
}
stage('deploy') {
echo "deploy project"
if(!fileExists("D:/jenkins/deploy/${params.PROJECT_NAME}")) {
powershell " mkdir D:/jenkins/deploy/${params.PROJECT_NAME}"
}
if(!fileExists("D:/jenkins/deploy/${params.PROJECT_NAME}/${params.PROJECT_VERSION}")) {
powershell " mkdir D:/jenkins/deploy/${params.PROJECT_NAME}/${params.PROJECT_VERSION}"
}
powershell "cp D:/jenkins/build/${params.PROJECT_NAME}/${params.BUILD_PATH}/* D:/jenkins/deploy/${params.PROJECT_NAME}/${params.PROJECT_VERSION} -Recurse"
}
}
上述脚本创建了 5 个 stage,将构建流程拆分为 5 个步骤:
- 拉取项目:判断本地存不存在项目,存在就 pull 不存在直接 clone
- 安装项目依赖:判断项目依赖是否安装完毕,没有安装且强制清除缓存的情况下,先安装依赖
- 项目构建:运行项目构建,此处后期可以把脚本抽出来
- 项目测试:预留,后面做项目流程卡点使用
- 项目发布:直接 cp 或者 ssh 上传到你发布的地方即可(本地搭建了 Nginx 环境,直接复制到对应的目录即可,也可以上传到对应的 CDN 或者静态服务器。)
当然上述的脚本只完成了简单的构建任务,遇到复杂的系统会直接跪,简单列举下大概率会遇到的问题:
- 多端构建,比如一个项目需要直接构建多端产物
- 区分开发、测试、预发、线上等多环境
- 多命令构建,复杂项目可能需要执行多条命令,才能完成构建产物
- 构建产出目录,发布目录等不确定性
- 等等…………………………
可以根据参数传递,多脚本等等配合解决上述问题,具体要根据业务来设计。随着小册后续的内容输出,会一一解决上述问题

由于使用的是 Windows 系统,文件处理脚本比较麻烦,运行速度慢而脚本还难写,强烈建议上 linux。
上图一共构建 5 次,由于加了缓存判断,所以只有第一次构建的时候,会去安装对应的依赖,耗时比较多。
一般来说,长期迭代的项目,依赖变动不会太频繁,只需要判断是否安装过依赖即可,后续的构建过程可以跳过依赖安装,直接走构建流程,节约倒杯水的时间。
看个人选择,高兴每次构建全部重新安装依赖也可以。做人嘛,开心最重要!但每次构建的同时也会存在版本不一致的风险,开发、测试、预发、线上都有可能存在不一致的可能。
# 构建产物演示

请注意上图的链接有个版本号,这个需要配合脚手架一起改造,在脚手架篇会具体介绍。
# Nginx
Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个 BSD-like 协议下发行,可以在 UNIX、GNU/Linux、BSD、Mac OS X、Solaris,以及 Microsoft Windows 等操作系统中运行。
在实际的运作中,可以支持二万至四万并发,性价比极高。没条件就自己搭建,有钱直接上 cos, cdn,云服务的配置更简单。
# 安装
先下载 (opens new window)对应系统的稳定版本,本教程中选择 Windows 版本来演示,WIndows 版本安装非常简单,解压之后移动到对应的磁盘目录即可。
Nginx 常用命令如下:
- 启动:
start nginx或nginx.exe - 停止:
nginx.exe -s stop或nginx.exe -s quit,stop 是快速停止 Nginx,可能并不保存相关信息;quit 是完整有序的停止 Nginx,并保存相关信息。 - 重新载入Nginx:
nginx.exe -s reload,当配置信息修改,需要重新载入这些配置时使用此命令。 - 查看版本:
nginx -v
打开 cmd,进入对应的操作目录输入对应的命令,即可查看

输入 start nginx 之后,浏览器输入 http://localhost/,出现 Welcome to nginx!,则代表成功启动

# 配置
简单介绍一下 Nginx 的配置,前面搭建的 Jenkins 与 GitLab 都是通过 Ip 来访问的,正常在访问对应项目的时候都是根据域名来访问。
# 配置多域名
- 修改本地的 host 文件(需要赋予管理员权限)

- 修改
conf/nginx.conf
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
#gzip on;
## jenkins 服务
server{
listen 80;
server_name jenkins.cookieboty.com;
location / {
proxy_pass http://127.0.0.1:8080;
}
}
## gitlab 服务
server{
listen 80;
server_name gitlab.cookieboty.com;
location / {
proxy_pass http://192.168.160.88:8888;
}
}
## Egg 服务
server{
listen 80;
server_name devops.cookieboty.com;
location / {
proxy_pass http://127.0.0.1:7001;
}
}
server {
listen 80;
server_name nginx.cookieboty.com;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
修改完毕之后不要可以使用 nginx.exe -t -c ./conf/nginx.conf,测试一下配置文件编写是否正确。

- 输入
nginx.exe -s reload重启 Nginx 配置,接下来可以使用域名来访问之前搭建的服务了。


# 配置静态资源
server { #这里是我自己配置服务端口
listen 10010;
server_name resouce;
root D:/jenkins/deploy; #访问文件根目录
autoindex on; #是否浏览文件下的列表
location / { #是否允许跨域
add_header Access-Control-Allow-Origin *;
}
add_header Cache-Control "no-cache,must-revalidate";# 是否缓存
}
根据上述配置,可以简单的配置一个静态服务器。把前端项目丢进去,直接访问对应的端口即可。
上述代码,直接 copy 到 nginx.config 里面,然后重启即可。
# 本章小结
此章的内容比较多,主要是开发与构建环境的配置也涉及部分 shell 脚本编写。没有列出来的工具会在后续开发过程中需要使用的时候在逐一介绍。
跟着上述所有的步骤进行操作的话,此时你已经成功启动了一个 Egg 服务以及准备好开发项目所需要的环境与软件。
下一章将进入设计篇,对项目整体做一个分析,拆解任务,了解需求,帮助理解项目的构成,方便后期开发。