前端工程化:保姆级教学 Jenkins 部署前端项目

2022-10-27 16:16:41 浏览数 (1)

DevOps

提到 Jenkins,想到的第一个概念就是 CI/CD 在这之前应该再了解一个概念。

DevOps DevelopmentOperations 的组合,是一种方法论,并不特指某种技术或者工具。DevOps 是一种重视 Dev 开发人员和 Ops 运维人员之间沟通、协作的流程。通过自动化的软件交付,使软件的构建,测试,发布更加的快捷、稳定、可靠。

CI

CI 的英文名称是Continuous Integration,中文翻译为:持续集成。

试想软件在开发过程中,需要不断的提交,合并进行单元测试和发布测试版本等等,这一过程是痛苦的。持续集成CI是在源代码变更后自动检测、拉取、构建的过程。

ci.png

CD

CD 对应两个概念 持续交付Continuous Delivery 持续部署Continuous Deployment

持续交付

提交交付顾名思义是要拿出点东西的。在 CI 的自动化流程阶段后,运维团队可以快速、轻松地将应用部署到生产环境中或发布给最终使用的用户。

从前端的角度考虑,在某些情况下肯定是不能直接通过自动化的方式将最终的 build 结果直接扔到生产机的。持续交互就是可持续性交付供生产使用的的最终 build。最后通过运维或者后端小伙伴进行部署。

cd1.png

持续部署

作为持续交付的延伸,持续部署可以自动将应用发布到生产环境。

cd2.png

Jenkins 安装

示例服务器为 阿里云 CentOS 服务器。安全组中增加 8080 端口 Jenkins 默认占用

Jenkins 安装大体分两种方式,一种使用 Docker 另一种则是直接安装,示例选择后者。不管使用哪种方式安装,最终使用层面都是一样的。 Linux 安装[1]Docker 安装[2]

点击查看Linux安装过程

代码语言:javascript复制
# 下载 Jenkins 资源
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
# 获取并导入信任 的包制作者的秘钥
sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
# 升级 yum 源中的所有包
sudo yum upgrade
# Jenkins 依赖于 java 所以需要安装 JDK
sudo yum install java-11-openjdk
# 安装 Jenkins
sudo yum install jenkins
复制代码

如果最终 Jenkins 没有找到包而导致没有安装成功,检查第一步和第二部执行结果并重新执行。

可以使用 systemctl 命令管理 Jenkins 服务 systemctl[3]

代码语言:javascript复制
# 启动 Jenkins 服务
systemctl start jenkins
# 重启 Jenkins 服务
systemctl restart jenkins
# 停止 Jenkins 服务
systemctl stop jenkins
# 查看 Jenkins 服务状态
systemctl status jenkins
复制代码

启动服务后访问服务器地址 8080 端口,Jenkins 默认为 8080 端口。

Jenkins 使用及 Freestyle 任务构建

jenkins1.jpg

首次进入使用 cat /var/lib/jenkins/secrets/initialAdminPassword 查看密码。

随后进入插件安装页面,暂时安装系统推荐插件即可。

然后创建用户

jenkins2.jpg

构建目标:拉取 github 代码

点击 新建 Item 创建一个 Freestyle Project

jenkins3.jpg

源码管理 处选择 git ,输入仓库地址,点击添加。

jenkins4.jpg

输入 github 账号和密码,这里的密码有时候可能会出现问题,可以使用 token github 如何生成 token ?[4]

配置只是一方面,同时服务器也要具备 git 环境。 yum install git

jenkins5.jpg

构建目标:部署到本机

部署前端项目肯定是离不开 nginx 的。 yum install nginx

安装完成后同样可以使用 systemctl 命令管理 nginx 服务。

nginx 具体配置这里就不说了。本示例项目中,静态文件托管目录为 /usr/share/nginx/html/dist

接着来到 Jenkins 这里。想要部署前端项目还需要依赖一个 Node 环境,需要在 Manage Jenkins -> Manage Plugins 在可选插件中搜索 nodejs 选择对应插件进行安装,安装完成后需要重启才会生效。

jenkins6.jpg

然后到 系统管理 -> 全局工具配置 中配置 Node (吐槽:没有安装任何插件时系统管理以及其子页面全是英文,安装完插件后又变成了中文。这国际化不知道是系统原因还是它的原因

0 人点赞