百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 博客教程 > 正文

超细教程:docker+Jenkins+nginx如何实现前端自动部署?

connygpt 2024-11-21 13:21 10 浏览

本次部署大概步骤如下:

  1. 准备环境
  2. 安装docker
  3. 安装docker-compose
  4. 安装Jenkins和Nginx
  5. 编写配置文件
  6. 配置Jenkins
  7. 配置Jenkins构建任务

背景

阿里云双11大促买了个服务器玩一玩,买之前很激动,买了之后,emmmm我用它能干嘛

找我干运维的好兄弟问一问,好兄弟也对我想做的事情很疑惑

所以我稀里糊涂买了服务器但是并没有想好用它来做什么

如果像我一样买了之后不知道干嘛,实在不行还可以部署一下自己的网站嘛,博客是用hexo写的,hexo这个东西适合想拥有自己的博客但是又没什么想法的同学

它提供了非常多的精美的模板,可以选择自己喜欢的模板,一键生成自己的博客

hexo生成的静态的html页面,所以我只需要在服务器配置一个Nginx服务,然后再把我的资源文件扔上去就行

但是,但是,如果仅仅是这样来部署,那也太简单了,不如让它更加的自动化

所以我想要每次我对文件更改完成后让服务器自动帮我完成部署的事情,

而不是每次手动打包,上传,解压,等等......这一系列的操作时间长了那可真是受不了

所以我的需求也渐渐的清晰明了起来,要有Nginx,要能自动部署,公司用的Jenkins我比较熟悉,这一次仍然选择它作为我自动部署的工具

上帝说要有光,于是便有了光,我想做上帝,需要有个沙箱

Docker是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。

有了沙箱之后就可以愉快的在里面进行创造了。

环境准备

  • 服务器:CentOS 8
  • docker
  • docker-compose
  • nginx 镜像
  • jenkins 镜像
  • gitee

安装docker环境

  1. 链接服务器
ssh root@000.000.000.000 #@你自己的公网IP
  1. 安装必要的一些系统工具
yum install -y yum-utils device-mapper-persistent-data lvm2
  1. 添加Docker CE的软件源信息。

sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo #容易失败,可以尝试下面这个
sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
  1. 更新并安装Docker CE
sudo yum makecache fast
sudo yum -y install docker-ce
复制代码
  1. 启动Docker服务
sudo systemctl enable docker #设置开机自启
sudo systemctl start docker  #启动docker
  1. 安装校验
docker version       #显示docker版本信息
docker info       #显示docker系统信息
docker 命令 --help     #查看命令帮助

image-20211124160831155

安装docker-compose

docker-compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose,您可以使用 YML 文件来配置应用程序需要的所有服务。然后,使用一个命令,就可以从 YML 文件配置中创建并启动所有服务。

  1. 下载docker-compose:
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
  1. 提升权限:
sudo chmod +x /usr/local/bin/docker-compose
  1. 查看是否安装成功
docker-compose -v

image-20211124162432229

安装Nginx和Jenkins镜像

docker 拉取Nginx和Jenkins镜像命令如下:

docker pull nginx  #安装Nginx
docker pull jenkins/jenkins:lts   #安装Jenkins

安装完成后执行docker images可以查看docker下存在的镜像:

image-20211128205603982

编写配置目录

接下来创建配置目录,结构如下:

├── compose
│   └── docker-compose.yml  #docker-compose配置文件
├── jenkins
│   └── jenkins_home  #Jenkins挂载卷
├── nginxcfg
    └── default.conf  #Nginx配置

以上目录我是放在根目录之下的,同学们也可以放在自己喜欢的位置

文件配置

docker-compose.yml配置文件内容:

version: '3'
services:                                      
  docker_jenkins:
    user: root                                
    restart: always                            
    image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 
    container_name: jenkins                    # 容器名称
    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
    volumes:                                   # 卷挂载路径
      - /root/jenkins/jenkins_home/:/var/jenkins_home  #冒号前为刚刚创建的路径,这里要写绝对路径
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 8090:80
      - 80:80
      - 433:433
    volumes:
      - /root/nginxcfg:/etc/nginx/conf.d  #用我们创建的Nginx配置去替换容器中的默认配置,冒号前为我们创建的目录的路径
      - /root/nginxcfg/logs:/var/log/nginx  #nginx日志位置
      - /root/xxx/xxx/xxx:/usr/share/nginx/html

default.conf文件配置

error_log  /var/log/nginx/error.log notice;
server{ # 简单的监听80端口,指定index位置
  listen  80;
  root /usr/share/nginx/html;
  index index.html index.htm;
}

在这里我踩了一个坑,就是不懂docker-compose.yml这个配置文件该去怎么写,里面的每个参数都是什么意思,也是查了很多资料才弄明白,关键的是哪个挂载卷,volumes这个参数,我的理解是用我们的一个配置去替换掉容器的默认配置,这里我请教过一些同学,他们说要在启动docker容器的时候,用docker命令决定以哪一个配置来启动,就使我很不理解,这个docker-compose.yml文件不就是用来做这个事情的吗?

最终尝试了很多次之后,终于弄明白了,问题在volumes之下,冒号前面写的是我的配置路径,冒号之后的路径是docker容器内各个镜像默认的配置路径

这个volumes就是用自己的配置去替换掉默认配置

上述两个文件配置完成之后,需要进入compose目录下面输入以下命令启动:

docker-compose up -d

停止:

docker-compose stop

Jenkins配置

输入docker ps -a查看容器的运行情况:

image-20211128213457379

状态显示为up,此时在浏览器地址栏输入服务器公网IP:8080端口可显示Jenkins管理页面:

image-20211128215149002

如果是第一次进入,需要做一些初始化工作,因为我已经安装过了,就不重新展示初始化的过程了,大概需要以下步骤:

  1. 根据提示找到密码复制粘贴通过这个命令可以获取,/root/jenkins/jenkins_home为挂载目录cat /root/jenkins/jenkins_home/secrets/initialAdminPassword
  2. 安装推荐的插件
  3. 设置管理员账号

然后就可以愉快的使用Jenkins了

接着点击系统管理->插件管理,需要在Jenkins安装两个插件:

  1. 安装 Publish Over SSH 作用: 将构建后的编译产出发布到服务器
  2. 安装Generic Webhook Trigger Plugin作用:通用 Webhook 触发器构建

点击系统管理->系统配置,全局配置ssh:

image-20211129170944558

然后到系统管理->全局工具配置,安装nodejs:

image-20211129171837863

  • 注意node版本,有的项目对node版本有要求,可能会出现构建不成功的情况

新建一个Jenkins构建任务

  1. 选择新建任务,输入任务名称,构建一个自由风格的软件项目:

image-20211129173502276

  1. 配置源码管理:

image-20211129174037670

  1. 构建触发器配置:

image-20211129175320749

  1. gitee配置webhook:

image-20211129180115714

  • URL为:http://服务器公网IP:8080/generic-webhook-trigger/invoke?token=你的token
  • 选择push触发构建任务
  • 这里选择了gitee,毕竟国内速度快一些,GitHub的配置也是一样的,源码在GitHub的同学可以自己研究一下
  1. 构建环境选择node:

image-20211129180526312

  1. 构建:

image-20211129180951119

  • 增加构建步骤选择执行shell
  • 编写shell脚本
node -v  #查看node,npm 版本
npm -v 
npm i  #npm安装项目所需依赖
npm install hexo-cli -g  #npm安装hexo
hexo clean  #hexo清除缓存文件和静态文件
hexo g  #hexo生成静态文件
tar -zcvf public.tar ./public  #压缩生成的静态文件目录
  • 以上shell脚本就是关联的git仓库有了推送事件之后触发的构建脚本,也是我的hexo博客项目所需的构建过程,同学们可以根据需要,编写自己项目的构建脚本
  1. 构建后操作:

image-20211129184358281

  • 构建后操作选择send build artifacts over SSH
  • 填写要上传到服务器的文件名称(在构建脚本最后一句:tar -zcvf public.tar ./public)
  • 填写上传到服务器的路径(这里的路径是以Jenkins配置 Publish Over SSH 插件时的那个路径为根目录的,最终的路径为docker-compose.yml中配置的Nginx下root目录,比如这里我写的是/yarbei/apps,上传文件的实际的实际路径为/root/yarbei/apps/public.tar,root目录为/root/yarbei/apps/yarbeiweb,之后public.tar解压替换yarbeiweb)
  • 编写文件上传后的脚本
cd /root/yarbei/apps  #进入文件所在目录
mv yarbeiweb yarbeiweb-$(date +%Y%m%d-%H%M) #将旧的文件夹更名备份
tar zxvf public.tar  #解压public.tar
mv public yarbeiweb  #将解压后的文件夹改名
rm -rf public.tar  #删除压缩包

至此,基于docker+Jenkins+Nginx实现的前端自动部署功能就实现了

image-20211129191157217

小结

其实这次的折腾是属于意料之外的,源于双十一的一次冲动消费,不过经过一番折腾也算有了一些收获,作为一个前端工程师,我对服务器、运维方面的知识储备是比较少的,期间走了不少弯路,比如路径问题,docker-compose的配置问题,在文中都有体现。至于为什么是docker,可能也是对Linux命令行的操作方式了解较少,不想因为自己操作失误最终让整个环境乱遭糟,到最终不可控。使用docker不仅能快速实施,而且能隔离环境,避免环境依赖。接下来就可以通过我自己的服务器访问博客了,域名正在备案中

本次部署大概步骤如下:

  1. 准备环境
  2. 安装docker
  3. 安装docker-compose
  4. 安装Jenkins和Nginx
  5. 编写配置文件
  6. 配置Jenkins
  7. 配置Jenkins构建任务

参考资料

  • juejin.cn)(https://juejin.cn/post/6844904111826010125#heading-7
  • https://www.jianshu.com/p/ca07a19d036a
  • https://blog.csdn.net/fan_haha/article/details/110224311

原文地址:https://mp.weixin.qq.com/s?__biz=MzkwODIwMDY2OQ==&mid=2247492360&idx=1&sn=d62e6c777bfbe698bd95c618a5cc9ca0

如果觉得本文对你有帮助麻烦转发关注支持一下

相关推荐

3分钟让你的项目支持AI问答模块,完全开源!

hello,大家好,我是徐小夕。之前和大家分享了很多可视化,零代码和前端工程化的最佳实践,今天继续分享一下最近开源的Next-Admin的最新更新。最近对这个项目做了一些优化,并集成了大家比较关注...

干货|程序员的副业挂,12个平台分享

1、D2adminD2Admin是一个完全开源免费的企业中后台产品前端集成方案,使用最新的前端技术栈,小于60kb的本地首屏js加载,已经做好大部分项目前期准备工作,并且带有大量示例代码,助...

Github标星超200K,这10个可视化面板你知道几个

在Github上有很多开源免费的后台控制面板可以选择,但是哪些才是最好、最受欢迎的可视化控制面板呢?今天就和大家推荐Github上10个好看又流行的可视化面板:1.AdminLTEAdminLTE是...

开箱即用的炫酷中后台前端开源框架第二篇

#头条创作挑战赛#1、SoybeanAdmin(1)介绍:SoybeanAdmin是一个基于Vue3、Vite3、TypeScript、NaiveUI、Pinia和UnoCSS的清新优...

搭建React+AntDeign的开发环境和框架

搭建React+AntDeign的开发环境和框架随着前端技术的不断发展,React和AntDesign已经成为越来越多Web应用程序的首选开发框架。React是一个用于构建用户界面的JavaScrip...

基于.NET 5实现的开源通用权限管理平台

??大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标!??今天小编推荐一款基于.NE...

StreamPark - 大数据流计算引擎

使用Docker完成StreamPark的部署??1.基于h2和docker-compose进行StreamPark部署wgethttps://raw.githubusercontent.com/a...

教你使用UmiJS框架开发React

1、什么是Umi.js?umi,中文可发音为乌米,是一个可插拔的企业级react应用框架。你可以将它简单地理解为一个专注性能的类next.js前端框架,并通过约定、自动生成和解析代码等方式来辅助...

简单在线流程图工具在用例设计中的运用

敏捷模式下,测试团队的用例逐渐简化以适应快速的发版节奏,大家很早就开始运用思维导图工具比如xmind来编写测试方法、测试点。如今不少已经不少利用开源的思维导图组件(如百度脑图...)来构建测试测试...

【开源分享】神奇的大数据实时平台框架,让Flink&Spark开发更简单

这是一个神奇的框架,让Flink|Spark开发更简单,一站式大数据实时平台!他就是StreamX!什么是StreamX大数据技术如今发展的如火如荼,已经呈现百花齐放欣欣向荣的景象,实时处理流域...

聊聊规则引擎的调研及实现全过程

摘要本期主要以规则引擎业务实现为例,陈述在陌生业务前如何进行业务深入、调研、技术选型、设计及实现全过程分析,如果你对规则引擎不感冒、也可以从中了解一些抽象实现过程。诉求从硬件采集到的数据提供的形式多种...

【开源推荐】Diboot 2.0.5 发布,自动化开发助理

一、前言Diboot2.0.5版本已于近日发布,在此次发布中,我们新增了file-starter组件,完善了iam-starter组件,对core核心进行了相关优化,让devtools也支持对IAM...

微软推出Copilot Actions,使用人工智能自动执行重复性任务

IT之家11月19日消息,微软在今天举办的Ignite大会上宣布了一系列新功能,旨在进一步提升Microsoft365Copilot的智能化水平。其中最引人注目的是Copilot...

Electron 使用Selenium和WebDriver

本节我们来学习如何在Electron下使用Selenium和WebDriver。SeleniumSelenium是ThoughtWorks提供的一个强大的基于浏览器的开源自动化测试工具...

Quick 'n Easy Web Builder 11.1.0设计和构建功能齐全的网页的工具

一个实用而有效的应用程序,能够让您轻松构建、创建和设计个人的HTML网站。Quick'nEasyWebBuilder是一款全面且轻巧的软件,为用户提供了一种简单的方式来创建、编辑...