网站建设包含的内容,佛山公司网站推广外包服务,任县网站建设设计,网站域名如何起目录 前言一、前期准备工作1、示例环境2、安装docker3、安装Docker Compose4、安装Git5、安装Nginx和Jenkinsnginx.confdocker-compose.yml 6、启动环境7、验证Nginx8、验证Jenkins 二、Jenkins 自动化部署配置1、设置中文2、安装Publish Over SSH、NodeJS#xff08;1#x… 目录 前言一、前期准备工作1、示例环境2、安装docker3、安装Docker Compose4、安装Git5、安装Nginx和Jenkinsnginx.confdocker-compose.yml 6、启动环境7、验证Nginx8、验证Jenkins 二、Jenkins 自动化部署配置1、设置中文2、安装Publish Over SSH、NodeJS1Publish Over SSH配置远程服务器2NodeJS配置 3、添加凭据4、创建Job5、GitHub webHooks配置6、构建环境7、Build Steps8、shell 命令9、自动部署到对应环境项目目录 三、踩坑记录四、拓展查看安装软件版本 前言
文章有点长如果你是以学习的态度来看这篇文章建议收藏起来慢慢看。
前端自动化部署一直以来概念很清楚知道怎么回事但是其中怎么操作没怎么研究过虽然之前环境都搭起来了但是也只是Jenkins构建项目成功比如提交代码之后怎么触发自动构建打包后的文件如何迁移到指定服务器的文件目录下流水线如何搞等等这都是我之前想想头疼也只能头疼的问题。终于还是费了点心思搞了搞自动化部署又花了大量时间来记录这个过程。
本文主要实现的自动化部署的流程如下 【 git push提交代码 】——【触发Jenkins自动构建】——【拉取GitHub代码】——【build打包】——【生成dist文件】——【压缩dist文件】——【迁移到指定环境目录下】——【删除指定环境目录下的dist文件】——【解压迁移过来的dist.tar】——【删除dist.tar】——【Success】
从头到尾撸一波Lets go
一、前期准备工作
1、云服务器我的云服务器配置如下 CentOS CPU - 2核 内存 - 2GB 系统盘 - SSD云硬盘 40GB 2、安装Docker 3、安装Docker Compose 4、安装Git 5、安装Nginx 7、安装Jenkins 7、添加安全组。在云服务器平台配置端口比如Jenkins访问的端口Nginx访问的端口。
1、示例环境
Docker version24.0.7 Docker Compose version 1.24.0 GIt version1.8.3.1 Nginx version1.25.3 Jenkins version2.414.3
查看上面的版本信息的具体操作可参考拓展中的步骤
2、安装docker
具体安装可查看菜鸟教程安装完之后查看docker相关的rpm源文件是否存在
rpm -qa |grep docker启动docker
sudo systemctl start docker3、安装Docker Compose
Docker Compose 可以定义和运行多个 Docker 容器应用的工具。它允许你使用一个单独的文件通常称为 docker-compose.yml来配置应用程序的服务然后使用该文件快速启动整个应用的所有服务。
第一步下载安装
curl -L https://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目录之后设置
chmod 777 /docker/jenkins_home第四步将 /usr/local/bin/docker-compose 文件设置为可执行文件这样可以通过命令行直接执行 docker-compose 命令而不必指定脚本的路径。
sudo chmod x /usr/local/bin/docker-compose4、安装Git
查看可安装的git版本
yum list git --showduplicates | sort -r安装
yum install -y git-y 表示在安装过程中不询问用户是否确认安装而是自动回答 “yes”即自动确认安装。这样可以在命令执行时跳过确认步骤直接安装软件包适用于需要自动化安装且无需用户交互的情况。 查看是否安装成功
git --version卸载git当然这里不需要卸载只是做一下拓展
yum remove git配置密钥一直Enter最终会生成id_rsa(私钥)、id_rsa_pub(公钥)
ssh-keygen -t rsa -C root然后输入cd /root/.ssh
cd /root/.ssh将公钥添加到GitHub或其他代码库的SSH Keys 添加之后就是酱样子
如果设置么有问题那么服务器就可以拉取GitHub上的代码。 在root目录下新建一个home目录在home目录下拉取代码
git clone https://github.com/zbsguilai/WeChat-Reading.git5、安装Nginx和Jenkins
使用docker拉取nginx、jenkins镜像jenkins镜像不维护了改用jenkins/jenkins:lts
docker pull nginx
docker pull jenkins/jenkins:lts拉取完之后查看镜像
docker images创建docker的相关目录方便维护
mkdir /docker
mkdir /docker/compose
mkdir /docker/jenkins_home
mkdir /docker/nginx
mkdir /docker/nginx/conf
mkdir /docker/html
mkdir /docker/html/dev
mkdir /docker/html/release
mkdir /docker/html/pro创建docker-compose.yml、nginx.conf配置文件
cd /docker/compose
touch docker-compose.ymlcd /docker/nginx/conf
touch nginx.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_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;#tcp_nopush on;keepalive_timeout 65;gzip on;#dev环境server {#监听的端口listen 8001;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 {#监听的端口listen 8002;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:对应jenkins 8001:对应dev环境 8002:对应sit环境
docker-compose.yml
version: 3networks:frontend:external: trueservices: # 容器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-composedocker_nginx_dev: # nginx-dev环境restart: alwaysimage: nginxcontainer_name: nginx_devports:- 8001:8001volumes:- /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf- /docker/html:/usr/share/nginx/html- /docker/nginx/logs:/var/log/nginxdocker_nginx_sit: # nginx-sit环境restart: alwaysimage: nginxcontainer_name: nginx_sitports:- 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、启动环境
先启动docker
systemctl start docker然后启动Jenkins、Nginx
docker-compose up -d查看运行状态
docker-compose ps -a7、验证Nginx
在/docker/html/dev/dist 目录下新建index.html文件内容如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1welcome to Nginx/h1
/body
/html浏览器打开输入服务器地址:8001看到下面的页面说明nginx配置没问题同样的操作可测试下8002端口
8、验证Jenkins
浏览器输入服务器地址:8080/jenkins_home。为什么要加jenkins_home后缀思考一波 会提示要输入密码密码位于docker/jenkins_home/secrets/initialAdminPassword
cat /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/bash
node -v
npm -v
echo $PATH 之后去构建可以看到我们打印的版本信息都打印出了
接下来我们脚本中执行安装node_module以及打包命令。
#!/bin/bash
node -v
npm -v
npm install
# npm i esbuild-linux-640.13.4 -D
echo 依赖安装成功
npm run build
echo 打包成功
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/bash
node -v
npm -v
npm install
# npm i esbuild-linux-640.13.4 -D
echo 依赖安装成功
npm run build
echo 打包成功
rm -rf dist.tar # 每次构建删除已存在的dist压缩包
tar -zcvf dist.tar ./dist #将dist文件压缩成dist.tar
echo $PATH 然后点击增加构建步骤选择Send files or execute commands over SSHSend files or execute commands over SSH命令允许你在构建过程中通过SSH连接到远程服务器执行命令或发送文件。 然后填写源文件、目标路径、执行脚本
cd /docker/html/dev
rm -rf dist/
tar zxvf dist.tar
rm dist.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
三、踩坑记录
踩坑记录都在文中做了正确记录这里先不多介绍有问题的话可评论区留言
四、拓展
查看安装软件版本
Docker
docker -vNginx
进入nginx容器内查看版本信息 docker exec -it nginx_dev bin/bashnginx -vJenkins
进入nginx容器内查看版本信息 docker exec -it jenkins bin/bashjava -jar /usr/share/jenkins/jenkins.war --versionDocker Compose
docker-compose -vGit
git --version
