前端运维部署那些事-阿里云开发者社区

前端运维部署那些事

2022-05-11 523

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 聊到运维，很长一段时间我觉得跟前端就是毫无关联的玩意，应该说半毛钱关系都木。但随着前端工程化的发展，前端基本运维部署相关知识甚至也逐步被重视，如果你公司的运维部门很强大，那么你也可以完全忽略运维相关的。只是树酱觉得，如果你想更多了解前端架构，还是需要具备一定的运维相关知识储备。当然，现在云厂商都想应推出自己的Serverless服务(下一篇会讲～)，号称让前端更专注业务的开发，而不用担心底层应用的部署和维护，对开发者而言可以更多聚焦到业务领域的开发，有兴趣的童鞋可以去玩玩

微信截图_20220511174621.png

❝
聊到运维，很长一段时间我觉得跟前端就是毫无关联的玩意，应该说半毛钱关系都木。但随着前端工程化的发展，前端基本运维部署相关知识甚至也逐步被重视，如果你公司的运维部门很强大，那么你也可以完全忽略运维相关的。只是树酱觉得，如果你想更多了解前端架构，还是需要具备一定的运维相关知识储备。当然，现在云厂商都想应推出自己的Serverless服务(下一篇会讲～)，号称让前端更专注业务的开发，而不用担心底层应用的部署和维护，对开发者而言可以更多聚焦到业务领域的开发，有兴趣的童鞋可以去玩玩
❞

微信截图_20220511174652.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流水线配置的使用，流水线的代码定义了整个的构建过程, 他通常包括构建, 测试和交付应用程序的阶段，下面是路径和仓库的配置
❞

微信截图_20220511174707.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) {
    }
}

完成后，即可构建项目，分阶段完成，首先是下拉源码、代码构建编译、代码扫描等等，所有环节成功才算自动化部署成功，如下所示

微信截图_20220511174727.png

3.Docker

❝
Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用
❞

3.1 如何使用

❝
通过将部署的操作集中成一个部署脚本完成传统的部署流程，通过在服务器上运行docker容器来运行前端应用
❞

如何安装

yum install docker-ce

项目目录，部署项目需要准备Dockerfile和nginx.conf(如果nginx不作定制化，可以直接用官方镜像)

微信截图_20220511174739.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 的绝对路径

微信截图_20220511174756.png

微信截图_20220511174809.png

镜像成功生成

3.4 查看镜像

docker image ls | grep frontend

微信截图_20220511174820.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

启动后如下所示

微信截图_20220511174832.png

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那些事

微信截图_20220511174842.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.npm

1.1 nrm

1.2 发布npm包

2. jenkins

2.1 如何安装

2.2 配合前端项目自动化部署

3.Docker

3.1 如何使用

3.2 Dockerfile 配置

3.3 如何创建镜像

3.4 查看镜像

4.5 如何启动

4.PM2

4.1 常见的应用场景

4.2 如何使用

4.3 高阶应用

5.Nginx

5.1 前端Nginx那些事

5.2 补充

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端运维部署那些事

1.npm

1.1 nrm

1.2 发布npm包

2. jenkins

2.1 如何安装

2.2 配合前端项目自动化部署

3.Docker

3.1 如何使用

3.2 Dockerfile 配置

3.3 如何创建镜像

3.4 查看镜像

4.5 如何启动

4.PM2

4.1 常见的应用场景

4.2 如何使用

4.3 高阶应用

5.Nginx

5.1 前端Nginx那些事

5.2 补充

热门文章

最新文章

相关课程

相关电子书

相关实验场景