一、部署Jenkins环境¶

操作系统：Rocky9

1、使用dnf安装Jenkins

wget -O /etc/yum.repos.d/jenkins.repo \
    https://pkg.jenkins.io/redhat-stable/jenkins.repo

dnf install fontconfig java-21-openjdk
dnf install jenkins
systemctl enable --now jenkins

2、初始化Jenkins

http://ip:8080

查看密码

cat /var/lib/jenkins/secrets/initialAdminPassword

输入密码，安装插件

image/png

3、安装nodejs

右上角点击设置按钮

image/png

点插件管理

image/png

下载nodejs

wget https://nodejs.org/dist/v22.21.0/node-v22.21.0-linux-x64.tar.xz
mv node-v22.21.0-linux-x64.tar.xz /opt
cd /opt
tar Jxf node-v22.21.0-linux-x64.tar.xz
chown -R jenkins:jenkins /opt/node-v22.21.0-linux-x64/

再点击全局工具配置

image/png

先取消自动安装前的对勾

image/png

再定义安装目录

image/png

设置全局环境变量

image/png

测试是否生效

image/png

4、安装git

dnf install -y git

全局工具配置：

image/png

5、安装Publish Over SSH插件

image/png

在jenkins机器上生成密钥对

mkdir /var/lib/jenkins/.ssh/
ssh-keygen -f  /var/lib/jenkins/.ssh/jenkins
chown -R jenkins /var/lib/jenkins/.ssh/

配置ssh目标机器

image/png

定义私钥路径

image/png

增加目标机器（也就是将来要把程序发布到的那台机器）

image/png

将公钥配置到目标机器上

ssh-copy-id -i /var/lib/jenkins/.ssh/jenkins <your-managed-server-ip>

10.2 手动部署一个开源前端项目¶

项目地址：https://github.com/bastienwirtz/homer

另外准备一台Linux机器（Rocky9）

1、直接在机器上编译、部署

(1)安装nodejs

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install 22

如果下载不到，直接手动下载和安装

wget https://nodejs.org/dist/v22.21.0/node-v22.21.0-linux-x64.tar.xz
mv node-v22.21.0-linux-x64.tar.xz /opt
cd /opt
tar Jxf node-v22.21.0-linux-x64.tar.xz
ln -s /opt/node-v22.21.0-linux-x64/bin/node /usr/bin/
ln -s /opt/node-v22.21.0-linux-x64/bin/npm /usr/bin/
ln -s /opt/node-v22.21.0-linux-x64/bin/npx /usr/bin/

测试node是否安装成功

node -v
npm -v

安装pnpm

npm install -g pnpm

(2)安装Nginx

dnf install -y nginx

(3)克隆项目源码

git clone https://github.com/bastienwirtz/homer

(4))编译源码

cd homer
pnpm install
pnpm build

拷贝配置文件

cp dist/assets/config.yml.dist dist/assets/config.yml

(5)配置nginx

cat > /etc/nginx/conf.d/homer.conf <<EOF
    server {
        listen       80 default_server;
        server_name  000.com;
        root         /opt/homer/dist/;
        index index.html;
    }
EOF

启动nginx服务

systemctl start nginx

访问 http://ip

2、Docker形式部署

(1)准备Docker环境

安装dnf插件工具

dnf install -y dnf-plugins-core

配置阿里云的docker源

dnf config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

安装docker-ce

dnf install -y docker-ce

配置docker镜像加速

mkdir -p /etc/docker
cat > /etc/docker/daemon.json <<EOF
{
    "registry-mirrors": [
        "https://docker.m.daocloud.io",
        "https://dockerhub.timeweb.cloud"
    ]
}
EOF

启动docker服务

systemctl start docker
systemctl enable docker

(2)克隆源码

git clone https://github.com/bastienwirtz/homer

(3)build镜像

docker build -t my-homer .

(4)启动容器

docker run -d -p 8080:8080 --name homer my-homer

访问： http://ip:8080

(5)改源码、重新编译、重新加载

vi public/assets/config.yml.dist  ## 比如改title
## 重新build镜像
docker build -t my-homer .
## 重新加载镜像
docker stop homer
docker rm homer
docker run -d -p 8080:8080 --name homer my-homer

10.3 创建第一个Item¶

1、手动创建Item

image/png

考虑到jenkins有时候无法pull下来github上的源码，对github上的开源项目克隆到gitee，方便我们修改源码做测试，地址：

https://gitee.com/aminglinux/homer.git

填写源码地址：

image/png

触发器保持默认

Build steps 选 shell

image/png

# 查看环境
node -v
npm -v

# 安装 pnpm
npm install -g pnpm

# 安装依赖
pnpm install

# 构建
pnpm build

## 拷贝配置文件
cp dist/assets/config.yml.dist dist/assets/config.yml

构建后操作，选择Send build artifacts over SSH

image/png

190上配置Nginx

cat > /etc/nginx/conf.d/homer.conf <<EOF
    server {
        listen       80 default_server;
        server_name  000.com;
        root         /var/www/dist/;
        index index.html;
    }
EOF
nginx -s reload

2、pipline形式创建Item

image/png

Pipeline script

pipeline {
    agent any

    stages {
        // 1. 拉取代码
        stage('Checkout') {
            steps {
                git url: 'https://gitee.com/aminglinux/homer.git', branch: 'main'
            }
        }

        // 2. 构建步骤
        stage('Build') {
            steps {
                sh '''
                    # 查看环境
                    node -v
                    npm -v

                    # 安装 pnpm
                    npm install -g pnpm

                    # 安装依赖
                    pnpm install

                    # 构建
                    pnpm build

                    ## 拷贝配置文件
                    cp dist/assets/config.yml.dist dist/assets/config.yml
                '''
            }
        }

        // 3. 部署 (对应 Send build artifacts over SSH)
        stage('Deploy') {
            steps {
                sshPublisher(
                    continueOnError: false,
                    failOnError: true,
                    publishers: [
                        sshPublisherDesc(
                            configName: '<your-managed-server-ip>', // 注意：这里需要填写Jenkins系统配置中SSH Server的Name，通常就是IP
                            transfers: [
                                sshTransfer(
                                    sourceFiles: 'dist/**', // 源文件
                                    remoteDirectory: '.',    // 远程目录
                                    removePrefix: '',        // 移除前缀（如果不需要保留 dist 目录，这里填 'dist'）
                                    execCommand: ''          // 远程执行命令（如果需要）
                                )
                            ]
                        )
                    ]
                )
            }
        }
    }
}

Dify+Jenkins实战：搭建Jenkins并手动部署前端项目

一、部署Jenkins环境¶

10.2 手动部署一个开源前端项目¶

10.3 创建第一个Item¶

评论区