CICD流程，vite+vue、springboot一键自动部署

1. 软硬件环境准备

  • 开发工具：WebStorm、IDEA

  • 服务器：2核4G云服务器

  • 服务器软件：

    • Docker
    • Jenkins（通过Docker容器安装）

  • Linux apt软件源设置

    • 配置文件：/etc/apt/sources.list

      deb https://mirrors.aliyun.com/debian/ bullseye main non-free contrib
deb-src https://mirrors.aliyun.com/debian/ bullseye main non-free contrib
deb https://mirrors.aliyun.com/debian-security/ bullseye-security main
deb-src https://mirrors.aliyun.com/debian-security/ bullseye-security main
deb https://mirrors.aliyun.com/debian/ bullseye-updates main non-free contrib
deb-src https://mirrors.aliyun.com/debian/ bullseye-updates main non-free contrib
deb https://mirrors.aliyun.com/debian/ bullseye-backports main non-free contrib
deb-src https://mirrors.aliyun.com/debian/ bullseye-backports main non-free contrib

2. 安装Jenkins

  • 使用宝塔面板的Docker应用商店搜索并安装Jenkins。

    image-20241208202735269

  • 访问Jenkins的Web页面（通过IP:端口），按照提示进行初始化：

    1. 解锁Jenkins，根据提示使用cat命令获取密码。
    2. 安装推荐的插件。
    3. 创建管理员账户并进入Jenkins页面。

3. 配置Jenkins

3.1 安装必要插件

  • Node.js插件：在Jenkins插件市场中搜索并安装 Node.js插件（替代nvm插件）。
  • Gitee插件：用于从Gitee拉取代码。

3.2 配置Gitee凭证

  • 路径：Manage Jenkins > 凭据管理 > 全局 > + Add Credentials

  • 输入Gitee的用户名和私人令牌（从Gitee的私人令牌页面获取）。

    image-20241208204134099

4. 创建Jenkins项目

4.1 创建自由风格项目

  • 创建一个自由风格的项目，并配置源码管理和构建步骤。

4.2 配置源码拉取

  • 配置Gitee仓库地址和之前创建的凭证。

    image-20241208205112856

4.3 配置构建触发器

  • 在Gitee项目仓库中设置Webhook，URL填写Jenkins提供的地址，密码填写Jenkins生成的密码。

  • 在Jenkins中配置Gitee Webhook触发器。

    image-20241208210825059

5. 构建环境配置

5.1 前端构建环境（使用Node.js插件）

  • 在Jenkins中配置Node.js环境：

    1. 进入Manage Jenkins > Global Tool Configuration。

    2. 找到NodeJS部分，点击Add NodeJS。

    3. 输入Node.js版本（例如：16.x或18.x），并保存。

    4. 在项目的构建环境中，选择配置好的Node.js版本。

      image-20250121024333414

5.2 后端构建环境

  • 在Docker容器中安装Maven：

  • apt-get install maven

  • Maven仓库源配置

    如果需要配置Maven仓库镜像，编辑settings.xml文件（通常位于/etc/maven/settings.xml），添加阿里云镜像：

    <settings>
  ...
  <mirrors>
    <mirror>
      <id>alimaven</id>
      <name>aliyun maven</name>
      <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
      <mirrorOf>central</mirrorOf>
    </mirror>
  </mirrors>
  ...
</settings>

6. Build Steps 构建步骤

6.1 前端构建步骤

#依赖安装

npm i

#执行编译

npm run build

#构建镜像

docker build -t cicd-test-ui:latest -f Dockerfile .

删除之前运行的同名容器
container_name="cicd-test-ui"
#检查容器是否存在$(docker ps-a|grep cicd-test-ui)
#使用docker ps -a命令列出所有容器，并使用grep检查容器是否存在
if docker ps -a|grep -q $container_name; then
	docker rm -f $container_name
else
	echo "容器不存在，跳过删除操作。"
fi

#通过镜像 运行容器
docker run -d --name cicd-test-ui -e LANG=C.UTF-8 -e LC_ALL=C.UTF-8 -v /home/wzdyt/ui/logs:/home/wzdyt/ui/logs -p 8080:8088 cicd-test-ui:latest

6.2 后端构建步骤

maven打包，并排除test测试
mvn clean package -DskipTests

构建镜像
docker build -t cicd-test-end:latest -f Dockerfile .

# 删除之前运行的同名容器
container_name="cicd-test-end"
#检查容器是否存在$(docker ps-a|grep cicd-test-end)
#使用docker ps -a命令列出所有容器，并使用grep检查容器是否存在
if docker ps -a|grep -q $container_name; then
	docker rm -f $container_name
else
	echo "容器不存在，跳过删除操作。"
fi
#通过镜像 运行容器
docker run -d --name cicd-test-end -e LANG=C.UTF-8 -e LC_ALL=C.UTF-8 -v /home/wzdyt/end/logs:/home/wzdyt/end/logs -p 8081:8081 cicd-test-end:latest

7. Dockerfile示例

7.1 前端Dockerfile

FROM nginx

RUN echo 'alias ll="ls -l"'>> ~/.bashrc

RUN apt-get update
#安装VIM，
RUN apt-get install -y bash vim

# 安装 ping
RUN apt-get install -y iputils-ping

# 安装并配置语言工具包，防止中文乱码
RUN apt-get install -y locales
RUN locale-gen en_US.UTF-8
ENV LANG en_US.UTF-8
ENV LC_ALL en_US.UTF-8

#安装 net-tools 包，它包含了 netstat 工具
RUN apt-get install -y net-tools

#将 Vue 打包后的 dist 目录复制到 Nginx 的静态资源目录
COPY ./dist /home/wzdyt/ui/dist

# 移除 Nginx 配置文件中的默认配置
RUN rm /etc/nginx/conf.d/default.conf

# 复制自定义的 Nginx 配置文件到容器中
COPY ./nginx_dev.conf /etc/nginx/conf.d

#暴露 Nginx的 80 端口
EXPOSE 80

7.2 后端Dockerfile

# 基础镜像
FROM maven:3.8.1-openjdk-17-slim as builder
# 维护者信息
MAINTAINER wzdyt
# 设置工作目录
WORKDIR /home
RUN echo 'alias ll="s -"'>>~/.bashrc

# 设置时区
ENV TZ=Asia/Shanghai

# 将编译好的jar文件添加到镜像中
ADD target/cicid-test-end-0.0.1-SNAPSHOT.jar /root/app.jar
# 暴露端口
EXPOSE 8081
# 启动命令
ENTRYPOINT ["java","-jar","/root/app.jar"]

8. nginx_dev.conf 示例

server {
        listen       8088;
        server_name  localhost;
		charset utf-8;

		# 指定日志路径
        access_log /home/wzdyt/ui/logs/access.log;
        error_log /home/wzdyt/ui/logs/error.log;

		location / {
            root   /home/wzdyt/ui/dist;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8081/;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }