Web前端最全vue项目jenkins自动化部署(1),2024年最新最新大厂Web前端校招面试经验汇总

总结
  • 对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)

  • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

  • 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说,人嘛都会有苦恼的~

祝大家都有美好的未来,拿下满意的 offer。

好了,把环境安装完成了,我们要开始搞事了。

创建 jenkins 工程

点击 new 任务,即可开始创建任务:

填写自己的工程的名称,选择自己需要创建项目的类型,我们就选择自由风格即可。

这个时候就创建好任务了,我们需要对任务进行一定的配置。

配置 gitlab 的上传即构建功能

配置 jenkins 工程

从 jenkins 右侧找到自己的工程,进入工程后点击左侧的 configure。

配置 git 仓库地址

在 jenkins 的工程里,我们可以配置具体项目的 git 地址,后续提交项目之后,jenkins 工程就会从这个 git 目录去拉代码,记得填写一个有权限的账户哦。

添加触发器

配置完成 git 远程仓库地址之后,我们需要找到构建环境,勾选下图中红框选中的地方,这个是 webhook 在 jenkins 里边的配置。

记得保存红框中 URL 后边的地址,后续会填写到 gitlab 里边。

配置 git 仓库钩子

本篇主要以 gitlab 为例,在 gitlab 的对应项目中,找到 webhook 的配置(settings -> integrations)

URL:就是上一步在 jenkins 中勾选 gitlab 钩子时赋值的 URL,有时候可能会存在问题,比如你修改了 jenkins 的端口号,但是那个 URL 还是显示 8080,这个时候需要将端口号修改成你更改后的。

Token:jenkins 对应的工程中勾选 gitlab 钩子选项之后,会有一个高级设置,如下:

将生成的 token 粘贴放到 gitlab 对应的 Token 中。

**注意:**这个时候需要在高级设置中勾选另外一个选项,就是具体根据哪个分支提交代码后构建,如果不勾选这个会导致 gitlab 中测试 push events 的时候报 401 的错误,如果你在测试 webhook 时出现 401 的问题,可以回来修改一下这里:

填完 gitlab 的 URL 和 Token 之后点击创建:

Trigger 中我们勾选 push events 即可,如果有其他的需求可以自行勾选。

测试 gitlab 钩子

在上一步中,我们已经将 gitlab 钩子需要的 URL 和 Token 都填写完成,并且已经创建了 webhook,在上一个页面配置 webhook 下面可以看到你自己的配置成功的 webhook:

我们可以点击 test -> Push Events 进行 webhook 的测试,如果页面顶部提示以下弹窗,说明配置成功。

这个时候我们在看 jenkins 里面,会提示工程正在构建。

实现自动化构建及部署

目前公司业务场景是这样的:jenkins 是一台服务器,需要部署项目是一台服务器,并且需要部署项目的业务服务器有堡垒机进行保护,我无法使用 jenkins 的 ssh 功能对业务服务器进行直接登录。

所以我本篇主要讲如何使用 Fabric 进行远程部署,这里也就将自动化构建和自动化部署合并起来了,其实自动化构建是一块内容,自动化部署是一块内容。如果大家的业务场景和我一样,可以使用这种方法,多一门手艺多一条出路呗,多学点东西肯定有好处。

正常的自动化工作流是这样的:

  1. 在项目开发完成之后,使用 git push 将项目推送到远程仓库。

  2. 如果上一步配置 git 钩子功能没问题,那么 git 就会触发 jenkins,然后 jenkins 开始工作。

  3. 我们可以在 jenkins 上进行单元测试,安装升级依赖包,打包,上传业务服务器,无论你是执行 npm scripts,还是执行脚本,都能在 jenkins 上进行构建。

这一块内容主要讲如何写构建和部署的脚本,如果你时间不充裕,没时间学 Fabric,使用 npm scripts 进行构建,那你可以参考一下掘金网友写的实战笔记:Jenkins 打造强大的前端自动化工作流。

其实我还是觉得大家应该看一下 Fabric,点击名字了解一下吧,真的很强大,直接将构建部署合并。

要想使用 Fabric,需要在你的实际项目根目录下创建一个 fabfile.py 文件,存放脚本,后续在 jenkins 中可以直接执行这个文件。废话不说,我先给大家放一段我写的脚本。

import json

from fabric.api import *

定义一些变量

APP_NAME = ‘cartoon_cms_fe’

REMOTE_PATH = ‘/data/front/source’

业务服务器 ip,登录的用户名

env.hosts = [‘127.0.0.1’]

env.user = ‘root’

构建函数

@runs_once

def package():

执行安装依赖的过程

run(‘npm install’)

执行打包过程

run(‘npm run build:prod’)

将打包的dist文件夹进行压缩

local(‘tar zcf {0}.tgz dist --exclude=“.svn” --exclude=“.idea” --remove-files’.format(APP_NAME), capture=False)

部署

def deploy():

将压缩包上传到业务服务器

put(‘{0}.tgz’.format(APP_NAME), ‘{1}/{0}.tgz’.format(APP_NAME, REMOTE_PATH))

进入业务服务器存放压缩包的目录

with cd(REMOTE_PATH):

解压压缩包

run(‘tar zxf {0}.tgz’.format(APP_NAME))

删除也所报

run(‘rm -f {0}.tgz’.format(APP_NAME))

进入项目

with cd(APP_NAME):

利用http-server和pm2将静态项目跑起来

run(‘pm2 start http-server --name – {0} -p 8888 -d false’.format(APP_NAME))

复制代码

这个只是我们公司的业务,其实 Fabric 脚本就是帮助你将 shell 命令跑在服务器上,后续帮助你进行远程上传部署,看过 Fabric 教程的大兄弟们,你们应该知道使用 local 命令会在当前服务器执行命令,使用 run 命令会在远程服务器执行命令。

这个时候脚本就写好了,我们打开 jenkins 找到对应项目,进入项目的 Configure,找到 build,然后配置一个 shell,让其执行。

可以参考下面的配置:

保存一下,然后自己测试一下吧。

在 jenkins 上执行构建,我们可以点击这个构建的图标查看构建过程有没有问题。

当出现以下内容时,就代表构建成功了。

可以使用你业务服务器的 ip 加项目端口号查看跑起来的项目。

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。

  • 26
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值