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

2022-06-27 13:40:39 浏览数 (1)

◆ DevOps

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

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

◆ CI

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

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

◆ CD

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

  • 持续交付

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

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

  • 持续部署

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

◆ Jenkins 安装

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

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

◆ Jenkins 使用及 Freestyle 任务构建

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

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

然后创建用户

  • 构建目标:拉取 github 代码

点击 新建 Item 创建一个 Freestyle Project

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

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

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

  • 构建目标:部署到本机

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

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

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

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

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

0 人点赞