最原始的前端发布，会经过本地打包、压个 zip 包、通过工具手动上传、找到 leader 帮忙解压到对应的服务器上、同步文件服务器等等的步骤。每一个环节都是人工操作，发个版非常的繁琐。接入jenkins有助于我们简化CI/CD流程，实现前端发布自动化。

1. jenkins 安装部署（docker）

1-1 前置条件

安装 git、docker、配置 ssh

git 安装

# enter 到底
yum install -y git
# 查看git版本号 验证git安装成功
# git version 1.8.3.1
git --version

docker 安装

# docker-ce                             Docker社区版
# docker-ce-cli                     Docker命令行界面（CLI）
# containerd.io                     Docker插件，直接调用 Docker Compose
# docker-compose-plugin     Docker插件，直接调用 Docker Compose
yum install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin

配置 ssh

# Enter到底，最终会生成以下文件
# /root/.ssh/authorized_keys 允许无密码登录的公钥列表
# /root/.ssh/id_rsa 私钥文件
# /root/.ssh/id_rsa.pub 公钥文件  注意该文件里的内容是接下来要用的
ssh-keygen -t rsa -C "root"
# 复制公钥文件的内容，添加到GitHub 的 SSH keys 或 任意其他远程仓库
vim /root/.ssh/id_rsa.pub

1-2 jenkins 安装

docker 拉取镜像

# 拉取nginx
docker pull nginx
# 拉取jenkins
docker pull jenkins/jenkins:lts
# 查看镜像是否安装成功
docker images
# REPOSITORY        TAG       IMAGE ID       CREATED         SIZE
# jenkins/jenkins   lts       6a44d1dd2d60   3 weeks ago   468MB
# nginx             latest    53a18edff809   7 weeks ago   192MB

创建 docker 相关目录

# 创建docker的相关目录
mkdir -p ./docker/{compose,jenkins_home,nginx/conf,html/origin/{master,dev}}

# 创建docker-compose.yml配置文件
cd ./docker/compose
# 具体配置内容见下面
touch docker-compose.yml

# 创建nginx.conf配置文件
cd ./docker/nginx/conf
# 具体配置内容见下面
touch nginx.conf

最终目录结构如下

./docker/
├── compose/
│   └── docker-compose.yml  # 空的 docker-compose 配置文件
└── html/
       └── origin/
              ├── master/         # 预留的 master 版本 HTML 目录（为空）
             └── dev/            # 预留的 dev 版本 HTML 目录（为空）
├── jenkins_home/           # Jenkins 数据存储目录（为空）
├── nginx/
│   └── conf/
│          └── nginx.conf      # 空的 Nginx 配置文件

nginx 配置，其中 pamirs 代理的后端地址根据实际情况修改

# nginx.conf
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

    #这里两个环境使用一个nginx.conf文件，也可以单独分开来
    #master环境
    server {
        #监听的端口
        listen  8001;
        server_name  localhost;
        #设置日志
        #access_log  logs/dev.access.log  main;

        #定位到index.html
           location / {
                #linux下HTML文件夹,就是你的前端项目文件夹
                root  /usr/share/nginx/html/origin/master/dist;
                #root  /home/html/dev/dist;
                #输入网址（server_name：port）后，默认的访问页面
                index  index.html;
                try_files $uri $uri/ /index.html;
           }

            location /pamirs {
                # 根据实际详情修改(后端接口地址)
                proxy_pass http://xxx.xxx.xxx;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    }

    #dev环境
    server {
        #监听的端口
        listen  8002;
        server_name  localhost;
        #设置日志
        #access_log  logs/sit.access.log  main;

        #定位到index.html
           location / {
                #linux下HTML文件夹,就是你的前端项目文件夹
                root  /usr/share/nginx/html/origin/dev/dist;
                #root  /home/html/dev/dist;
                #输入网址（server_name：port）后，默认的访问页面
                index  index.html;
                try_files $uri $uri/ /index.html;
           }

            location /pamirs {
                # 根据实际详情修改(后端接口地址)
                proxy_pass http://xxx.xxx.xxx;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    }

#    include /etc/nginx/conf.d/*.conf;
}

docker-compose 配置

# 新版docker-compose不用写自动引用最新版本
# version: '3'

networks:
  frontend:
    external: true

services:                                      # 容器

  docker_jenkins:
    user: root                                 # root权限
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 使用的镜像
    container_name: jenkins                    # 容器名称
    environment:
      - TZ=Asia/Shanghai
      - "JENKINS_OPTS=--prefix=/jenkins_home" ## 自定义 jenkins 访问前缀（上下文context）
    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
    volumes:                                   # 卷挂载路径
      - ../jenkins_home/:/var/jenkins_home     # 挂载到容器内的jenkins_home目录
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose

  docker_nginx_pro:                            # nginx-pro环境
    restart: always
    image: nginx
    container_name: nginx_pro
    ports:
      - 8001:8001
    volumes:
      - ../nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - ../html:/usr/share/nginx/html    # 宿主机./docker/html 映射docker容器内的/usr/share/nginx/html
      - ../nginx/logs:/var/log/nginx

  docker_nginx_dev:                            # nginx-dev环境
    restart: always
    image: nginx
    container_name: nginx_dev
    ports:
      - 8002:8002
    volumes:
      - ../nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - ../html:/usr/share/nginx/html        # 宿主机./docker/html 映射docker容器内的/usr/share/nginx/html
      - ../nginx/logs:/var/log/nginx

1-3 启动 docker

# 启动docker
systemctl start docker
# 启动docker-compose
# 这里我们使用docker-compose.yml配置文件启动，所以不需要另外手动创建容器里，这也是为什么使用docker-compose.yml配置文件的原因
cd /docker/compose/
docker-compose up -d

# 输出以下内容
[+] Building 0.0s (0/0)                       docker:desktop-linux
[+] Running 3/3
Container nginx_pro  Started                               0.1s
Container jenkins    Started                                 0.1s
Container nginx_dev  Started                               0.1s

1-4 检查 nginx 配置

测试 nginx 配置是否正确

# 目录下创建index.html文件
cd ./docker/html/origin/dev/dist
# 黏贴下面的html内容
vim index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>welcome to Nginx</h1>
  </body>
</html>

浏览器打开 localhost:8002 可以看到 welcome to Nginx 页面，证明 nginx 配置正确。

1-5 登录 jenkins web 端

登录服务器地址 localhost:8080/jenkins_home 进入jenkins 的web端
去服务器上 vim ./docker/jenkins_home/secrets/initialAdminPassword 复制初始密码
回到 jenkins 的 web 端，输入初始密码。
登录后，安装推荐的插件（不要选择自定义插件）。
注册管理员账号完成登录

2. jenkins 配置

2-1 安装必要插件

这一步如果插件有报错的话可以尝试重启下容器
dashbord => Manage Jenkins（系统管理） => plugin（插件） => Available plugins

Publish Over SSH 配置远程服务器
NodeJS 服务端打包
Git Parameter 参数化构建

2-2 Publish Over SSH 配置远程服务器

dashbord => Manage Jenkins（系统管理） => 系统配置 => ctrl f Publish over SSH

找到 SSH Servers 并新增
填写 name 自定义填写名称（示例：jenkins_node）
填写 Hostname 服务器ip地址
填写 Username 服务器登录名称
填写 Remote Directory 登录后访问的地址
点击高级弹出额外配置
勾选 Use password authentication, or use a different key。
出现 Passphrase / Password，输入服务器登录密码
检查默认 port 是否为22 。一般不用修改
点击 Test Configuration，显示 success 则 jenkins 配置 SSH 远程服务器成功
点击应用按钮点击保存按钮

2-3 NodeJs 配置

dashbord => Manage Jenkins（系统管理） => 全局工具配置 => ctrl F NodeJS 安装

新增 NodeJS
填写别名自定义填写名称，可以照抄下面的版本号
选择 NodeJS版本，之前已经下载好插件，这里应该自动跳出来的
点击应用按钮点击保存按钮

2-4 凭据配置

dashbord => Manage Jenkins（系统管理） => 凭据管理 => 全局按钮下拉选择添加凭据
此处添加 github 仓库和 npm 令牌

添加 github 仓库
- 填写用户名 github用户名
- 填写密码 github密码
- 填写描述 github 登录凭证
- 点击创建按钮
添加 npm 令牌
- 类型选择「Secret text」
- Secret 字段填入你用于 Nexus 仓库的认证 authToken
- ID 填写一个易于识别的值，比如：KUNLUN_NPM_TOKEN
- 点击创建按钮
- tips
```
# 登录数式 npm 仓库
npm login --registry=http://nexus.shushi.pro/repository/kunlun/
# 查看登录令牌
cat ~/.npmrc
```

2-5 创建任务

dashbord => 点击屏幕中间 create a job

名称填写你的项目名字（示例：React_PC）
点击构建一个自由风格的软件项目
点击确定按钮
点击 github项目填写项目URL
源码管理勾选git
填写 Repository URL 这里用github仓库的http地址
Credentials 选择之前配置的凭证
指定分支暂时填写 */dev
点击应用按钮点击保存按钮
点击立即构建按钮，观察是否通过

2-6 Github webHooks 配置

github代码仓库 => Settings => Webhooks

填写 Payload URL http://ip:8080/jenkins_home/github-webhook/
选择 Content type application/json
点击 add webbhook 按钮
jenkins => dashbord => 点击之前创建的项目 => 配置

点击构建触发器
勾选 GitHub hook trigger for GITScm polling

2-7 构建环境

`ctrl f` 构建环境

点击构建环境
勾选「Use secret text(s) or file(s)」→「Add」→ 把 npm 令牌添加成环境变量
变量填 KUNLUN_NPM_TOKEN，凭据选我们添加的 npm 令牌（ID 是 KUNLUN_NPM_TOKEN）
勾选 Provide Node & npm bin/ folder to PATH
选择我们刚刚配置过的nodejs版本
点击应用按钮

2-8 Build Steps

`ctrl f` Build Steps

增加构建步骤
选择 Execute NodeJS script
选择我们刚刚配置过的nodejs版本
点击应用、保存按钮
构建项目测试目前为止步骤是否正确，并学会手动构建流程

2-9 执行 shell

dashbord => 点击之前创建的项目 => 配置 => ctrl F Build Steps

增加构建步骤
选择执行 shell
填写下面 bash 指令
点击应用、保存按钮
构建项目测试，控制台输出应该能看到安装成功和构建成功

#!/bin/bash
node -v
npm -v

npm install -g pnpm || { echo "pnpm 安装失败"; exit 1; }
echo "pnpm 安装成功"

echo "" >> .npmrc
echo "//nexus.shushi.pro/repository/kunlun/:_authToken=${KUNLUN_NPM_TOKEN}" >> .npmrc

pnpm install || { echo "依赖安装失败"; exit 1; }
echo "依赖安装成功"

pnpm --filter ss-boot build || { echo "构建失败"; exit 1; }
echo "构建成功"

2-10 自动部署到对应环境

修改下 bash 指令，打包出 ./dist 后，将 ./dist 压缩
dashbord => 点击之前创建的项目 => 配置 => ctrl F 执行shell

#!/bin/bash

# 查看信息
echo "当前打包项目 Github 仓库分支："
echo "GIT_BRANCH" $GIT_BRANCH

node -v
npm -v

npm install -g pnpm || { echo "pnpm 安装失败"; exit 1; }
echo "pnpm 安装成功"

echo "" >> .npmrc
echo "//nexus.shushi.pro/repository/kunlun/:_authToken=${KUNLUN_NPM_TOKEN}" >> .npmrc

pnpm install || { echo "依赖安装失败"; exit 1; }
echo "依赖安装成功"

pnpm --filter ss-boot build || { echo "构建失败"; exit 1; }
echo "构建成功"

cd ./packages/ss-boot
if [ ! -d "./dist" ]; then
    echo "构建未生成 dist 目录"
    exit 1
fi

echo "开始打包..."

rm -rf dist.tar     # 每次构建删除已存在的dist压缩包
tar -zcvf dist.tar ./dist  # 将dist文件压缩成dist.tar
if [ $? -eq 0 ]; then
    echo "打包成功"
else
    echo "打包失败"
    exit 1
fi

echo "构建和打包完成"
echo $PATH

点击应用

增加构建步骤，将 dist 压缩包通过 ssh 传到服务器上，用 nginx 代理
- 选择 Send files or execute commands over SSH
- 填写服务名称 Name 为 jenkins_node
- 填写源文件Source 为 dist.tar
- 填写目标路径Remote directory 为 /Users/ember/docker/html/origin/dev （根据实际nginx代理的目录修改）
- 填写执行脚本Exec command 如下
```shell
cd /Users/ember/docker/html/origin/dev
rm -rf dist/
tar zxvf dist.tar
rm dist.tar

Oinone社区作者：银时原创文章，如若转载，请注明出处：https://doc.oinone.top/other/20839.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

shao 2024年11月25日

支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈

评论于 6.4 国际化之多语言
xiao3 2024年11月25日

只支持英语吗？如何添加其他语种？

评论于 6.4 国际化之多语言
psyy 2024年8月21日

1.4 Oinone对软件特性的思考，技术原理一段，几余（几->冗） 1.4 Oinone对软件特性的思考，协同演进一段，新特生（生->性）

评论于 1.4 Oinone对软件特性的思考
望闲 2024年6月21日

感谢反馈，已修正

评论于 1.5 Oinone与行业对比
xinf 2024年6月14日

bug反馈：采用无一体设计 -> 采用低无一体设计

评论于 1.5 Oinone与行业对比

前端发布接入jenkins

1. jenkins 安装部署（docker）

1-1 前置条件

1-2 jenkins 安装

1-3 启动 docker

1-4 检查 nginx 配置

1-5 登录 jenkins web 端

2. jenkins 配置

2-1 安装必要插件

2-2 Publish Over SSH 配置远程服务器

2-3 NodeJs 配置

2-4 凭据配置

2-5 创建任务

2-6 Github webHooks 配置

2-7 构建环境

2-8 Build Steps

2-9 执行 shell

2-10 自动部署到对应环境

Leave a Reply

前端发布接入jenkins

1. jenkins 安装部署（docker）

1-1 前置条件

1-2 jenkins 安装

1-3 启动 docker

1-4 检查 nginx 配置

1-5 登录 jenkins web 端

2. jenkins 配置

2-1 安装必要插件

2-2 Publish Over SSH 配置远程服务器

2-3 NodeJs 配置

2-4 凭据配置

2-5 创建任务

2-6 Github webHooks 配置

2-7 构建环境

2-8 Build Steps

2-9 执行 shell

2-10 自动部署到对应环境

相关推荐

后台嵌入其他系统的界面，设计器：嵌入网页组件

设计器基础学习路径

新人引导文档

开放应用中的ip黑白名单

3.5.7 前端组件自定义(初级篇)

Leave a Reply