环境篇 - 环境配置

前言

上一章，已经学习了虚拟机与 GitLab 搭建，同时也熟悉了部分 Linux 的操作命令。

本章将介绍项目开发中所需要工具、环境的配置：

MySQL -数据库
PostMan - 接口测试工具
Egg - Node 开发框架
Jenkins - 构建工具
Nginx - 静态服务器

下文会详细介绍上述工具的配置与使用方法。

开发环境配置

MySQL

安装 MySQL

数据库使用常规的 Mysql，具体安装详情可见 Mysql 安装教程。

针对 windows 的安装是非常简单的，点击下载社区版，选择 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 两种版本，下载地址。

具体使用在下个章会有介绍，先安装完预备着。

Egg

Egg.js 为企业级框架和应用而生（引自官网介绍）。

这里之所以没有使用 Koa 是因为过于简单，对于一个稍具规模的中型项目不太适合，而 NestJS 与 Midway 的上手成本比较高，对于初中级前端来说，可能会有一定学习成本。

所以本系列将使用 Egg 来作为 Node 框架作为学习 demo。如果有同学更喜欢 NestJS 模式的开发框架，可以以小册的设计与 demo 作为参考，进行项目学习。后期可能会出一个 Midway 升级版， Egg 项目迁移到 Midway 还是较为方便。

直接选择基础的 ts egg 版本进行开发。

javascript

$ mkdir egg-example && cd egg-example
$ npm init egg
$ yarn

启动项目：

javascript

$ 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 版本（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 安装包。

双击安装包，选择 Run service as LocalSystem，接下来一路 Next 即可

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

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

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

虽然教程使用的是 Windows 版本，不建议用，有兴趣的同学可以是用之前搭建的虚拟机，用 Centos 来安装 Jenkins，体验效果翻倍

Mac 版本

建议用 brew 直接下载，比较容易管理

brew 安装过慢的解决方案：点击这里

插件安装速度过慢

先进入 http://ip:10086/pluginManager/advanced 插件管理页，将地址从 https://updates.jenkins.io/update-center.json 换成 http://mirror.xmission.com/jenkins/updates/update-center.json，可以提高下载速度。
修改 Jenkins/updates/default.json 配置

替换 updates.jenkins-ci.org/download 为 mirrors.tuna.tsinghua.edu.cn/jenkins

替换 www.google.com 为 www.baidu.com

修改完毕后直接浏览器输入 http://ip:10086/restart 重启 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

javascript

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，云服务的配置更简单。

安装

先下载对应系统的稳定版本，本教程中选择 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`
```

nginx

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 服务以及准备好开发项目所需要的环境与软件。

下一章将进入设计篇，对项目整体做一个分析，拆解任务，了解需求，帮助理解项目的构成，方便后期开发。

如果你有什么疑问，欢迎在评论区提出，或者加群沟通。 👏

环境篇 - 环境配置 #

前言 #

开发环境配置 #

MySQL #

安装 MySQL #

配置 MySQL 环境变量 #

Navicat for MySQL #

连接 Mysql #

创建数据库 #

查询表 #

Postman #

Egg #

构建环境配置 #

Jenkins #

安装 #

Java 环境配置 #

Windows 版本 #

Mac 版本 #

插件安装速度过慢 #

Jenkins 使用 #

pipeline 脚本 #

构建产物演示 #

Nginx #

安装 #

配置 #

配置多域名 #

配置静态资源 #

本章小结 #

环境篇 - 环境配置

前言

开发环境配置

MySQL

安装 MySQL

配置 MySQL 环境变量

Navicat for MySQL

连接 Mysql

创建数据库

查询表

Postman

Egg

构建环境配置

Jenkins

安装

Java 环境配置

Windows 版本

Mac 版本

插件安装速度过慢

Jenkins 使用

pipeline 脚本

构建产物演示

Nginx

安装

配置

配置多域名

配置静态资源

本章小结