Jenkins构建前端项目与部署

前提

docker里面安装nginx/openresty服务器
里面挂载宿主机一个目录用于服务器资源文件的修改
docker里面安装jenkins

本文是用1panel去操作容器，当然用docker命令去操作也可，一个道理

安装

创建jenkins目录

mkdir -p /home/jenkins

新增jenkins网络

    docker network create jenkins_net

使用docker-compose安装jenkins

services:
  xxx_jenkins:
    image: jenkins/jenkins
    container_name: xxx_jenkins
    user: root
    networks:
      - jenkins_net
    ports:
      - 8990:8080
      - 50000:50000
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - /home/jenkins/jenkins_home:/var/jenkins_home
networks:
  jenkins_net:

volumes: 挂载宿主机的目录或文件到容器中。在这个例子中，宿主机的 /var/run/docker.sock 文件被挂载到容器的同一位置，宿主机的 /home/jenkins/jenkins_home 目录被挂载到容器的 /var/jenkins_home 目录。

使用 docker compose 启动 Jenkins

docker compose up -d

[root@localhost jenkins]# docker ps -a
CONTAINER ID   IMAGE                                 COMMAND                   CREATED        STATUS                      PORTS                                                                                                                                                                                                                    NAMES
7f01e9c84eed   jenkins/jenkins                       "/usr/bin/tini -- /u…"   6 days ago     Up 46 hours                 0.0.0.0:50000->50000/tcp, :::50000->50000/tcp, 0.0.0.0:8990->8080/tcp, :::8990->8080/tcp                                                                                                                                 jhl_jenkins

开始操作jenkins

上面是我将宿主机的8990映射到容器内的8080，所以需要对端口为8990放行

第一次进入需要获取密码

cat /var/jenkins_home/secrets/initialAdminPassword

登录后，选择自定义 Jenkins - 选择插件来安装
进去后 - 点击无 - 滚动到底部 - **选择Localization: Chinese (Simplified) **- 安装
只安装一个插件 Localization: Chinese (Simplified)
其他按默认一直下一步就行

配置插件源

Dashboard -> 系统管理 -> 插件管理 -> Advanced setting -> 配置镜像源

修改为：https://updates.jenkins.io/update-center.json

修改后，需要重启Jenkins

但是这样操作的话，还是下载不了插件，设置全局配置加入网络代理

远程触发构建

Jenkins 官网 - 跨站请求伪造保护：https://www.jenkins.io/doc/book/security/csrf-protection/

Jenkins 远程触发 403 No valid crumb was included in the request https://www.jianshu.com/p/00fcfa4a53b5

系统管理 - 脚本命令行

输入下面脚本 - 点击运行

hudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION = true

勾选-匿名用户具有可读写权限

配置-触发远程构建

比如我的就是 http://192.168.8.196:8990/job/factoryPc195/build?token=0b5d34cbe2a30ce849426ef395565373

Jenkins拉取远程代码-构建任务（打包前端资源文件）

那么需要安装git，node插件

Git: https://plugins.jenkins.io/git/
nodejs: https://plugins.jenkins.io/nodejs/

创建任务

对于私有仓库需要个凭证才能拉取项目，填写对应信息

拉取前端项目后，需要运行npm run build 这就需要node环境

配置node：

Jenkins 任务 - 配置 Node.js 环境

测试 nodejs 环境是否生效

点击构建，查看控制台输出

拉取一个前端项目（vue、react都可）

运行一个package.json里的script构建命令，假设为build ，会得到一个打包文件夹，假设为dist

npm run build
#  使用 tar 命令压缩 ./dist 目录
tar zcvf dist.tar.gz ./dist

将打包好的文件夹丢到远程服务器

思路：

由于我的资源文件是放在当前容器的宿主机的nginx服务
那么我需要将这个容器和宿主机打通文件传输
使用ssh连接我的宿主机
接着使用scp将dist.tar.gz丢到宿主机的指定目录

公钥放在远程服务器，并命名为 authorized_keys，私钥在jenkins服务器内。

cat id_rsa.pub >> ~/.ssh/authorized_keys

这样jenkins服务器内输入 ssh 、scp 等链接远程服务器后，无需密码即可操作。

操作：

# 进入jenkins
docker exec -it <jenkins容器id> /bin/bash 

# 在本地机器上生成密钥对
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

# 将公钥复制到服务器(宿主机)
# 替换 username 为服务器的用户名，server_ip 为服务器的 IP 地址。
# 系统会提示输入服务器的密码，公钥将自动添加到服务器的 ~/.ssh/authorized_keys 文件中。
ssh-copy-id username@server_ip

# 测试 SSH 密钥登录
# 如果配置正确，应该无需输入密码即可登录（若设置了密码短语，则需输入短语）。
ssh username@server_ip

jenkins 安装 ssh-agent 插件

配置执行shell

node -v
npm -v
npm config set registry https://registry.npmmirror.com
npm i

npm run build

ls
tar zcvf dist.tar.gz ./pc-dist
ls

# 启动ssh-agent，这个代理会管理SSH私钥，用于无密码登录
eval $(ssh-agent -s)


scp dist.tar.gz root@192.168.8.196:/home/1panel/apps/openresty/openresty/www/sites/xxx

ssh -v root@192.168.8.196 "cd /home/1panel/apps/openresty/openresty/www/sites/xxx; rm -rf index; mkdir index; tar zxvf dist.tar.gz; mv ./pc-dist/* ./index/; rm -rf ./pc-dist; exit"

# 结束 ssh-agent 会话
ssh-agent -k

hbisedm's Blog