對於小白而言，搭建測試環境首選的有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
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 ;
大家如果在搭建環境過程中有疑問，或者對本篇文章中的某些內容有疑問，歡迎在屏幕下方留言探討。有其他項目想要部署的可以私信小編喔，小編與你一起學習環境部署。
往期推薦
虛擬機中安裝centos7系統並使用xshell進行連接訪問
親愛的小伙伴，請留下你們的小心心，歡迎分享給其他小伙伴一起學習喔！！