❝聊到运维,很长一段时间我觉得跟前端就是毫无关联的玩意,应该说半毛钱关系都木。但随着前端工程化的发展,前端基本运维部署相关知识甚至也逐步被重视,如果你公司的运维部门很强大,那么你也可以完全忽略运维相关的。只是树酱觉得,如果你想更多了解前端架构,还是需要具备一定的运维相关知识储备。当然,现在云厂商都想应推出自己的Serverless服务(下一篇会讲~),号称让前端更专注业务的开发,而不用担心底层应用的部署和维护,对开发者而言可以更多聚焦到业务领域的开发,有兴趣的童鞋可以去玩玩
❞
![](https://i-blog.csdnimg.cn/blog_migrate/5e0d01d01ac192f5c12e308ea487f135.png)
1.npm
❝npm 是 Node.js 官方提供的包管理工具,主要用来管理项目依赖,发布等等,下面介绍几个比较常见的部署应用场景,常用的npm命令这里不作介绍了
❞
1.1 nrm
❝nrm(npm registry manager )是npm的镜像源管理工具,因为npm默认建立的链接访问的是国外的资源,访问速度较慢,使用这个就可以快速地在 npm 源间切
❞
如何安装
npm install -g nrm
查看可选的资源
nrm ls
*npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - http://registry.npm.taobao.org/
eu ----- http://registry.npmjs.eu/
...
添加私有仓库链接
nrm add name http://registry.npm.tree.com/ # 私有仓库链接
nrm use name # 使用本址的镜像地址
nrm 更多用于如果公司内网部署了私有仓库,也就是方便用nrm作来源切换,也有益于依赖的版本管理,如果你想搭建自己的私有仓库,可以使用verdaccio,可以看这个具体的教程 点我????
1.2 发布npm包
❝当我们想发布一个npm包,需要完成什么样的流程呢?
❞
先注册npm账号 ????
配置package.json
{
"name": "kutil",
"version": "1.0.0", #版本名称
"scripts":[], # 可执行的脚本命令
"repository": "https://github.com/xxx/xxx.git", #github仓库地址
"author": "tree <shuxin_liu@kingdee.com>", #作者
"description": "工具包“, #包的说明
"keywords": [
"utils",
]
}
配置打包机制
❝如果是工具类打包,推荐使用rollup,webpack比较适合打包一些应用,例如SPA或者同构项目
❞
添加单元测试
❝优质的开源包,都有单元测试模块,来保证包的稳定性和代码质量,常见会有build-passing的标记,有兴趣的童鞋可以阅读树酱之前写的前端单元测试那些事
❞
开发文档readme.me
❝readme方便开发者快速熟悉,包括具体的Api介绍、使用例子、项目介绍等等,还可以加入包括单元测试覆盖率、下载量、证书等等
❞
最后完成上面一系列操作之后,到了最终的发布环节
npm login # 登录你上面注册的npm账号
npm publish # 登录成功后,执行发布命令
+ kutil@1.0.0 # 发布成功显示npm报名及包的版本号
2. jenkins
❝jenkins作为一个可扩展的自动化服务器,可以用作简单的 CI 服务器,具有自动化构建、测试和部署等功能,简而言之,jenkins可以方便我们日常的前端项目版本更新迭代(开发、测试、生产环境等),也可以通过它自动化完成一系列的操作包括:编译打包元测试、代码扫描等,官方文档
❞
2.1 如何安装
下载 Jenkins.
打开终端进入到下载目录.
运行命令
java -jar jenkins.war --httpPort=8080.
打开浏览器进入链接 http://localhost:8080.
按照说明完成安装.
详细流程图可参考 Jenkins+github 前端自动化部署
2.2 配合前端项目自动化部署
❝这里主要介绍jenkins流水线配置的使用,流水线的代码定义了整个的构建过程, 他通常包括构建, 测试和交付应用程序的阶段,下面是路径和仓库的配置
❞
![](https://i-blog.csdnimg.cn/blog_migrate/b972da5d84b9c1d058e2fa4f72d85ceb.png)
图片相关配置如下:
SCM:选择git或者svn作为代码触发器
脚本路径:在项目根目录创建jenkinsfile来编写流水线
下面介绍一个简单版的jenkinsfile的流水线任务写法,完成整个前端工程化部署涉及的编译打包、静态扫描、单元测试等环节
def gitUrl = "http://gitlab.****.com/shc/****.git"//GIT入口(随不同工程改变)
def gitCred = "***-***-4f00-a926-1848b670d97b" //GIT 身份凭据
if ("DEV" == buildType) {
buildScript = "build_development"
try {
node('k8s') {
stage('下拉源码') {
checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: "${gitCred}", url: "${gitUrl}"]]])
#可由片段生成器生成,选择示例步骤 “checkout:Check out from version control”,生成流水线脚本获取
}
checkStatus('下拉源码')
stage('代码构建编译') {
sh "yarn run ${buildScript}"
}
checkStatus('代码构建编译')
stage('代码静态扫描') {
sh 'yarn run lint'
}
checkStatus('代码静态扫描')
stage('单元测试') {
sh 'yarn run unit'
}
checkStatus('单元测试')
}
} catch(Exception e) {
}
}
完成后,即可构建项目,分阶段完成,首先是下拉源码、代码构建编译、代码扫描等等,所有环节成功才算自动化部署成功,如下所示
![](https://i-blog.csdnimg.cn/blog_migrate/6dd6ad34d12402dbb5765f4686e7d4db.png)
3.Docker
❝Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用
❞
3.1 如何使用
❝通过将部署的操作集中成一个部署脚本完成传统的部署流程,通过在服务器上运行docker容器来运行前端应用
❞
如何安装
yum install docker-ce
项目目录,部署项目需要准备Dockerfile和nginx.conf(如果nginx不作定制化,可以直接用官方镜像)
![](https://i-blog.csdnimg.cn/blog_migrate/5fd87414ce0c03b5094acb387f616e5f.png)
3.2 Dockerfile 配置
❝dockerfile是一个配置文件,用来让docker build命令清楚运行那些操作,创建dockerfile并编写相关配置
❞
FROM node:latest as builder
WORKDIR /app
COPY package.json
RUN npm install
COPY . .
RUN npm run build
FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/dist /usr/share/nginx/html
//ps: 每一个指令的前缀都必须是大写的。
ADD和COPY: 将文件或目录复制到Dockerfile构建的镜像中
EXPOSE: 指定运行该镜像的容器使用的端口,可以是多个。
RUN :指令告诉docker 在镜像内执行命令
FROM :通过FROM指定的镜像名称,这个镜像称之为基础镜像,必须位于第一条非注释指令
WORKDIR: 在容器内部设置工作目录
Nginx.conf 配置如下
events {
worker_connections 1024;
}
http{
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
}
创建文件并编写后,用docker创建镜像
3.3 如何创建镜像
❝使用当前目录的 Dockerfile 创建镜像,标签为 frontend
❞
docker build -t frontend .
-t :指定要创建的目标镜像
. :Dockerfile 文件所在目录,可以指定Dockerfile 的绝对路径
![](https://i-blog.csdnimg.cn/blog_migrate/862f8ff658c01b8f279ac6006a60d2c9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4fa845da8f8a641034fbcee1c5367286.png)
镜像成功生成
3.4 查看镜像
docker image ls | grep frontend
![](https://i-blog.csdnimg.cn/blog_migrate/e44bcd6bec6a8f3b5772419b5a18f388.png)
出现结果则应用镜像 frontend 成功创建,然后我们基于该镜像启动一个Docker容器
4.5 如何启动
❝使用docker镜像frontend:latest以指定80端口映射模式启动容器,并将容器命名为frontend
❞
docker run --name frontend -p 80:80 frontend:latest
-p: 指定端口映射,格式为:主机(宿主)端口:容器端口 将宿主的80端口映射到容器的80端口
-name: 为容器指定一个名称;
完成 docker 部署
docker也可以集成到上一节讲的jenkins自动化部署流水线中去
stage('部署到开发联调环境') {
echo "auto deploy to test environment"
sh "docker build -t frontend ."
sh "docker run --name frontend -p 80:80 frontend:latest"
}
4.PM2
❝PM2是node进程管理工具,可以利用它来简化很多node应用管中繁琐任务,是Nodejs应用程序守护进程必不可少的选择,方便管理基于nodejs平台下能够有独立运行访问的web服务,如nextjs、express、koa等前端应用
❞
4.1 常见的应用场景
部署node koa2 或 express 项目应用
部署 前端SSR(后端渲染)应用,如nuxt.js(Vue)和 next.js(React)等构建服务端渲染应用框架
4.2 如何使用
安装 :
npm install -g pm2
启动node项目 :
pm2 start app.js 或者 pm2 start bin/www
停止pm2服务:
pm2 stop bin/www
停止所有pm2服务:
stop all
重启pm2服务:
pm2 restart bin/www
pm2所有进程信息:
pm2 list
启动后如下所示
4.3 高阶应用
❝在项目根目录中添加一个processes.json
❞
{
#apps是一个数组,每一个数组成员就是对应一个pm2中运行的应用
"apps": [{
"name": "app", #名称
"script": "./", #程序入口
"cwd": "./", #应用程序所在的目录
"error_file": "./logs/err.log",#错误输出日志
"log_date_format": "YYYY-MM-DD HH:mm Z" #日期格式
}]
}
结合packjson脚本命令,可以用processes来管理多应用
"script":{
"pm2":"pm2 start processes.json"
}
更多命令和配置信息查看 pm2文档
5.Nginx
❝Nginx它既可以作为 Web 服务器,也可以作为负载均衡服务器,具备高性能、高并发连接等
❞
5.1 前端Nginx那些事
![](https://i-blog.csdnimg.cn/blog_migrate/af2ac4385094626f51a117307dea2581.png)
详细信息请看之前梳理的前端Nginx那些事
5.2 补充
灰度发布
❝灰度发布即是让一部分人继续用旧版本的产品A,然后一部分用户开始用新版本特征的产品B,如果用户对B没有什么问题反馈,则逐步扩大范围。一方面可以保证整体系统的稳定,而且在初始灰度的时候就可以发现、调整问题,以保证其影响度
❞
传统的灰度是通过Nginx分发流量到服务器,这里介绍一下简单的灰度规则配置,通过在nginx里面配置路由规则就好,如果是规则复杂的话,可以结合nginx+lua 做一些些灰度的业务逻辑
1.根据Cookie实现灰度发布
❝通过获取cookie设置的版本号来区分
❞
upstream test1 {
server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}
upstream default {
server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}
server {
listen 80;
server_name www.****.com;
set $group "default";
if ($http_cookie ~* "version=V1"){
set $group test1;
}
location / {
proxy_pass http://$group;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
index index.html index.htm;
}
}
根据IP实现灰度发布
❝通过内外网IP来区分
❞
upstream test1 {
server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}
upstream default {
server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}
server {
listen 80;
server_name www.xxx.com;
set $group default;
if ($remote_addr ~ "10.0.0.110") {
set $group test1;
}
location / {
proxy_pass http://$group;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
index index.html index.htm;
}
}
请你喝杯???? 记得三连哦~
1.阅读完记得给???? 酱点个赞哦,有???? 有动力
2.关注公众号前端那些趣事,陪你聊聊前端的趣事
3.文章收录在Github frontendThings 感谢Star✨