对于小白而言,搭建测试环境首选的有tpshop、shopxo、iwebshop这类php开发的电商网站,虽然部署方便,但是却跟企业实际的架构相差太远,不利于我们更好的了解和学习软件测试。
那么,对于自学软件测试的朋友来说,是否还在为找不到可以用来练习接口自动化的网站而发愁呢?是否在为找不到部署测试环境而发愁呢?是否不知道现在企业做出来的网站都是什么样子呢?下面让我带大家一起来了解一下吧!!!
项目选型:找一个前后端分离的项目,后端用java的springboot框架,前端用vue框架,这个是目前用的比较多的组合。
废话不多说,先上一波效果:
后台管理页面效果如下:
后台api接口swagger文档效果:
怎样找一个这样的网站?
可以在gitee/github平台上去搜索这样的网站,我通过搜索关键字springboot vue,在gitee上找到这么个网站:
地址如下:
https://gitee.com/microapp/linjiashop
项目介绍:
项目是一个电商网站,包含后端api接口以及swagger接口文档,后端管理页面,手机H5页面以及小程序的代码,先从后端api接口以及后端管理页面的部署开始介绍。
ps:要部署该项目,需要掌握以下内容:
1、具备java基础,了解maven工程的打包构建
2、了解通过npm工具构建打包前端代码
3、了解常见测试环境部署的一些流程,掌握linux简单命令,掌握jenkins简单用法。
找到网站后,如何部署?
在这之前,我找过很多类似的开源项目,要么就是代码太复杂,要部署很多中间件,对于我这个小白来说有点困难,要么就是代码写的有问题,或者缺失sql脚本,或者没有写简单的部署文档,有点难以下手。
下面介绍一下如何去部署选定的项目:
1、下载源代码到本地
准备工作:
电脑上安装好git,获取源代码到本地,本简单看一下代码目录,找到doc下的相关文档,其中doc下面的database.sql为数据库脚本
2、安装mysql数据库并创建项目的数据库
因为最终我打算将项目部署到linux虚拟机里面,因此先在linux里面安装mysql。这里推荐使用docker的方式安装mysql:
2、执行命令安装mysql:
docker pull mysql:5.7 docker run -itd --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7
通过以上命令,很快速的就安装好了mysql,然后用navicat客户端远程连接后,创建一个数据库linjiashop,并创建用户名linjiashop,设置密码为linjiashop,并授权用户linjiashop对该数据库的操作权限。
3、执行数据库建表脚本(也可以不执行数据库脚本,代码中有个配置可以在本地调试的时候自动执行脚本)
3、编译打包后端java代码
要编译打包,首先要了解项目的基本代码结构,可以结合这个项目,了解一下微服务架构的概念。这里要构建的第一个工程的包是linjiashop-admin-api文件夹下的后端接口代码,该项目不能单独打包,需要依赖于core工程一期构建,为了方便,可以直接在代码根目录执行命令一次性打包所有java代码就行:
mvn -U clean package -Dmaven.test.skip=true
ps:用以上命令打包的话,需要在电脑上安装好maven,maven的仓库地址更换为阿里云的仓库后,打包会快一些。
下面说一下linjiashop-admin-api工程打包前,代码中需要修改的位置:
1、修改代码中的数据库连接地址:
2、修改resources文件夹下的logback.xml文件中的fileNamePattern的值
3、下载的源代码默认是打包war包,可以改成jar包方便部署(不改也可以)
在pom.xml文件中按如下脚本进行修改:
<packaging>jar</packaging>
4、执行mvn -U clean package -Dmaven.test.skip=true命令,然后在项目的target目录中可以找到打出来的jar包。将jar包用java -jar 启动即可,启动的时候可以加-server.port=8082的参数指定端口。
4、编译前端代码
1、电脑上安装好nodejs的环境,配置环境变量,下载nginx,用来部署前端
2、进入到linjiashop-admin文件夹下面,执行以下命令即可:
(注意打包前需要改一些配置)
本地调试的命令:
npm install --registry=https://registry.npm.taobao.org npm run dev
本地打包的命令:
npm install --registry=https://registry.npm.taobao.org npm run build:prod
ps: npm install 命令是安装包的依赖,如果的比较慢的话 ,可以改成如下的命令:
npm install cnpm --registry=https://registry.npm.taobao.org cnpm install npm run dev / npm run build:prod
3、打包前或者本地调试的时候,需要更改一些脚本:
前端代码目录下有一个vue.config.js的文件,里面涉及到localhost地址以及端口的,可以改成后端api接口的ip和端口
更改了上述地址后,打包部署到服务器nginx下后,访问页面时,会发现页面请求的接口地址并没有改成后端api部署的8082端口,而还是通过前端nginx页面的地址所对应的端口发送的请求,因此还需更改一个配置文件,或者通过nginx的端口转发功能进行配置。我对nginx不太熟,这里只介绍一下改代码的方式:
找到src/utils/rquests.js文件,更改截图中的内容:
按照上述步骤操作之后,网站基本上就部署完成了,页面一些简单的功能已经可以使用,一些稍微复杂的功能,比如图片上传,还需要更改配置,这个等后面研究出来了再分享给大家,目前已经可以拿部署的网站用来做UI自动化和接口自动化的练习了,而且还可以用来练习功能测试,定位前后端问题,查看报错日志等。
如何结合jenkins实现持续部署
测试环境的部署流程,一般就分为以下几步:
1、构建、打包
2、将文件传到要部署的服务器
3、备份
4、停服务,替换文件,启动服务
5、监控服务状态,验证部署是否成功
jar包部署:(详细步骤请参考之前写的文章:Jenkins自动部署测试环境之jar包部署)
主要使用jenkins的Publish Over SSH插件传文件到服务器,然后远程执行shell脚本。
前端部署:
与jar包部署类似,不过前端可以采用构建成docker镜像进行部署。
dockerfile 主要内容如下:
FROM nginx WORKDIR /app COPY dist/ /usr/share/nginx/html EXPOSE 80 RUN echo 'echo init ok!!'
setup.sh 脚本如下:
cd /home/jenkins/jenkins_remote_dir/workspace/linjiashop-admin-freestyle-deploy/linjiashop-admin docker stop adminui; docker rm adminui; docker build -t adminui .; docker images; docker run -p 8081:80 -d --name adminui adminui ;
大家如果在搭建环境过程中有疑问,或者对本篇文章中的某些内容有疑问,欢迎在屏幕下方留言探讨。有其他项目想要部署的可以私信小编喔,小编与你一起学习环境部署。