前言文章有点长如果你是以学习的态度来看这篇文章建议收藏起来慢慢看。前端自动化部署一直以来概念很清楚知道怎么回事但是其中怎么操作没怎么研究过虽然之前环境都搭起来了但是也只是Jenkins构建项目成功比如提交代码之后怎么触发自动构建打包后的文件如何迁移到指定服务器的文件目录下流水线如何搞等等这都是我之前想想头疼也只能头疼的问题。终于还是费了点心思搞了搞自动化部署又花了大量时间来记录这个过程。本文主要实现的自动化部署的流程如下【 git push提交代码 】——【触发Jenkins自动构建】——【拉取GitHub代码】——【build打包】——【生成dist文件】——【压缩dist文件】——【迁移到指定环境目录下】——【删除指定环境目录下的dist文件】——【解压迁移过来的dist.tar】——【删除dist.tar】——【Success】从头到尾撸一波Lets go一、前期准备工作1、云服务器我的云服务器配置如下★CentOSCPU - 2核 内存 - 2GB系统盘 - SSD云硬盘 40GB”2、安装Docker3、安装Docker Compose4、安装Git5、安装Nginx7、安装Jenkins7、添加安全组。在云服务器平台配置端口比如Jenkins访问的端口Nginx访问的端口。1、示例环境Docker version24.0.7Docker Compose version 1.24.0GIt version1.8.3.1Nginx version1.25.3Jenkins version2.414.3查看上面的版本信息的具体操作可参考拓展中的步骤2、安装docker具体安装可查看菜鸟教程安装完之后查看docker相关的rpm源文件是否存在rpm-qa|grepdocker启动dockersudosystemctl startdocker3、安装Docker ComposeDocker Compose 可以定义和运行多个 Docker 容器应用的工具。它允许你使用一个单独的文件通常称为 docker-compose.yml来配置应用程序的服务然后使用该文件快速启动整个应用的所有服务。第一步下载安装curl-Lhttps://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-uname-s-uname-m/usr/local/bin/docker-compose第二步查看是否安装成功docker-compose-v第三步给/docker/jenkins_home目录设置最高权限所有用户都具有读、写、执行这个目录的权限。等建了/docker/jenkins_home目录之后设置chmod777/docker/jenkins_home第四步将/usr/local/bin/docker-compose文件设置为可执行文件这样可以通过命令行直接执行docker-compose命令而不必指定脚本的路径。sudochmodx /usr/local/bin/docker-compose4、安装Git查看可安装的git版本yum listgit--showduplicates|sort-r安装yuminstall-ygit-y表示在安装过程中不询问用户是否确认安装而是自动回答 “yes”即自动确认安装。这样可以在命令执行时跳过确认步骤直接安装软件包适用于需要自动化安装且无需用户交互的情况。查看是否安装成功git--version卸载git当然这里不需要卸载只是做一下拓展yum removegit配置密钥一直Enter最终会生成id_rsa(私钥)、id_rsa_pub(公钥)ssh-keygen-trsa -Croot然后输入cd /root/.sshcd/root/.ssh将公钥添加到GitHub或其他代码库的SSH Keys添加之后就是酱样子如果设置么有问题那么服务器就可以拉取GitHub上的代码。在root目录下新建一个home目录在home目录下拉取代码gitclone https://github.com/zbsguilai/WeChat-Reading.git5、安装Nginx和Jenkins使用docker拉取nginx、jenkins镜像jenkins镜像不维护了改用jenkins/jenkins:ltsdockerpull nginxdockerpull jenkins/jenkins:lts拉取完之后查看镜像dockerimages创建docker的相关目录方便维护mkdir/dockermkdir/docker/composemkdir/docker/jenkins_homemkdir/docker/nginxmkdir/docker/nginx/confmkdir/docker/htmlmkdir/docker/html/devmkdir/docker/html/releasemkdir/docker/html/pro创建docker-compose.yml、nginx.conf配置文件cd/docker/composetouchdocker-compose.ymlcd/docker/nginx/conftouchnginx.conf最终目录结构如下docker compose - docker-compose.yml //docker-compose配置 html //各环境代码目录(实际项目可能不在同一目录) dev //dev环境代码目录 release //release环境代码目录 pro //pro环境代码目录 jenkins_home //Jenkins工程目录 nginx //nginx工程目录 conf - nginx.conf //nginx配置nginx.conf# nginx.conf 例user nginx;worker_processes1;error_log /var/log/nginx/error.log warn;pid /var/run/nginx.pid;events{worker_connections1024;}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;#tcp_nopush on;keepalive_timeout65;gzipon;#dev环境server{#监听的端口listen8001;server_name localhost;#设置日志# access_log logs/dev.access.log main;#定位到index.htmllocation /{#linux下HTML文件夹,就是你的前端项目文件夹root /usr/share/nginx/html/dev/dist;# root /home/html/dev/dist;#输入网址server_nameport后默认的访问页面index index.html;try_files$uri$uri//index.html;}}#sit环境server{#监听的端口listen8002;server_name localhost;#设置日志# access_log logs/sit.access.log main;#定位到index.htmllocation /{#linux下HTML文件夹,就是你的前端项目文件夹root /usr/share/nginx/html/sit/dist;# root /home/html/dev/dist;#输入网址server_nameport后默认的访问页面index index.html;try_files$uri$uri//index.html;}}# include /etc/nginx/conf.d/*.conf;}重点进入服务器控制台安全组配置添加三个都端口。8080:对应jenkins8001:对应dev环境8002:对应sit环境docker-compose.ymlversion:3networks: frontend: external:true services:# 容器docker_jenkins: user: root# root权限restart: always# 重启方式image: jenkins/jenkins:lts# 使用的镜像container_name: jenkins# 容器名称environment:-TZAsia/Shanghai -JENKINS_OPTS--prefix/jenkins_home## 自定义 jenkins 访问前缀上下文contextports:# 对外暴露的端口定义-8080:8080-50000:50000volumes:# 卷挂载路径-/docker/jenkins_home/:/var/jenkins_home# 挂载到容器内的jenkins_home目录-/usr/local/bin/docker-compose:/usr/local/bin/docker-compose docker_nginx_dev:# nginx-dev环境restart: always image: nginx container_name: nginx_dev ports:-8001:8001volumes: -/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -/docker/html:/usr/share/nginx/html -/docker/nginx/logs:/var/log/nginx docker_nginx_sit:# nginx-sit环境restart: always image: nginx container_name: nginx_sit ports:-8002:8002volumes: -/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -/docker/html:/usr/share/nginx/html -/docker/nginx/logs:/var/log/nginx配置说明docker_jenkins是一个定义的服务名称。user: root指定了 Jenkins 容器使用 root 权限。restart: always表示容器总是在退出时重启。image: jenkins/jenkins:lts指定了 Jenkins 镜像及其版本。container_name: jenkins是容器的名称。ports定义了容器内外端口的映射。volumes定义了主机文件系统路径与容器内路径的挂载关系。image: nginx指定了 Nginx 镜像。container_name: nginx_dev是容器的名称。6、启动环境先启动dockersystemctl startdocker然后启动Jenkins、Nginxdocker-composeup-d查看运行状态docker-composeps-a7、验证Nginx在/docker/html/dev/dist目录下新建index.html文件内容如下!DOCTYPE htmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyh1welcome to Nginx/h1/body/html浏览器打开输入服务器地址:8001看到下面的页面说明nginx配置没问题同样的操作可测试下8002端口8、验证Jenkins浏览器输入服务器地址:8080/jenkins_home。为什么要加jenkins_home后缀思考一波会提示要输入密码密码位于docker/jenkins_home/secrets/initialAdminPasswordcat/docker/jenkins_home/secrets/initialAdminPassword登录后选择安装推荐的插件然后就可以了到达Jenkins主页面。我的已经使用过了所有会有记录二、Jenkins 自动化部署配置1、设置中文【Dashboard】——【Manage Jenkins】——【Plugins】——【Available plugins】搜索local选择localization Chiness点击install进行安装安装完成后重启Jenkins或者在浏览器输入服务器地址:8080/jenkins_home/restart。此时页面变成酱样子2、安装Publish Over SSH、NodeJS同样的方式这里不再具体操作【Dashboard】——【Manage Jenkins】——【Plugins】——【Available plugins】搜索Publish Over SSH、NodeJS安装后重启。1Publish Over SSH配置远程服务器Publish Over SSH用来连接远程服务器接下来去设置连接远程服务器验证方式本案例采用密码验证。找到Publish Over SSH点击新增在新增后出来的面板中输入信息之后点击高级输入密码、服务器端口并点击Test Configuration Success进行测试显示successs则成功之后先点击应用再保存2NodeJS配置话不多说Lets go【Dashboard】——【系统管理】——【全局工具配置】——【NodeJS 安装】点击新增NodeJS配置安装NodeJS的基本信息自定义别名、选择安装版本最后先点击应用再保存。3、添加凭据添加凭据也就是GitHub或者其他远程仓库的账号密码方便之后使用。话不多说Lets go【系统管理】——【凭证管理】点击添加凭证填写用户名、密码、描述4、创建Job第一次部署的Jenkins没用Job创建一个首页右边视图中点击Create a job。输入项目名称测试项目选择构建一个自由风格的软件项目点击确定接下来需要配置项目的一些信息配置完成后先应用后保存然后返回首页打开项目点击立即构建查看控制台输出可以看到构建过程中并没有出现error并最终显示success此时基础构建基本完成5、GitHub webHooks配置在git push代码之后可以自动触发Jenkins自动拉取GitHub上的代码进行构建。打开GitHub中的项目在Setting中选择Webhooks.payload URL为http://ip:8080/jenkins_home/github-webhook/之后点击Add webHook就可以了然后需要在Jenkins配置一个选项。构建触发器模块中的GitHub hook trigger for GITScm polling先应用后保存6、构建环境在 Jenkins 中将 Node.js 和 npm 的 bin 文件夹添加到 PATH 中否则可能就会报错。7、Build Steps因为提交服务器代码是没有node_moudle所以我们需要执行脚本去安装依赖Lets go源码管理可以看到Build Steps模块选择Execute NodeJS script选择node版本这个node版本是在上面我们已经配置过的如果需要其他版本可通过上面操作新增NodeJs即可配置完成之后建议立即构建项目8、shell 命令在上图中选择增加构建步骤在下拉框选中执行 shell然后输入下面的指令#!/bin/bashnode-vnpm-vecho$PATH之后去构建可以看到我们打印的版本信息都打印出了接下来我们脚本中执行安装node_module以及打包命令。#!/bin/bashnode-vnpm-vnpminstall# npm i esbuild-linux-640.13.4-Decho依赖安装成功npmrun buildecho打包成功echo$PATH然后先应用后保存去立即构建。如果构建出现这个错误就取消npm i esbuild-linux-640.13.4 -D注释然后再构建就可以了并且还可以再服务器中看到打包后的dist文件。接下来在本地修改一下代码提交到GitHub然后可以看到Jenkins会立即出发构建。9、自动部署到对应环境项目目录上面打包到了Jenkins中的workspace中但是我们设置的项目环境路径跟这个不同比如开发环境项目目录是/docker/html/dev/dist/所以需要打包后把dist文件内容推送到/docker/html/dev/dist/目录下。修改一下上面的脚本改为下面#!/bin/bashnode-vnpm-vnpminstall# npm i esbuild-linux-640.13.4-Decho依赖安装成功npmrun buildecho打包成功rm-rfdist.tar# 每次构建删除已存在的dist压缩包tar-zcvfdist.tar ./dist#将dist文件压缩成dist.tarecho$PATH然后点击增加构建步骤选择Send files or execute commands over SSHSend files or execute commands over SSH命令允许你在构建过程中通过SSH连接到远程服务器执行命令或发送文件。然后填写源文件、目标路径、执行脚本cd/docker/html/devrm-rfdist/tarzxvf dist.tarrmdist.tar打包流程是删除之前打包的tar压缩文件dist把本次打包的dist文件压缩然以压缩后的dist.tar为源文件连接到远程服务器放到/docker/html/dev目录下。然后删除dist目录解压刚刚远道而来的dist.tar文件之后删除压缩包。Source files准备发送的文件该文件是相对于这个项目的workspace目录。例如要发送/docker/jenkins_home/workspace/gitlab_web/dist.tar到目标目录则设置Source files为dist.tarRemove prefix目标文件前缀添加例如要操作src下面的某个文件就设置成src,本案例是跟目录无需设置Remote directory目标目录本案例要复制到dev环境下的dist文件/docker/html/devExec command最后执行的命令可在这里进行解压删除复制等操作最后再次执行立即构建。打开你的服务器地址:8001。可以看到刚刚部署的项目啦。over三、踩坑记录踩坑记录都在文中做了正确记录这里先不多介绍有问题的话可评论区留言四、拓展查看安装软件版本Dockerdocker-vNginx进入nginx容器内查看版本信息dockerexec-itnginx_dev bin/bashnginx-vJenkins进入nginx容器内查看版本信息dockerexec-itjenkins bin/bashjava-jar/usr/share/jenkins/jenkins.war--versionDocker Composedocker-compose-vGitgit--version