docker+jenkins+github容器化自动部署和应用

172 阅读3分钟

1. docker安装(略)

2. docker安装配置Nginx

3. linux服务器Node环境部署

cd /usr/local/src #进入目录
wget https://nodejs.org/dist/v16.16.0/node-v16.16.0-linux-x64.tar.xz #下载软件
tar -xvf node-v16.16.0-linux-x64.tar.xz #解压
mv node-v16.16.0-linux-x64 nodejs #重命名

#添加软链接
ln -s /usr/local/src/nodejs/bin/node  /usr/local/bin/node
ln -s /usr/local/src/nodejs/bin/npm   /usr/local/bin/npm

#设置命令环境变量
cd ~ #进入家目录
vi .bash_profile
# PATH后面追加参数保存:/usr/local/src/nodejs/bin
# 例如:PATH=$PATH:$HOME/bin:/usr/local/src/nodejs/bin
source .bash_profile #生效文件
#查看版本
node -v 
#查看版本
npm -v 

4. docker安装部署jenkins

docker search jenkins
docker pull jenkins/jenkins:lts
docker images #查看镜像

// 宿主机建立目录
mkdir -p /home/jenkins/workspace
 
 // 运行容器
 docker run -u root -d --restart=always --privileged=true  -p 9001:8080 \
-v /home/jenkins/workspace/:/var/jenkins_home/workspace \
-v /var/run/docker.sock:/var/run/docker.sock \
-v /usr/bin/docker:/usr/bin/docker \
-v /usr/local/bin/node:/usr/bin/node \
-v /usr/local/bin/npm:/usr/bin/npm \
--name jenkins jenkins/jenkins:lts
 

// 进入容器
docker exec -it -uroot jenkins bash

// 获取初始化密码
cat /var/jenkins_home/secrets/initialAdminPassword
 
// 生成密钥
ssh-keygen -t rsa -C "root"  #输入完一直回车就结束了
cat /root/.ssh/id_rsa.pub #查看公钥

4.1 查看jenkins容器运行状态 dockker ps -a

image.png

4.2 浏览器访问 jenkins。 http://ip(域名):9001/ 访问

// 进入容器
docker exec -it -uroot jenkins bash

// 获取初始化密码
cat /var/jenkins_home/secrets/initialAdminPassword

输入管理员密码

image.png

初始化Jenkins,安装推荐的插件。

image.png

生成Jenkins容器的密钥

// 进入容器
docker exec -it -uroot jenkins bash

// 生成密钥
ssh-keygen -t rsa -C "root"  #输入完一直回车就结束了
cat /root/.ssh/id_rsa.pub #查看公钥

image.png

拷贝Jenkins容器的密钥,加入到github等代码仓库中。

SSH and GPG keys (github.com)

image.png

添加配置一些账号凭据

进入系统管理=》credentials工具中,添加自己的github账号密码,gitee账号密码,服务器账号密码等。

image.png

4.3 github+Jenkins自动构建配置

github 生成 Personal access tokens (classic)。

Personal Access Tokens (Classic)

image.png

生成token后,切记复制保存,因为只会显示一次,否则需要重新生成。

image.png

配置github的hook

将token添加进凭据 image.png

将上一步生成的tokens 添加进去,保存。配置完成。

image.png

5. github仓库前端vue项目自动构建和部署

5.1 前端项目,dockerfile和nginx配置。 参考:LittleMap

image.png

FROM nginx:latest

RUN mkdir -p /usr/share/nginx/html/little-map

COPY ./dist/ /usr/share/nginx/html/little-map/
COPY ./build/default.conf /etc/nginx/conf.d/default.conf
server{  
    listen 5371;  
    server_name  localhost;  
  
    #charsetkoi8-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  500 502 503 504 /50x.html;  
    location = /50x.html {  
        root  /usr/share/nginx/html;  
    }
}

5.2 Jenkins新建自动化部署任务

image.png

自动化配置

image.png

image.png

构建触发器,选择Node构建环境

image.png

构建步骤:选择执行shell

image.png

构建脚本

image.png

npm -v
node -v
npm install
echo "依赖安装完成---------------"
npm run build
echo "打包完成---------------"

docker -v
echo "停止容器"
docker stop testvue
echo "删除容器"
docker rm testvue
echo "删除镜像"
docker rmi testvue:latest
docker build -f build/Dockerfile -t testvue .
echo "镜像打包完成---------------"
docker run -u root -d --restart=always --privileged=true -p 5371:5371 --name testvue testvue:latest
echo "容器运行完成---------------"

github 项目仓库配置webhook

进入项目仓库 => Settings => Webhooks => Add webhook。

image.png

将 JenkinsURL + github-webhook/ 添加进Payload URL。 例如:www.xxxx.com:9001/github-webh…

image.png

6. 测试构建

进入构建任务,点击立即构建,点击某项"构建历史"查看构建详情。

image.png

github提交一次代码,看是否成功触发执行自动构建。

image.png