1.获取服务器公网ip、密码

image.png

2.下载finalshell（连接服务器的工具）

下载地址：http://www.hostbuf.com/t/988.htm
image.png

点击新建ssh连接，填入第一步获取到的内容(ip 用户名 密码）
image.png
image.png
表示连接成功
使用命令
yum install screen 安装插件
image.png
yum install lsof 安装插件
image.png
再使用 lsof -i:80 查看端口号
screen -ls 守护进程

  1. screen -S  //xxxx创建新的会话
  2. screen -Is //会话列表
  3. screen -r //xxxx链接会话
  4. screen -d //退出会话
  5. screen -S 会话名字 -X quit //杀死会话

3.安装java

下载地址：https://mirrors.huaweicloud.com/java/jdk/
将jdk包拖拽至根目录

  1. mkdir /usr/local/java 
  2. cd /usr/local/java
  3. pwd
  4. mv /jdk-8u171-linux-x64.tar.gz /usr/local/java
  5. ls
  6. tar -zxvf jdk-8u171-linux-x64.tar.gz
  7. vi /etc/profile

image.png
image.png

  1. set java environment
  2. JAVA_HOME=/usr/local/java/jdk1.8.0_171
  3. JRE_HOME=/usr/local/java/jdk1.8.0_171/jre
  4. CLASS_PATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
  5. PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
  6. export JAVA_HOME JRE_HOME CLASS_PATH PATH

image.png

  1. esc 
  2. :wq //保存并退出

执行source命令，使配置文件生效
image.png
image.png

4.安装nginx

但凡前端用到vue框架-必安nginx
下载地址：https://nginx.org/download/
下滑选1开头的任意版本
拖到根目录再说(不需要 直接用代码下载）

  1. yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel
  1. wget -P / http://nginx.org/download/nginx-1.20.1.tar.gz
  1. mkdir /usr/local/nginx
  1. tar zxvf /nginx-1.20.1.tar.gz -C /usr/local/nginx
  1. cd /usr/local/nginx/nginx-1.20.1 
  2. ./configure --prefix=/usr/local/nginx --with-http_ssl_module 
  3. make && make install
  1. vi /etc/profile
  2. NGINX=/usr/local/nginx/sbin
  3. export PATH=$PATH:$NGINX
  5. source /etc/profile

5.安装nodejs

下载地址https://nodejs.org/download/release/v16.6.2/
先将安装包拖到根目录

  1. tar xf /node-v16.6.2-linux-x64.tar.gz -C /usr/local/ 解压
  2. ln -s /usr/local/node-v16.6.2-linux-x64/bin/node /usr/local/bin //创建软件连接
  3. ln -s /usr/local/node-v16.6.2-linux-x64/bin/npm /usr/local/bin //创建软件连接
  4. 修改配置
  5. npm config set prefix "/node/node_global_modules" //设置全局包目录
  6. npm config set cache "/node/node_cache" //设置缓存目录

6.安装maven

下载地址
https://maven.apache.org/download.cgi
安装包丢到/usr/local/目录再说

  1. cd /usr/local
  2. tar -zxvf apache-maven-3.8.6-bin.tar.gz //解压文件
  3. vi /etc/profile // 配置环境变量
  5. export MAVEN_HOME=/usr/local/apache-maven-3.8.6
  6. export PATH=$MAVEN_HOME/bin:$PATH 
  8. source /etc/profile //执行环境变量更改
  1. mvn -v

image.png

7.安装git

下载地址
https://git-scm.com/downloadsopen in new window（无需下载使用代码安装）

  1. yum install git
  1. git --version

8.安装jenkins

下载war包：https://repo.huaweicloud.com/jenkins/（选择2.3.n版本的）
在根目录下新建两个文件夹： jenkins 还有jenkins_work
将下载好的war包放在拖拽至文件夹jenkins位置
image.png
在/java目录下 使用vi /etc/profile打开环境变量

  1. export JENKINS_HOME=/jenkins_work

image.png

  1. source /etc/profile

使用screen -S jenkins
image.png
image.png用此条代替步骤三

  1. java -jar jenkins.war --httpPort=端口号 &

image.png
复制密码 服务器开防火墙
image.png
image.png
image.png
image.png退出会话
image.png
查看jenkins版本
image.png
等待安装
image.png

9.jenkins项目部署

配置公共环境变量

image.png
image.png
image.png
image.png
修改此处url为：https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json
image.png

下载gitee插件

image.png
下载完成后，输入 http://IP:8080/restart 进行重启Jenkins（下载时勾选安装成功后自动重启jenkins）

添加jdk

image.png
image.png
image.png
填入jdk1.8
image.png
image.png
image.png

添加maven

image.png
以同样方法在finalshell中找到
image.png
点击保存

9.1 使用Vue框架的前端打包配置

构建任务

jenkins 云服务器项目部署 - 图41

选择任务模板和输入任务名称
此处可以直接选择默认模板或者使用maven插件提供的模板
jenkins 云服务器项目部署 - 图42
image.png
https://gitee.com/Stone233/blog.git
image.png
image.png

添加分支名

image.png
最后添分支，点击保存

开始配置

image.png

Gitee添加webhooks钩子

image.png
image.png
image.png
image.png
image.png
image.png
填入url&WebHook密码，点击添加，再次测试
image.png
image.png

添加前端打包shell步骤

1）新建前端项目目录blog

image.png

2）安装依赖&打包前端代码

image.png

  1. npm install//安装依赖
  2. npm run docs:build //打包

先执行这两步
打包成功后能够在工作空间中看到dist文件夹
image.png
在虚拟机内找到此处位置
image.png

3）删除旧的前端文件配新的

  1. rm -rf /nginx配置web服务目录/*   //删除旧的前端文件
  1. cp -r /前端项目目录/dist/* /nginx配置web服务目录
  1. rm -rf /blog/*
  2. cp -r /jenkins_work/workspace/new_blog/dist/* /blog

6f761ebccbf3fe8f68e918d273a7ce9.png
再次构建

4）查找nginx配置目录并修改conf文件

image.png
image.png
image.png
image.png
在jenkins中点击构建后打开
image.png
image.png
改成/blog，ctrl+S保存
image.png
再次打开域名就可以看到前端配好啦~
image.png

9.2 java 打包配置

新建springboot项目
image.png
https://gitee.com/Stone233/springboot.git

添加WebHooks同vue打包操作

image.png
image.png

查看springboot项目端口(便于下一步修改端口）

image.png

添加杀死旧服务shell构建步骤

  1. port='端口'
  2. pid=`lsof -i :$port|grep -v "PID" | awk '{print $2}'`
  3. echo $pid
  4. if [ "$pid" != "" ];
  5. then
  6.    kill -9 $pid
  7.    echo "成功杀死端口$port pid:$pid"
  8. else
  9.    echo "$port端口未被占用"
  10. fi

image.png

添加maven打包命令shell构建步骤

  1. mvn install -Dmaven.test.skip=true
  2. mvn clean package -Dmaven.test.skip=true

image.png
保存这两步以后，点击立即配置，刷新finalshell

添加启动命令步骤

  1. LD_BUILD_ID=$BUILD_ID
  2. echo $OLD_BUILD_ID
  3. BUILD_ID=dontKillMe
  4. # -Dspring.profiles.active属性可以选择配置文件启动
  5. java -jar -Dspring.profiles.active=test jar包路径.jar > 日志路径.log 2>&1 &
  6. BUILD_ID=$OLD_BUILD_ID
  7. echo $BUILD_ID

jenkins 云服务器项目部署 - 图75
image.png
image.png

  1. LD_BUILD_ID=$BUILD_ID
  2. echo $OLD_BUILD_ID
  3. BUILD_ID=dontKillMe
  4. # -Dspring.profiles.active属性可以选择配置文件启动
  5. java -jar -Dspring.profiles.active=test /jenkins_work/workspace/springboot/target/springboot-0.0.1-SNAPSHOT.jar > /log/springboot.log 2>&1 &
  6. BUILD_ID=$OLD_BUILD_ID
  7. echo $BUILD_ID

image.png

点击保存，bulid now
image.png

在阿里云服务器中新增自定义防火墙8081

image.png

测试是否配置成功

打开url+:8081/helloimage.png
删除hello代表后端启动成功
image.png