前言

前端项目每次打包上线都要手动打包上传到服务器，就想着弄一个Jenkins做自动化部署，这样就方便多了。所以写个教程记录一下。

一、centOS安装docker

如果之前安装过docker，使用以下命令卸载

    yum remove docker \
      docker-client \
      docker-client-latest \
      docker-common \
      docker-latest \
      docker-latest-logrotate \
      docker-logrotate \
      docker-selinux \
      docker-engine-selinux \
      docker-engine \
      docker-ce

安装yum工具

    yum install -y yum-utils \ 
        device-mapper-persistent-data \ 
        lvm2 --skip-broken

设置docker镜像源，依次执行以下命令

yum-config-manager \
    --add-repo \
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
    
sed -i 's/download.docker.com/mirrors.aliyun.com\/docker-ce/g' /etc/yum.repos.d/docker-ce.repo

yum makecache fast

安装docker yum install -y docker-ce
查看并启动docker

    docker -v
    
    systemctl start docker # 启动docker服务 
    systemctl stop docker # 停止docker服务 
    systemctl restart docker # 重启docker服务

如果启动时报错提示：Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details. 执行以下操作

cd /etc/docker/ 

# 修改daemon的类型 
mv daemon.json daemon.conf 

# 重启docker
systemctl restart docker

安装docker-compose

curl -L https://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

docker-compose权限提升

sudo chmod +x /usr/local/bin/docker-compose

二、安装git

. . .

查看git版本

git -v

配置密钥生成id_rsa_pub(公钥) 和 id_rsa(私钥)

ssh-keygen -t rsa -C "root"

添加公钥到gitlab 或者其他代码仓库的 SSH key

输入cd /root/.ssh

三、安装jenkins

安装Jenkins:lts

docker pull jenkins/jenkins:lts

创建jenkins文件夹

mkdir /usr/local/docker 
mkdir /usr/local/docker/compose 
mkdir /usr/local/docker/jenkins

创建jenkins配置文件 docker-compose.yml

cd /usr/local/docker/compose 
touch docker-compose.yml

version: '3' 
networks: 
    frontend: 
        external: true 
        
services: # 容器 
    docker_jenkins: 
        user: root # root权限 
        restart: always # 重启方式 
        image: jenkins/jenkins:lts # 使用的镜像 
        container_name: jenkins # 容器名称 
        ports: # 对外暴露的端口定义 
            - 8090:8080 # 对外暴露的端口：Jenkins默认端口
            
docker_nginx: # nginx环境 
    restart: always 
    image: nginx 
    container_name: nginx
    ports: 
        - 8001:8001 
    volumes: 
        - usr/local/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf 
        - /usr/local/docker/html:/usr/share/nginx/html 
        - /usr/local/docker/nginx/logs:/var/log/nginx

systemctl start docker # 执行docker启动命令

cd /docker/compose # 进入到对应目录 

docker compose up -d # 执行命令

docker ps -a # 查看docker运行状态

访问jenkins ip + 设置的端口号初始化默认密码在/usr/local/docker/jenkins/secrets/initialAdminPassword

四、安装nginx

创建nginx 文件夹

mkdir /usr/local/docker/nginx 
mkdir /usr/local/docker/nginx/conf 
mkdir /usr/local/docker/html

创建nginx配置文件 nginx

cd /usr/local/docker/nginx/conf 
touch nginx.conf

修改配置文件，nginx详细参数配置(史上最全)

重启dockersystemctl restart docker

五、配置jenkins

下载插件

搜索gitlab Nodejs publish Over SSH 这三个插件

Publish Over SSH 连接远程服务器

进入系统配置

点击高级输入密码

下滑测试连接应用保存

配置nodejs

进入全局配置

新增nodejs 选择自己本地对应的node版本

添加凭据

进入凭据管理

添加凭据

创建构建任务

新建任务

设置构建触发器复制好webhooks URL 和Secret Token下一步到gitlab上设置webhooks 需要

去gitlab 上配置webhooks

设置 Build Steps

选择配置的node版本 接着添加构建步骤添加shell

添加shell语句

#!/bin/bash

yarn install --pure-lockfile 
npm run build

rm -rf dist.tar # 先删除已存在的dist压缩包
tar -zcvf dist.tar ./dist # 将dist文件压缩成dist.tar

Source files将/usr/local/docker/jenkins/workspace/test_web/dist.tar 到目标目录所以是dist.tar Remote directory 将dist文件复制到的目标目录 Exec command 最后执行的命令

cd /usr/local/nginx/html
rm  -rf   dist/ # 删除已有的dist文件夹
tar zxvf dist.tar # 解压dist压缩包
rm dist.tar # 删除dist压缩包

以上全部配置完成，测试构建成功

docker+jenkins+nginx前端自动化部署

前言

一、centOS安装docker

二、安装git

三、安装jenkins

四、安装nginx

五、配置jenkins

Publish Over SSH 连接远程服务器

配置nodejs

添加凭据

创建构建任务

设置 Build Steps