前端自动部署CI/CD

peyton鹏
255 阅读5分钟

我正在参与掘金创作者训练营第6期，点击了解活动详情

先上效果： peyton blog

blog首页.jpg

持续构建： image.png

项目部署

1.1. 传统的开发模式

传统开发模式这里就一句带过，按部就班、工作不协调、线上bug隐患等。开发、测试、运维人员，各个阶段会处于等待的状态，效率低下。

1.2. DevOps开发模式

DevOps是Development和Operations两个词的结合，将开发和运维结合起来的模式。可以实现软件开发团队和 IT 团队之间的流程自动化和集成。它强调团队赋能、跨团队沟通和协作以及技术自动化。
DevOps 团队使用工具实现流程自动化，并加速流程，这有助于提高可靠性。DevOps 工具链可帮助团队处理重要的 DevOps 基础事项，包括持续集成、持续交付、自动化和协作。

image.png

1.3. 持续集成和持续交付

伴随着DevOps一起出现的两个词就是持续集成和持续交付(部署)：

  • CI是Continuous Integration（持续集成）；
  • CD是两种翻译：Continuous Delivery（持续交付）或Continuous Deployment（持续部署）；

持续集成CI：

持续集成

持续交付和持续部署：

持续交付

持续部署

1.4. 自动化部署流程

自动部署流程.jpg

云服务器

2.1 注册平台账号

云服务器我们可以有很多的选择：阿里云、腾讯云、华为云。

  • 目前在公司当中用的比较多的是阿里云，或者腾讯云的。
  • 个人建站的话，我这里使用的是华为云。（ps:促销活动你懂得 华为云
  • 域名我是在腾讯云平台购买，（ps:域名解析迁移稍微有点麻烦，其他都大同小异。 腾讯云域名注册

一般情况主流平台控制面板的操作流程都差不多，由于本人经费有限。这次使用的云服务器是华为云，域名购买是在腾讯云。

2.2 购买云服务器

购买流程请直接“下一步”操作，这里罗列下主要是以下几点：

  1. 购买云服务器其实是购买一个实例。
  2. 创建实例，选择类型和配置
  3. 配置网络安全组
  4. 创建实例

我这次使用的是华为云优惠包，配置也是比较的固定的。但购买后任然需要配置安全组、操作系统等（ps:推荐使用默认的，centos 镜像的问题反而比较麻烦） image.png

搭建服务器环境

3.1连接服务器

方式一： 使用命令行

   ssh root@114.116.40.10 （这里为服务器ip地址）
   输入密码进入
   
   pwd查看当前文件夹 /root

image.png

方式二： vscode,使用社区插件Remote-SSH

image.png

安装完成后，添加远程服务ip，右击连接当前服务器输入密码

image.png

打开文件，方便浏览服务器中的文件夹

image.png

方式三： 平台自带的远程登录，操作方式基本类似。

image.png

3.2jenkins自动化部署

安装Java环境 Jenkins本身是依赖Java的，所以我们需要先安装Java环境：

  • 这里我安装了Java1.8的环境
dnf search java-11
dnf install java-11-openjdk.x86_64

  • 安装Jenkins

     # 下载 Jenkins 资源
 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo

 mv jenkins.repo /etc/yum.repos.d/ 
 
 cd /etc/yum.repos.d/
 # 导入GPG密钥以确保您的软件合法
 rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
 dnf install jenkins

启动Jenkins的服务：

systemctl start jenkins
systemctl status jenkins
systemctl enable jenkins

Jenkins默认使用8080端口提供服务，所以需要加入到安全组中：

image.png

3.3Jenkins用户

默认Jenkins使用的用户是 jenkins，可能会没有访问权限，所以我们需要修改一下它的用户： 权限问题 解决方案：修改 /lib/systemed/system/jenkins.service 文件。将 User=jenkins 修改为 User=root，表示给 Jenkins 赋权限。修改配置文件后记得重启服务。

之后需要重启一下Jenkins：

systemctl restart jenkins

3.4Jenkins 安装&登录

打开浏览器，输入： http://ip地址8080/

  • 注意：你输入自己的IP地址 获取输入管理员密码：

  • 在下面的地址中 cat /var/lib/jenkins/secrets/initialAdminPassword

可以安装推荐的插件：

安装推荐的插件

3.5. Jenkins任务

新建任务：

image.png

image-20201204185613061

配置项目和保留策略：

image.png 源码管理：

image.png

构建触发器：

这里的触发器规则是这样的：

  • 定时字符串从左往右分别是：分 时 日 月 周
#每半小时构建一次OR每半小时检查一次远程代码分支，有更新则构建
H/30 * * * *
​
#每两小时构建一次OR每两小时检查一次远程代码分支，有更新则构建
H H/2 * * *
​
#每天凌晨两点定时构建
H 2 * * *
​
#每月15号执行构建
H H 15 * *
​
#工作日，上午9点整执行
H 9 * * 1-5
​
#每周1,3,5，从8:30开始，截止19:30，每4小时30分构建一次
H/30 8-20/4 * * 1,3,5

触发器

构建环境：

注意：我们需要搭建Node的环境

  • 第一步：配置Node的环境；
  • 第二步：安装Node的插件；

image-20201204190055096

第一步：配置Node的环境

node环境

第二步：安装Node的插件

  • 这里因为我已经安装过了，所以没有搜索到；

image-20201204185949452

构建执行的任务：

  • 查看Node的版本等是否有问题；
  • 执行 npm install 安装项目的依赖；
  • 移除原来mall_cms文件的所有内容；
  • 将打包的dist文件夹内容移动到mall_cms文件夹；
pwd
node -v
npm -v
​
npm install 
npm run build
​
pwd
​
echo '构建成功'
​
ls
​
# 删除/root/mall_cms文件夹里所有的内容
rm -rf /root/peyton_blog/* 
​
cp -rf ./dist/* /root/peyton_blog/

3.6 Nginx安装和配置

安装nginx

先安装一下nginx：

dnf install nginx
启动nginx：
systemctl start nginx
systemctl status nginx
systemctl enable nginx
配置安全组 80

访问 公网ip：80

cd /root

mkdir Peyton_blog

Touch index.html 创建文件

配置nginx：/etc/nginx/nginx.conf
配置文件

将nginx 访问的路径改为 /root/peyton_blog/index.html

可以手动的方式 将项目dist文件 拖入到服务器中：www.filezilla.cn/download/cl…

avatar
文章
阅读
粉丝