JavaScriptNode.js大前端
使用 DevCloud 流水线自动化部署 Web 应用
通过 DevCloud 流水线实现 Web 应用自动化部署的流程包含服务器环境搭建与流水线配置。首先安装 Nginx 服务作为反向代理，对比手工打包上传的低效性。核心步骤涉及创建 DevCloud 项目，配置代码源，添加构建任务执行 Npm 构建与压缩包上传至发布库，以及创建部署任务连接目标主机执行解压命令。该方案消除了人工干预，保障版本质量并支持定时触发与灰度策略。
通过 DevCloud 流水线实现 Web 应用自动化部署的流程包含服务器环境搭建与流水线配置。首先安装 Nginx 服务作为反向代理，对比手工打包上传的低效性。核心步骤涉及创建 DevCloud 项目，配置代码源，添加构建任务执行 Npm 构建与压缩包上传至发布库，以及创建部署任务连接目标主机执行解压命令。该方案消除了人工干预，保障版本质量并支持定时触发与灰度策略。
本文以网站为例，介绍如何用 DevCloud 流水线自动化部署一个前端应用。
本机开发完代码，并 push 到远程代码仓库，还需要部署到服务器上，用户才能访问。
因此为了部署你的应用，第一步需要购买一台服务器，为了节省成本，一般都会购买按需使用的云服务器。下面介绍如何在 Linux 服务器搭建 Nginx 服务。
Web 应用通常都会使用 Nginx 作为反向代理。
为了让用户可以访问我们的应用，需要在服务器安装 Nginx 应用。
我们使用源码编译方式安装最新版本的 Nginx，主要分成以下步骤：
先在找到 Linux 版本的 Nginx 源码包地址，然后使用 wget 命令下载 Nginx 源码安装包。
wget http://nginx.org/download/nginx-1.18.0.tar.gz
使用 tar 命令进行解压。
tar -zxvf nginx-1.18.0.tar.gz
先进入 nginx 源码的根目录，然后执行 configure 配置脚本，这里只配置了 nginx 的安装目录。
cd nginx-1.18.0 ./configure --prefix=/usr/local/nginx
执行完发现报错了，原来是缺少依赖库。
./configure: error: the HTTP rewrite module requires the PCRE library...
主要需要安装 pcre/zlib/openssl 三个依赖库，我们使用 yum 包管理工具来安装。
yum -y install pcre-devel zlib-devel openssl-devel
安装完依赖库之后再次执行 configure 脚本，Nginx 配置成功。
我们注意到执行完 configure 配置脚本之后，生成了一个 Makefile 文件，该文件就是用来编译 Nginx 源码的。
相比配置，编译的步骤就简单多了，只需要执行 make 命令即可。
make
编译完之后就是安装了，这一步才会真正在 /usr/local/nginx 目录下生成相应的文件。
make install
安装完之后，在 /usr/local/nginx 目录下已经生成了运行 Nginx 应用需要的所有文件。
执行 nginx 目录下的 sbin/nginx 就可以直接启动 Nginx 啦。
/usr/local/nginx/sbin/nginx
在本机浏览器中输入服务器的公网 IP 地址，即可访问 Nginx 应用。
这里显示了 Nginx 的欢迎页面，等我们部署好自己的 Web 应用之后，这个网页将显示我们自己的网站首页。
我们在本机开发完网站的代码之后，执行 npm run build，这时将在 dist 目录得到网站的所有静态资源文件，可以先在本地用看下效果。
为了将其部署到服务器，并通过 Nginx 服务器访问，我们需要将这些文件上传到服务器的 nginx 目录，一个一个文件传肯定不现实，需要将其压缩打包，然后上传到服务器，最后解压到 nginx 的 html 目录就算部署完成。
Step 1: 压缩打包 tar
Step 2: 解压部署 deploy
npm run build 构建出来的静态资源都存放在 dist 目录下，只需要执行以下命令即可生成 tar 压缩包：
tar czvf devui.tar.gz ./dist
登录服务器，使用 rz 命令将上一步生成的 tar 包上传到 Linux 服务器，然后使用 tar 命令解压到 nginx 的 html 目录即可完成部署。
tar zxvf devui.tar.gz
如果每次开发完都需要手动执行以上步骤，将会非常麻烦，并且很容易出错。
为什么不将其自动化呢？
为了实现 Web 应用的自动化部署，我们主要需要使用 DevCloud 的 流水线/编译构建/发布/部署4 个服务。
主要分成以下 4 个步骤：
由于 DevCloud 所有服务都是通过项目承载的，因此需要先创建下项目，这里创建一个看板项目。
先进入，按以下步骤即可创建一个看板项目：
项目创建成功之后直接进入该项目首页，点击头部菜单 构建&发布 下的 流水线 按钮即可进行流水线首页。
在流水线首页的右上角有一个创建流水线的按钮，点击即可进入流水线的创建流程。
创建一条流水线主要分成以下步骤：
为了选择 Github 代码仓库的源，我们需要新增一个服务扩展点，获得 Github 的授权，这样 DevCloud 流水线这边才可以拉取 Github 的代码，进行构建、部署等步骤。
新增扩展点的步骤也很简单：
有了扩展点，就可以选择你的 Github 仓库作为代码源啦。
选完代码源就可以创建你的流水线啦。
可以新创建的流水线包含 3 个阶段，第一个阶段关联了一个 Github 的代码仓，第二个阶段是一个空的构建阶段，里面什么任务也没有，第三个阶段是一个不可编辑的发布仓库阶段。
这个流水线目前什么都做不了，我们需要往里面添加任务才能完成网站的自动化部署。
回顾下之前的手工部署步骤：
因此我们首先需要在流水线中添加一个构建任务：
在构建阶段添加一个任务，然后在侧滑中选择构建类型，这时该类型下是没有构建任务的，因此没法选择，需要先创建构建任务。
在选择需要调度的任务中点击创建按钮，进入新建构建任务的页面，按照指引创建一个构建任务：
该步骤直接使用默认的构建脚本命令，只需要增加打 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 两个构建参数，一个用于每次构建时的版本号，另一个就是服务名。
回到流水线，就可以选择上一步创建好的流水线，保存即可。
至此构建的步骤已经搞定了，我们可以跑一下试试。
跑完流水线我们就能在发布仓库看到我们的 tar 构建包。
有了构建包我们就可以拿它去服务器部署啦，当然我们肯定不会选择手工的方式部署，而是在流水线中创建一个部署任务，让所有过程自动化进行。
在流水线中添加部署任务和添加构建任务差不多，只需要以下 3 步即可：
和创建构建任务类似：
关键是需要选择 主机组，填写 软件包 和 部署目录。
软件包就是之前发布仓库的软件包，直接从 /devui/${releaseVersion} 取即可，其中 ${releaseVersion} 是部署参数，和之前的构建参数类似。
部署目录是要将 tar 压缩包上传到目标机器中的目录，我们传到 /devui 目录中。
主机组需要新建，选择主机组旁边的 新建 按钮，进入创建主机组页面，只需要以下步骤即可创建一个主机组：
添加主机需要填写的信息：
执行 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/
这里的部署参数和构建参数的配置方式是一样的，不再赘述。
添加好部署任务我们就可以跑下流水线，看下效果。
流水线跑完之后，四个阶段都会显示绿色。
部署完之后访问咱们的主机 IP 地址即可看到网站效果。
搭建完流水线，我们可以配置一个定时任务，每天或每周自动用指定分支跑流水线，完全不用人工干预。
为了保障版本质量，我们也可以在配置灰度部署策略，添加拨测任务，保障每一次部署现网都不出问题。
限于篇幅就不一一介绍了，感兴趣的小伙伴可以关注官方文档，里面详细地介绍了从需求规划到研发、测试、运维整套 DevOps 流程的玩法。
本文详细地介绍如何将一个网站的 Github 仓库源码自动化部署到服务器。
先介绍申请服务器和搭建服务器环境，重点介绍在 Linux 服务器搭建 Nginx 服务的步骤；
然后简单介绍了手动部署流程；
最后详细介绍了如何利用 DevCloud 流水线工具，实现自动化部署。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online