乐趣区

关于javascript:大厂是如何自动化部署Web应用的

DevUI 是一支兼具设计视角和工程视角的团队,服务于华为云 DevCloud 平台和华为外部数个中后盾零碎,服务于设计师和前端工程师。

官方网站:devui.design

Ng 组件库:ng-devui(欢送 Star)

官网交换:增加 DevUI 小助手(devui-official)

DevUIHelper 插件:DevUIHelper-LSP(欢送 Star)

前言

本文以 DevUI 组件库网站为例,介绍如何自动化部署一个前端利用。

本文能够认为是《手把手教你搭建本人的 Angular 组件库》的续集。

1 搭建服务器环境

本机开发完代码,并 push 到近程代码仓库,还须要部署到服务器上,用户能力拜访到。

因而为了部署你的利用,第一步你须要购买一台服务器,为了节省成本,个别都会购买按需应用的云服务器,如何申请云服务器就不介绍了,上面介绍如何在 Linux 服务器搭建 Nginx 服务。

1.1 装置 Nginx

Web 利用通常都会应用 Nginx 作为反向代理。

为了让用户能够拜访咱们的利用,须要在服务器装置 Nginx 利用。

咱们应用源码编译形式装置最新版本的 Nginx,次要分成以下步骤:

  • 下载
  • 解压
  • 配置
  • 编译
  • 装置

1.1.1 下载 Nginx 源码

先在 Nginx 官网下载页找到 Linux 版本的 Nginx 源码包地址,而后应用 wget 命令下载 Nginx 源码安装包。

wget http://nginx.org/download/nginx-1.18.0.tar.gz

1.1.2 解压

应用 tar 命令进行解压。

tar -zxvf nginx-1.18.0.tar.gz

1.1.3 配置

先进入 nginx 源码的根目录,而后执行 configure 配置脚本,这里只配置了 nginx 的装置目录。

cd nginx-1.18.0
./configure --prefix=/usr/local/nginx

执行完发现报错了,原来是短少依赖库。

[root@ecs-kagol nginx-1.18.0]# ./configure --prefix=/usr/local/nginx
checking for OS
 + Linux 3.10.0-862.14.1.5.h428.eulerosv2r7.x86_64 x86_64
checking for C compiler ... found
 + using GNU C compiler
 + gcc version: 4.8.5 20150623 (EulerOS 4.8.5-28) (GCC)
checking for gcc -pipe switch ... found
...
checking for PCRE library in /usr/local/ ... not found
checking for PCRE library in /usr/include/pcre/ ... not found
checking for PCRE library in /usr/pkg/ ... not found
checking for PCRE library in /opt/local/ ... not found

./configure: error: the HTTP rewrite module requires the PCRE library.
You can either disable the module by using --without-http_rewrite_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre=<path> option.

次要须要装置 pcre/zlib/openssl 三个依赖库,咱们应用 yum 包管理工具(相似 Node 的 npm 包管理工具)来装置。

yum -y install pcre-devel zlib-devel openssl-devel

装置完依赖库之后再次执行 configure 脚本,Nginx 配置胜利,配置后果如下:

...
checking for getaddrinfo() ... found
checking for PCRE library ... found
checking for PCRE JIT support ... found
checking for zlib library ... found
creating objs/Makefile

Configuration summary
  + using system PCRE library
  + OpenSSL library is not used
  + using system zlib library

  nginx path prefix: "/usr/local/nginx"
  nginx binary file: "/usr/local/nginx/sbin/nginx"
  nginx modules path: "/usr/local/nginx/modules"
  nginx configuration prefix: "/usr/local/nginx/conf"
  nginx configuration file: "/usr/local/nginx/conf/nginx.conf"
  nginx pid file: "/usr/local/nginx/logs/nginx.pid"
  nginx error log file: "/usr/local/nginx/logs/error.log"
  nginx http access log file: "/usr/local/nginx/logs/access.log"
  nginx http client request body temporary files: "client_body_temp"
  nginx http proxy temporary files: "proxy_temp"
  nginx http fastcgi temporary files: "fastcgi_temp"
  nginx http uwsgi temporary files: "uwsgi_temp"
  nginx http scgi temporary files: "scgi_temp"

咱们留神到执行完 configure 配置脚本之后,生成了一个 Makefile 文件,该文件就是用来编译 Nginx 源码的。

1.1.4 编译

相比配置,编译的步骤就简略多了,只须要执行 make 命令即可。

make

1.1.5 装置

编译完之后就是装置了,这一步才会真正在 /usr/local/nginx 目录下生成相应的文件。

make install

装置完之后,在 /usr/local/nginx 目录下曾经生成了运行 Nginx 利用须要的所有文件。

1.1.6 运行启动 Nginx

执行 nginx 目录下的 sbin/nginx 就能够间接启动 Nginx 啦。

/usr/local/nginx/sbin/nginx

1.1.7 验证是否启动胜利

在本机浏览器中输出服务器的公网 IP 地址,即可拜访 Nginx 利用。

这里显示了 Nginx 的欢送页面,等咱们部署好本人的 Web 利用之后,这个网页将显示咱们本人的网站首页。

2 手工部署流程

咱们在本机开发完 DevUI 网站的代码之后,执行 npn run build,这时将在 dist 目录失去 DevUI 网站的所有动态资源文件,能够先在本地用 anywhere 看下成果。

为了将其部署到服务器,并通过 Nginx 服务器拜访,咱们须要将这些文件上传到服务器的 nginx 目录,一个一个文件传必定不事实,须要将其压缩打包,而后上传到服务器,最初解压到 nginx 的 html 目录就算部署实现。

Step 1: 压缩打包 tar

Step 2: 解压部署 deploy

2.1 压缩打包

npm run build 构建进去的动态资源都寄存在 dist 目录下,只须要执行以下命令即可生成 tar 压缩包:

tar czvf devui.tar.gz ./dist

2.2 解压部署

登录服务器,应用 rz 命令将上一步生成的 tar 包上传到 Linux 服务器,而后应用 tar 命令解压到 nginx 的 html 目录即可实现部署。

tar zxvf devui.tar.gz

如果每次开发完都须要手动执行以上步骤,将会十分麻烦,并且很容易出错。

为什么不将其自动化呢?

3 应用 DevCloud 流水线实现主动部署

DevCloud 是集华为研发实际、前沿研发理念、先进研发工具为一体的软件开发平台,为了实现 Web 利用的自动化部署,咱们次要须要应用 DevCloud 的 流水线 / 编译构建 / 公布 / 部署 4 个服务。

次要分成以下 4 个步骤:

  1. 创立 DevCloud 我的项目
  2. 创立流水线
  3. 创立构建工作
  4. 创立部署工作

3.1 创立 DevCloud 我的项目

因为 DevCloud 所有服务都是通过我的项目承载的,因而须要先创立下我的项目,这里创立一个看板我的项目。

先进入 DevCloud 首页,按以下步骤即可创立一个看板我的项目:

  1. 点击右上角的创立我的项目
  2. 抉择看板我的项目
  3. 输出项目名称
  4. 确定

我的项目创立胜利之后间接进入该我的项目首页,点击头部菜单 构建 & 公布 下的 流水线 按钮即可进行流水线首页。

3.2 创立流水线

在流水线首页的右上角有一个创立流水线的按钮,点击即可进入流水线的创立流程。

创立一条流水线次要分成以下步骤:

  • 输出流水线名称
  • 抉择模板,这里咱们抉择空模板
  • 抉择代码源,间接只用 Github 代码仓库即可
  • 自定义工作流

抉择代码源

为了抉择 Github 代码仓库的源,咱们须要新增一个服务扩大点,取得 Github 的受权,这样 DevCloud 流水线这边才能够拉取 Github 的代码,进行构建、部署等步骤。

新增扩大点的步骤也很简略:

  • 输出扩大点名称
  • 进行 OAuth 受权

有了扩大点,就能够抉择你的 Github 仓库作为代码源啦。

选完代码源就能够创立你的流水线啦。

能够新创建的流水线蕴含 3 个阶段,第一个阶段关联了一个 Github 的代码仓,第二个阶段是一个空的构建阶段,外面什么工作也没有,第三个阶段是一个不可编辑的公布仓库阶段。

这个流水线目前什么都做不了,咱们须要往里面增加工作能力实现网站的自动化部署。

3.3 创立构建工作

回顾下之前的手工部署步骤:

  1. 构建源代码
  2. 压缩源代码
  3. 上传软件包到服务器
  4. 解压软件包到 Nginx 目录

因而咱们首先须要在流水线中增加一个构建工作:

  1. 在构建阶段增加一个构建类型的工作
  2. 创立一个构建工作
  3. 在流水线抉择上一步创立好的流水线

3.3.1 在构建阶段增加一个构建类型的工作

在构建阶段增加一个工作,而后在侧滑中抉择构建类型,这是该类型下是没有构建工作的,因而没法抉择,须要先创立构建工作。

3.3.2 创立一个构建工作

在抉择须要调度的工作中点击创立按钮,进入新建构建工作的页面,依照指引创立一个构建工作:

  1. 输出构建工作名称
  2. 抉择咱们之前创立的 Entpoint 实例,以及该示例下的 Github 仓库
  3. 不应用模板,间接创立
  4. 增加 Npm 构建和上传软件包道公布库这两个构建步骤(要害)
  5. 配置构建参数

Npm 构建

该步骤间接应用默认的构建脚本命令,只须要减少打 tar 包的命令即可:

...

npm install # 装置依赖库

npm run build # 一般的 NG CLI 生产包构建命令

npm run tar # 新增

tar 命令:

"tar": "node scripts/tar.js",

tar.js

const fs = require('fs');
const tar = require('tar');

fs.stat('./result', (error, stats) => {if (error) {fs.mkdirSync('./result'); // 不存在 result 目录则创立一个空的
  }

  tar.c({gzip: true}, ['dist']) // 将 dist 目录下的文件全副打包
  .pipe(fs.createWriteStream('./result/devui.tar.gz')); // 将生成的 tar 包(devui.tar.gz)放到 result 目录下
});
上传软件包到公布库

上一个 Npm 构建步骤曾经将压缩包创立好了,这个工作的目标是将这个 tar 包上传到公布库,也就是之前流水线中的第 3 个阶段,不便部署时下载 tar 包到指标服务器。

该步骤次要须要填写构建包门路:

./result/devui.tar.gz

公布版本号和包名不要写死,从部署参数里拿,格局如下:

${releaseVersion}

其中 releaseVersion 就是下一步须要配置的构建参数。

配置构建参数

codeBranch 是默认的参数,咱们须要减少 releaseVersion 和 serviceName 两个构建参数,一个用于每次构建时的版本号,另一个就是服务名。

3.3.3 在流水线抉择上一步创立好的流水线

回到流水线,就能够抉择上一步创立好的流水线,保留即可。

至此构建的步骤曾经搞定了,咱们能够跑一下试试。

跑完流水线咱们就能在公布仓库看到咱们的 tar 构建包:

有了构建包咱们就能够拿它去服务器部署啦,当然咱们必定不会抉择手工的形式部署,而是在流水线中创立一个部署工作,让所有过程自动化进行。

3.4 创立部署工作

在流水线中增加部署工作和增加构建工作差不多,只须要以下 3 步即可:

  1. 增加一个新的阶段
  2. 在该阶段中增加一个部署类型的工作
  3. 创立一个部署工作(要害)
  4. 在步骤 2 中抉择步骤 3 中创立的部署工作

创立一个部署工作

和创立构建工作相似:

  1. 输出部署工作名称
  2. 抉择空白模板,间接创立
  3. 增加抉择部署起源和执行 shell 命令这两个构建步骤(要害)
  4. 配置部署参数
抉择部署起源

要害是须要抉择 主机组 ,填写 软件包 部署目录

软件包就是之前公布仓库的软件包,间接从 /devui/${releaseVersion} 取即可,其中 ${releaseVersion} 是部署参数,和之前的构建参数相似。

部署目录是要将 tar 压缩包上传到指标机器中的目录,咱们传到 /devui 目录中。

主机组须要新建,抉择主机组旁边的 新建 按钮,进入创立主机组页面,只须要以下步骤即可创立一个主机组:

  1. 填写主机组名称
  2. 增加主机(之前申请的 ECS 弹性云主机)

增加主机须要填写的信息:

  1. 主机名
  2. 主机 IP 地址
  3. 用户名(root)
  4. 明码
  5. 端口号(22)

执行 shell 命令

执行 shell 命令是当你曾经把 tar 软件包上传到指标服务器之后,心愿执行的 shell 命令,咱们当然是心愿将 tar 包解压进去喽。

执行以下 shell 即可:

rm -rf /usr/local/nginx/html/* # 删除之前部署过的动态资源
tar zxvf /devui/${serviceName}.tar.gz -C /usr/local/nginx/html # 解压 tar 包到 nginx 的 html 目录
mv /usr/local/nginx/html/dist/* /usr/local/nginx/html/
配置部署参数

这里的部署参数和构建参数的配置形式是一样的,不再赘述。

3.5 定时工作

搭建完流水线,咱们能够配置一个定时工作,每天或每周主动用制订分支跑流水线,齐全不必人工干预。
为了保障版本品质,咱们也能够在配置灰度部署策略,增加拨测工作,保障每一次部署现网都不出问题。
限于篇幅就不一一介绍了,感兴趣的小伙伴能够关注 DevCloud 官网,外面具体地介绍了从需要布局到研发、测试、运维整套 DevOps 流程的玩法。

4 小结

本文具体地介绍如何将一个网站的 Github 仓库源码自动化部署到服务器。
先介绍申请服务器和搭建服务器环境,重点介绍在 Linux 服务器搭建 Nginx 服务的步骤;
而后简略介绍了手动部署流程;
最初具体介绍了如何利用 DevCloud 流水线工具,实现自动化部署。

退出咱们

咱们是 DevUI 团队,欢送来这里和咱们一起打造优雅高效的人机设计 / 研发体系。招聘邮箱:muyang2@huawei.com。

文 /DevUI Kagol

往期文章举荐

《当初开始为你的 Angular 利用编写测试》

《Web 界面深色模式和主题化开发》

《手把手教你搭建一个灰度公布环境》

退出移动版