本文用于学习和记录

1. 前提条件

• 安装 Docker 和 Docker Compose
• 安装 Jenkins
• 拥有一个前端项目的代码库（例如 GitHub）

1.1. 准备一台服务器

服务器一台，请根据自己的项目选择不同配置的服务器，如果你的项目很大，内存太小，则会导致 build 失败

1.2. 安装 docker

看 docker 相关安装步骤

1.3. 安装 jdk

1.3.1. 检查系统是否自带 jdk

java --version

1.3.2. 如果有就删除

rpm -qa | grep -i java | xargs -n1 rpm -e --nodeps
#rpm -qa:查询所安装的所有rpm包
#grep -i:忽略大小写
#xargs -n1:表示每次只传递一个参数
#rpm -e --nodeps:强制卸载软件

1.3.3. 检查是否删除

#查看是否还在即可
rpm -qa | grep -i java
#或者查看java版本
java -version

1.3.4. 通过wget 下载jdk1.8 并解压

1.3.4.1. 进入 home 目录并创建 jdk 文件夹

cd /home   //进入home文件夹
mkdir jdk  //创建jdk文件夹
cd jdk     //进入jdk文件夹

1.3.4.2. 进入 jdk 文件通过 wget 下载 jdk1.8

wget \
--no-check-certificate \
--no-cookies \
--header \
"Cookie: oraclelicense=accept-securebackup-cookie" \
http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk-8u131-linux-x64.tar.gz

1.3.4.3. 解压安装包

tar xvf jdk-8u131-linux-x64.tar.gz

1.3.4.4. 配置环境变量

vim /etc/profile

然后在最后一行插入以下内容

export JAVA_HOME=/home/jdk/jdk1.8.0_131 # 你的jdk文件路径
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin

然后运行source /etc/profile使文件生效

1.3.4.5. 查看是否安装成功

java -version

1.4. 安装 jenkins

1.4.1. 使用 docker 安装

1.4.1.1. 拉取镜像

docker pull jenkins/jenkins:latest

1.4.1.2. 创建挂载目录

挂载目录用于存放数据

//创建目录
mkdir -p /usr/local/docker-volumes/jenkins_data

//授权权限
chmod 777 /usr/local/docker-volumes/jenkins_data

1.4.1.3. 启动 Jenkins 容器

启动命令如下

docker run -d \
  -p 8082:8080 \  # 映射 Jenkins Web 端口
  -p 50000:50000 \  # 映射 Jenkins Agent 端口
  -v /usr/local/docker-volumes/jenkins_data:/var/jenkins_home \  # 挂载 Jenkins 数据目录
  -v /usr/bin/docker:/usr/bin/docker \  # 挂载 Docker 二进制文件
  -v /var/run/docker.sock:/var/run/docker.sock \  # 挂载 Docker 套接字
  -e TZ=Asia/Shanghai \  # 设置时区
  -u root \ # 以 root 身份进入
  --memory="2g" \  # 限制内存为 2GB
  --cpus="2" \  # 限制 CPU 为 2 核
  --restart=on-failure \  # 容器失败时自动重启
  --name myjenkins \  # 容器名称
  --health-cmd "curl -f http://localhost:8080 || exit 1" \  # 健康检查
  --health-interval=30s \  # 健康检查间隔
  --health-timeout=10s \  # 健康检查超时时间
  --health-retries=3 \  # 健康检查重试次数
  jenkins/jenkins:latest  # Jenkins 镜像

1.4.1.4. 验证是否启动成功

docker ps -a | grep myjenkins

然后检查 STATUS，正常如下

1.4.1.5. 修改插件源

Jenkins 在安装插件时，下载相关插件包特别慢，我们可以将 Jenkins 默认的插件数据源变更为国内数据源，然后重启 Jenkins

1.4.1.5.1. 进入目录

以我们的例子为准，我们挂载的 volume 如下

cd /usr/local/docker-volumes/jenkins_data/updates

1.4.1.5.2. 修改 default.json 的源

sed -i 's#http://updates.jenkins-ci.org/download/#https://mirrors.tuna.tsinghua.edu.cn/jenkins/#g' default.json
sed -i 's#http://www.google.com/#https://www.baidu.com/#g' default.json

1.4.1.5.3. 修改 hudson.model.UpdateCenter.xml 的 url

将该文件修改为如下内容

<?xml version='1.1encoding='UTF-8'?>
<sites>
    <site>
        <id>default</id>
        <urI>http://mirror.esuni.jp/jenkins/updates/update-center.json</url》
    </site>
</sites>

1.4.1.6. 登录 jenkins

在我们访问了 ip:8082后，界面会跳出来

然后我们就可以通过以下的方式获取密码

1.4.1.6.1. 查看日志

docker logs myjenkins，找到Please use the following password to proceed to installation

这句话后面的就是初始密码

1.4.1.6.2. 查看文件

查看我们挂载的目录

cd /usr/local/docker-volumes/jenkins_data/secrets

cat initialAdminPassword

1.4.1.7. 安装插件

选择安装推荐的插件

下载完成，就可以进入 jenkins 进行操作了

1.4.1.8. 插件推荐

• Locale（中文插件）
• Maven Integration（maven 构建工具）
• Publish Over SSH（远程推送工具）
• Role-based Authorization Strategy（权限管理）
• Deploy to container（自动化部署工程所需要插件，部署到容器插件）
• git parameter（用户参数化构建过程里添加 git 类型参数）

1.4.1.9. 安装 node

1.4.1.10. 配置 node

我们进入Dashboard > 系统管理 > Tools 进行如下配置

1.4.1.11. 配置 github

进入Dashboard > 系统管理 > System 配置如下信息

点击添加

我们去 github 获取秘钥填写进 secret 里面

然后点击测试，如果如第一张图的返回一样，则表示成功

点击高级

将这个 url 复制到 github 仓库里面进行配置

点击 Webhooks，在这里粘贴我们刚刚复制的 url 地址

1.4.1.12. 创建一个任务

到 Dashboard 首页，点击新建任务

输入 github 地址

找到 源码管理标题 然后点击 Git, 添加 github 账号密码

后面有个指定分支，别填错。要和你 git 项目的主分支一样

---

触发器选择 GitHub hook trigger for GITScm polling

构建环境选择 node

添加构建步骤

输入命令

# 设置Node内存限制
# export NODE_OPTIONS="--max_old_space_size=1024"

# 配置yarn
yarn config set registry https://registry.npm.taobao.org/
yarn config set strict-ssl false
yarn config set cache-folder .yarn-cache
yarn config set network-timeout 300000

# 清理之前的构建缓存
rm -rf node_modules
rm -rf .yarn-cache

# 使用yarn安装依赖
yarn install --production --prefer-offline --network-timeout 300000 --network-concurrency 4 --no-progress

# 构建项目
yarn build

# 部署步骤
rm -rf /home/nginx/html/*
docker stop ibuy-admin-web || true
docker rm ibuy-admin-web || true
docker build -t reactginxcontainer .

# 运行新容器时添加资源限制
docker run \
  -p 3000:80 \
  -d \
  --name ibuy-admin-web \
  reactginxcontainer

完成后如下，然后点击保存即可

1.4.2. 给前端项目配置环境

1.4.2.1. 创建 Dockerfile

首先，为前端项目创建一个 Dockerfile，用于打包前端项目：

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

1.4.2.2. 创建一个 nginx/default.conf 文件，用于 Nginx 配置：

server {
    listen       80;
    server_name  localhost;
​
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
​
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
​
    #error_page  404              /404.html;
​
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # 添加API代理配置 这里是可选项，如果你是前后端分离的项目这里需要配置
    # proxy_pass就是你的后端接口地址
    location /api/ {
        proxy_pass http://127.0.0.1:8001/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

1.4.3. 推送代码

完成上述操作后就可以直接在本地 push 代码了

1.4.4. 开始构建

然后我们切换到我们的 jenkins 管理界面，到 dashboard 中选择我们创建的任务。就可以看到构建进度和状态了。到这里部署完成

参考

• https://juejin.cn/post/7377643248187146251