前端运维部署那些事
聊到运维，很长一段时间我以为跟前端就是毫无关联的玩意，应该说半毛钱关系都木。但随着前端工程化的发展，前端基本运维部署相关知识甚至也逐步被重视，若是你公司的运维部门很强大，那么你也能够彻底忽略运维相关的。只是树酱以为，若是你想更多了解前端架构，仍是须要具有必定的运维相关知识储备。固然，如今云厂商都想应推出本身的Serverless服务(下一篇会讲～)，号称让前端更专一业务的开发，而不用担忧底层应用的部署和维护，对开发者而言能够更多聚焦到业务领域的开发，有兴趣的童鞋能够去玩玩html
1.npm
npm 是 Node.js 官方提供的包管理工具，主要用来管理项目依赖，发布等等，下面介绍几个比较常见的部署应用场景，经常使用的npm命令这里不做介绍了前端
1.1 nrm
nrm(npm registry manager )是npm的镜像源管理工具，由于npm默认创建的连接访问的是国外的资源，访问速度较慢，使用这个就能够快速地在 npm 源间切java
- 如何安装
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，能够看这个具体的教程 点我👇node
1.2 发布npm包
当咱们想发布一个npm包，须要完成什么样的流程呢？webpack
- 先注册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或者同构项目nginx
- 添加单元测试
优质的开源包，都有单元测试模块，来保证包的稳定性和代码质量，常见会有build-passing的标记，有兴趣的童鞋能够阅读树酱以前写的前端单元测试那些事git
- 开发文档readme.me
readme方便开发者快速熟悉，包括具体的Api介绍、使用例子、项目介绍等等，还能够加入包括单元测试覆盖率、下载量、证书等等github
最后完成上面一系列操做以后，到了最终的发布环节web
npm login # 登陆你上面注册的npm帐号
npm publish # 登陆成功后，执行发布命令
+ kutil@1.0.0 # 发布成功显示npm报名及包的版本号
复制代码
2. jenkins
jenkins做为一个可扩展的自动化服务器，能够用做简单的 CI 服务器，具备自动化构建、测试和部署等功能，简而言之，jenkins能够方便咱们平常的前端项目版本更新迭代（开发、测试、生产环境等），也能够经过它自动化完成一系列的操做包括：编译打包元测试、代码扫描等，官方文档docker
2.1 如何安装
-
下载 Jenkins.
-
打开终端进入到下载目录.
-
运行命令
java -jar jenkins.war --httpPort=8080. -
打开浏览器进入连接 http://localhost:8080.
-
按照说明完成安装.
详细流程图可参考 Jenkins+github 前端自动化部署
2.2 配合前端项目自动化部署
这里主要介绍jenkins流水线配置的使用，流水线的代码定义了整个的构建过程, 他一般包括构建, 测试和交付应用程序的阶段，下面是路径和仓库的配置
图片相关配置以下：
- 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) {
}
}
复制代码
完成后，便可构建项目，分阶段完成，首先是下拉源码、代码构建编译、代码扫描等等，全部环节成功才算自动化部署成功，以下所示
3.Docker
Docker是一个虚拟环境容器,能够将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用
3.1 如何使用
经过将部署的操做集中成一个部署脚本完成传统的部署流程，经过在服务器上运行docker容器来运行前端应用
如何安装
yum install docker-ce
复制代码
项目目录，部署项目须要准备Dockerfile和nginx.conf(若是nginx不做定制化，能够直接用官方镜像)
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 的绝对路径
镜像成功生成
3.4 查看镜像
docker image ls | grep frontend
复制代码
出现结果则应用镜像 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那些事
详细信息请看以前梳理的前端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. 前端路由那些事
- 4. 前端缓存那些事
- 5. 前端规范那些事
- 6. 前端Nginx那些事
- 7. 前端String那些事儿
- 8. 前端安全那些事
- 9. 前端架构那些事
- 10. 前端那些事二（CSS）
- 更多相关文章...
- • Maven 自动化部署 - Maven教程
- • ionic 头部与底部 - ionic 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端那些事
- 2. 微前端那些事
- 3. 前端路由那些事
- 4. 前端缓存那些事
- 5. 前端规范那些事
- 6. 前端Nginx那些事
- 7. 前端String那些事儿
- 8. 前端安全那些事
- 9. 前端架构那些事
- 10. 前端那些事二（CSS）