[toc]

部署代码

创建gitlab项目

image-20230518165734464

需求一

老板：给我写一个官网
程序猿：花了一天一夜，做出来了，请老板过目

编写代码

  • html代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # vim index.html
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>代码迭代过程-曾老湿</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div id="demo">澳门皇家DC</div>
    	<div id="demo2"></div>
    	<script src="main.js"></script>
    </body>
    </html>

  • css代码

    1
    2
    3
    4
    # vim style.css
    #demo2{
    	margin-top: 50px;
    }

  • js代码

    1
    2
    3
    4
    5
    6
    7
    8
    # vim main.js
    const string = '官网内容：澳门首家线上DC，性感荷官在线发牌，快来注册吧.'
    let n = 1
    demo2.innerHTML = string.substring(0,n)
    setInterval(()=>{
    	n+=1
    	demo2.innerHTML = string.substring(0,n)
    },200)

git操作

1
2
3
4
5
6
7
8
9
10
11
# 添加到暂存区
git add .

# 查看状态
git status

# 放入版本库
git commit -m '新官网

# 代码上线
scp ./* 10.0.0.7:/code/web

image-20230514211516133

需求二

老板：有点丑，我希望背景颜色是yellow，醒目一些。
老板秘书：我觉得不错，要是字体能做彩色的就好了。
程序猿：MMP，你们的意见就不能统一一下么？

用git 分支功能

  • 老板的需求：黄色背景

    • 分支操作

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # 创建ceo分支
      git branch ceo_branch

      # 查看分支(星星在哪里就是代表你在哪里)
      git branch
        ceo_branch
      * master

      # 切换到ceo分支
      git checkout ceo_branch

    • 修改代码

      • html文件

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        # vim index.html
        <!DOCTYPE html>
        <html lang="zh">
        <head>
        	<meta charset="UTF-8">
        	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        	<title>代码迭代过程-曾老湿</title>
        	<link rel="stylesheet" href="style.css">
        </head>
        <body>
        	<div id="demo">澳门皇家DC</div>
        	<div id="demo2"></div>
        	<script src="main.js"></script>
        </body>
        </html>

      • css代码

        1
        2
        3
        4
        5
        6
        7
        # vim style.css
        body{
        	background-color: yellow;
        }
        demo2{
        	margin-top: 50px;
        }

      • js代码

        1
        2
        3
        4
        5
        6
        7
        8
        # vim main.js
        const string = '官网内容：澳门首家线上DC，性感荷官在线发牌，快来注册吧.'
        let n = 1
        demo2.innerHTML = string.substring(0,n)
        setInterval(()=>{
        	n+=1
        	demo2.innerHTML = string.substring(0,n)
        },200)

    • git管理

      1
      2
      3
      4
      5
      6
      7
      8
      # 添加暂存区
      git add .

      # 添加到版本库
      git commit -m '新官网v1.2(背景为黄色)'

      # 代码上线
      scp ./* 10.0.0.7:/code/web

      image-20230514212615132

  • 秘书的需求：彩色字体

    • 分支操作

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      # 创建秘书分支
      git branch ms_branch

      # 切换到秘书分支
      git checkout ms_branch

      # 查看分支(星星在哪里就是代表你在哪里)
      git branch
        ceo_branch
        master
      * ms_branch

    • 修改代码

      • css代码

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        # vim styles.css
        #demo2{
        	margin-top: 50px;
        }
        #demo2{
        	margin-top: 50px;
        }
        #demo,#demo2 {
        	display: block;
        	/*渐变背景*/
        	background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%,
        #d71345 20%, #f7acbc 30%,
        	#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%,
        #3498db);
        	color: transparent; /*文字填充色为透明*/
        	-webkit-text-fill-color: transparent;
        	-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
        	background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样
        background-position才有移动与变化的空间*/
        	/* 动画 */
        	animation: masked-animation 4s infinite linear;
        }
        @keyframes masked-animation {
        	0% {
        		background-position: 0 0; /*background-position 属性设置背景图像的起始位
        置。*/
        	}
        	100% {
        		background-position: -100% 0;
        	}
        }

    • git管理

      1
      2
      3
      4
      5
      6
      7
      8
      # 添加暂存区
      git add .

      # 提交代码
      git commit -m "新官网v1.3（字体为彩色）"

      # 代码上线
      scp ./* 10.0.0.7:/code/web

      image-20230514212946266

  • 合并分支

    • 明确保留哪个分支

      • 主分支

    • 分支合并

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      # 查看当前所在分支
      git branch
        ceo_branch
        master
      * ms_branch

      # 切换到主分支
      git checkout master

      # 查看当前分支
      git branch
        ceo_branch
      * master
        ms_branch

      # 合并老板分支，先进入master再把老板的分支合并到master
      git merge ceo_branch

      # 合并秘书
      git merge ms_branch

    • 分支合并报错

      image-20230514213247199

      • 输入:wq忽略并跳过错误

    • 上线

      1
      2
      3
      4
      5
      # 查看状态
      git status

      # 代码上线
      scp ./* 10.0.0.7:/code/web

      image-20230514213457970

手动发布的步骤

环境准备

主机名 外网 内网 角色 应用
gitlab 10.0.0.91 172.16.1.91 代码仓库 gitlab
jenkins 10.0.0.92 172.16.1.92 代码发布 Jenkins，jdk
web01 10.0.0.7 172.16.1.7 官网 nginx
web02 10.0.0.8 172.16.1.8 官网 nginx 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 准备两台机器安装nginx
yum install -y nginx

# Jenkins必须要免密连接web服务器
ssh-keygen

# 发送公钥
ssh-copy-id -i ~/.ssh/id_rsa.pub 172.16.1.8
ssh-copy-id -i ~/.ssh/id_rsa.pub 172.16.1.7

# 进入jenkins项目工作目录
cd /var/lib/jenkins/workspace/free

# 做本地域名解析
vim /etc/hosts
10.0.0.91 gitlab.xxx.com

# gitlab做密钥

image-20230518170607428

1
2
# 拉gitlab中的代码
git clone git@gitlab.xxx.com:root/xyz.git

部署web页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 安装nginx
yum install -y nginx

# 编写配置文件
server{
	listen 80;
	server_name _;
	root /code/xxx;
	index index.html；
}

# 将代码打包
zip -r xyz_2023_05_18.zip /var/lib/jenkins/workspace/free/*

# 发送带web机器上
scp xyz_2023_05_18.zip 10.0.0.7:/opt/
scp xyz_2023_05_18.zip 10.0.0.8:/opt/

# 解压代码
unzip xyz_2023_05_18.zip
unzip xyz_2023_05_18.zip

# 做软连接 部署代码
ln -s /opt/xyz /code/xxx
ln -s /opt/xyz /code/xxx

image-20230518171753876

image-20230518171758565

自动化代码上线

创建项目

创建Jenkins任务

image-20230518171815478

image-20230521192223177

image-20230521192227062

添加私钥

编写脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# 创建脚本存放目录路径
mkdir /var/lib/jenkins/scripts

# 授权
chown jenkins.jenkins /var/lib/jenkins/scripts -R

# 编写脚本
vim /var/lib/jenkins/scripts/deploy_xyz.sh
#!/bin/bash
# 1.定义变量
DATA=$(data +%F)
package_name="xyz_${DATA}.zip"
code_dir="/code/xxx"
soft_link="=code/xxx"
web_server="172.16.1.7 172.16.1.8"
# 2. 将代码打包
cd ${WORKSPACE} && \
zip -r ${package_name} ./*
#3.发送到web机器 && 解压代码 删除软连接 部署代码（做软连接）
for ip in ${web_server};do
	ssh {ip} "mkdir -p ${code_dir}"
	scp ${package_name} ${ip}:${code_dir}
	ssh ${ip} "rm -fr ${code_dir}/${package_name}"
	ssh ${ip} "cd ${code_dir} && unzip ${package_name} -d ${package_name.*}
	ssh ${ip} "rm -fr ${soft_link}"
	ssh ${ip} "ln -s ${code_dir}/${package_name%%.*}"
done

# 添加执行权限
chmod +x /var/lib/jenkins/scripts/deploy_xyz.sh

#!/bin/bash
DATA=$(data "+%F")
package_name="xyz_${DATA}.zip"
code_dir="/code/xxx"
soft_link="=code/xxx"
web_server="172.16.1.7 172.16.1.8"

cd ${WORKSPACE} && \
zip -r ${package_name} ./*

for ip in ${web_server};do
	ssh {ip} "mkdir -p ${code_dir}"
	scp ${package_name} ${ip}:${code_dir}
	ssh ${ip} "rm -fr ${code_dir}/${package_name}"
	ssh ${ip} "cd ${code_dir} && unzip ${package_name} -d ${package_name.*}
	ssh ${ip} "rm -fr ${soft_link}"
	ssh ${ip} "ln -s ${code_dir}/${package_name%%.*}"
done

#!/bin/bash
web_ydm="xyz"
web_server="172.16.1.7 172.16.1.8"
zip_ysb="xyz_2023_05_18.zip"
code_dir="/code/xxx"

# 压缩网页源代码
zip -r ${zip_ysb} /var/lib/jenkins/workspace/free/${web_ydm}

for ip in ${web_server};do
	# 将代码发送到web服务器
	scp ${zip_ysb} ${ip}:/opt/
	# 解压网页源代码
	ssh root@${ip} 'unzip /opt/${zip_ysb}'
	# 删除旧的软链接
	ssh root@${ip} 'rm -fr ${code_dir}'
	# 做软连接
	ssh root@${ip} 'ln -s /opt/${web_ydm} ${code_dir}'
done