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

42次阅读

共计 6362 个字符，预计需要花费 16 分钟才能阅读完成。

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 界面深色模式和主题化开发》

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

正文完
javascript
发表至： javascript
2020-10-27
 0
ES6
关于javascript:如何理解JavaScript中的闭包设计
关于javascript:一键安装团队推荐的-vscode-插件
关于javascript:Spring-的-BeanFactory-和-FactoryBean-傻傻分不清