欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

win10的jenkins+centos7的docker自动化部署前端项目

程序员文章站 2024-01-27 14:05:22
...

背景

部署环境中jenkins和docker的使用,请参看我的上篇博客:jenkins部署SpringBoot的jar包项目到docker容器并运行

jenkins+docker部署前端项目

jenkins相关配置

配置jenkins插件和全局工具配置

配置所需插件

点击系统管理,选择插件管理,添加除了新手推荐需要安装的插件
win10的jenkins+centos7的docker自动化部署前端项目
win10的jenkins+centos7的docker自动化部署前端项目
安装Publish Over SSH用于连接远程服务器
win10的jenkins+centos7的docker自动化部署前端项目
安装Deploy to container插件用于把打包的应用发布到远程服务器
win10的jenkins+centos7的docker自动化部署前端项目

进行全局工具配置

如果win10或者服务器安装的有,可以直接选择使用(不选择自动安装),如果没有也可以选择自动安装。

win10的jenkins+centos7的docker自动化部署前端项目
win10的jenkins+centos7的docker自动化部署前端项目

进行系统设置

去系统设置里配置Publish over SSH
win10的jenkins+centos7的docker自动化部署前端项目

  • Passphrase 服务器的密码
  • Path to key 连接远程服务器**文件的路径
  • Key **文件的内容
  • Name 自定义服务器名
  • HostName 服务器IP外网地址
  • UserName 服务器用户名
  • Remote Directory 传输文件的目录

Publish over SSH可以配置多个,根据Name进行判别。会将所需要传的文件源串发送至Remote Directory目录。

构建项目

win10的jenkins+centos7的docker自动化部署前端项目
构建*风格的项目

win10的jenkins+centos7的docker自动化部署前端项目

配置git地址

win10的jenkins+centos7的docker自动化部署前端项目
如果有需要可以构建触发器,用于自动化构建项目
win10的jenkins+centos7的docker自动化部署前端项目
触发器建议使用这2种

1.定时构建
定时构建就是没隔一段时间就是构建1次任务
0 * * * * 代表每小时0分的时候构建1次项目
第1个代表分,第2个代表时,第3个代表日,第4个代表月,第5个代表周

2.轮询SCM
轮询SCM就是查看源码管理的代码有没有更新,如果更新了就去构建,没有更新就不会构建
*/5 * * * * 代表每5分钟就去查看源码有没有更新

当然其他方式的触发器也可以使用。

以上为配置前端项目共通内容

部署Vue项目

配置构建环境,选用Node

如果没有,在全局工具配置里面配置
win10的jenkins+centos7的docker自动化部署前端项目

配置构建命令

选择windows命令,执行npm的安装和构建命令,这里的安装和构建命令需要分为两步,分开执行,否则不成功,原因并不知道。
win10的jenkins+centos7的docker自动化部署前端项目
执行完一次windows命令,需要执行exit 0,否则会报错:Build step 'Execute Windows batch command' marked build as failure

发送dist文件夹下的内容至远程服务器,并执行shell命令

win10的jenkins+centos7的docker自动化部署前端项目

  • Source files 项目构建后的目录(以本项目为根路径)
  • Remove prefix 去前缀
  • Remote directoty 发布的目录(前缀为系统设置里配置Publish over SSH的Remote Directory)
  • Exec command 发布完执行的命令。
Exec command 的shell脚本:
BUILD_ID=dontKillMe /usr/local/dockerApp/blog-manage-web/docker.sh
解释:

/usr/local/dockerApp/blog-manage-web是dist文件夹的放置目录
docker.sh是执行docker的相关操作

服务器进行docker相关配置

  1. 进入云服务器中到项目的目录下,即/usr/local/dockerApp/blog-manage-web
  2. 在该目录下创建并编写Dockerfile文件
FROM nginx
COPY dist/ /usr/local/html/blog-manage-web/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'blog-manage-web build ok'

这里的nginx为docker安装的容器,如果没有,运行时会自动安装

  1. 创建并编辑ngin的配置文件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;
  keepalive_timeout  65;
  server {
    listen       8089;
    server_name  118.89.143.27;
    location / {
      root   /usr/local/html/blog-manage-web;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}
  1. 创建并配置docker.sh脚本

当时jenkins远程将dist发送至服务器的/usr/local/dockerApp/blog-manage-web目录

# 文件的根路径
BASE_PATH=/usr/local/dockerApp/blog-manage-web
#docker 镜像/容器名字或者jar名字 这里都命名为这个
SERVER_NAME=blog-manage-web
#容器id
CID=$(docker ps | grep "$SERVER_NAME" | awk '{print $1}')
#镜像id
IID=$(docker images | grep "$SERVER_NAME" | awk '{print $3}')

#修改文件夹的权限
chmod -R 777 $BASE_PATH/dist


 # 判断镜像是否存在
         if [ -n "$IID" ]; then
                 echo "存在$SERVER_NAME镜像,IID=$IID"
                  docker stop $SERVER_NAME   # 停止运行中的容器
                  docker rm $SERVER_NAME     ##删除原来的容器
                  docker rmi $IID   ## 删除原来的镜像

         else
                 echo "不存在$SERVER_NAME镜像,开始构建镜像"

        fi
# 构建docker镜像
  cd $BASE_PATH
  docker build -t $SERVER_NAME .

# 运行容器
docker run --name $SERVER_NAME -v $BASE_PATH:$BASE_PATH -d -p 8089:8089 $SERVER_NAME

关键点为:如果存在镜像,停止运行中的容器-删除原来的容器-删除原来的镜像-构建新的镜像-运行新的容器;如果不存在镜像,构建新的镜像-运行新的容器

有的博客说,有-v挂载之后,每次本地更新jar包重启容器即可,不用重新构建镜像,不知道是否可行,需要测试。测试后在进行更新,

立即构建项目

win10的jenkins+centos7的docker自动化部署前端项目
如果是success说明成功

通过ip+端口,访问项目接口,测试是否成功

部署普通的H5项目

利用jenkins+docker也可配置H5项目,唯一的区别只是不用执行npm的相关目录,直接将项目复制进容器,利用nginx进行反向代理即可。

此处操作与上文类似,所以省略。

下面讲述使用win10的jenkins+docker安装tomcat部署前端项目

win10的jenkins+docker安装tomcat部署前端项目

关于docker安装tomcat请参看我的另一篇博客:docker安装mysql、tomcat、nginx

jenkins的所有配置与上文几乎一致,只是在执行构建操作有所区别

构建

win10的jenkins+centos7的docker自动化部署前端项目
系统设置里配置的Publish over SSH有所改变
win10的jenkins+centos7的docker自动化部署前端项目
因为/usr/local/dockerApp/tomcat/webapps/test与tomcat的webapps/test有挂载,所以上传到这里可以直接进行访问。

挂载操作,参看上面docker安装tomcat的链接(挂载目录可以进行修改)。

然后立即构建进行测试。

访问地址:ip:端口/test/项目名