对于小白而言，搭建测试环境首选的有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：
dockerpull mysql:5.7
dockerrun -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=trueps：用以上命令打包的话，需要在电脑上安装好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.orgnpm run dev
本地打包的命令：
npm install --registry=https://registry.npm.taobao.orgnpm run build:prod
ps: npm install 命令是安装包的依赖，如果的比较慢的话 ，可以改成如下的命令：
npm install cnpm --registry=https://registry.npm.taobao.orgcnpm installnpm 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 ;
大家如果在搭建环境过程中有疑问，或者对本篇文章中的某些内容有疑问，欢迎在屏幕下方留言探讨。有其他项目想要部署的可以私信小编喔，小编与你一起学习环境部署。
小博测试成长之路 发起了一个读者讨论 如果有读者也想用这个项目练习，搭建过程中遇到问题可以在下方留言，一起交流！
往期推荐
虚拟机中安装centos7系统并使用xshell进行连接访问
亲爱的小伙伴，请留下你们的小心心，欢迎分享给其他小伙伴一起学习喔！！
原来转载自个人公众号libotest ，原文链接：测试练习网站环境搭建 ， 如需转载，请备注原文地址！！！
