什么是自动化部署

我接触到的自动化部署概念最早是在 Vercel 上提供的，Vercel 可以提供和 github 联动的功能，通过和你自己的 github 上的某个库建立‘链接’，当你 commit 到 github 远程库时就可以自动部署，Vercel 会帮你完成以下操作（例子为一个 Webpack 项目，仅限 Web 前端，如有遗漏望补充）

1.Webpack 打包（默认是项目 package.json 的打包命令）
2.打包文件迁移到 Vercel 的服务器上（dist 目录下的文件）
3.部署网站（Vercel 使用的 Nginx 还是 Apache 我就不知道了，应该是用的 Nginx）

另一个自动化部署概念是在实习时接触的，公司称之为流水线，它的作用和 Vercel 差不多，不过会多了两个步骤

1.ESLint 校验代码
2.重新安装依赖
3.Webpack 打包（默认是项目 package.json 的打包命令）
4.打包文件迁移到 Vercel 的服务器上（dist 目录下的文件）
5.部署网站（Vercel 使用的 Nginx 还是 Apache 我就不知道了，应该是用的 Nginx）

现在自动化部署的概念炒的火热，主要是它通常还可以和 Serverless 绑定在一起，Serverless 意思是无服务器，其实就是托管应用程序到 Serverless 服务提供商的服务器上，像一些小微公司可以直接托管网站、小程序，完全不用买服务器（为啥不买服务器，因为 Serverless 便宜呀）

像 Serverless、自动化部署和它们的可视化界面就不多介绍了，但我要说腾讯云在这方面做的很烂，相反 Azure 和 Vercel 做的就很好

普通部署

说完了自动化部署那么我们平常的普通部署是怎么做的呢？以一个 nodejs 的普通接口为例（基于 express-generator 生成的项目）

# npm v5.2.0 以上版本
npx express --no-view --git
git init
npm install 

执行上面的命令后得到下面的目录结构

├── .git/
├── bin/
├── node_modules/
├── public/
├── routes/
├── .gitignore
├── app.js
├── package-lock.json
└── package.json 

1.第一步，在宝塔安装 pm2 如果你没有的话（pm2 会自动安装 nodejs 和 npm）

2.第二步，在服务器找到一个地方放你的文件，这里项目比较小，我就直接丢上去了（一般使用 zip 压缩文件，或者在服务器上重新执行 npm install）

3.第三步，在你的 PM2 面板里面添加项目

4.第四步，提交查看效果，是否符合本地运行预期

后续重新更新部署怎么办？很简单，将更新的文件覆盖掉原文件，在 PM2 重启一下就行了

但是如果我想本地 git 提交代码到远程库的时候能够顺便部署行不行呢？看下面的操作

自动化部署

本篇文章实现的自动化部署是基于 github 的 Webhooks 和宝塔的 WebHook 实现

那如何将上面的普通部署改成这个自动化部署呢？

1.第一步，在 github 上创建对应的库（反正又不要钱，随便创）

库链接 - pandoralink/auto-deploy

2.第二步，在服务器拉取项目并在在 PM2 添加项目（同普通部署）并查看 id 信息

cd /www/temp
git clone git@github.com:pandoralink/auto-deploy.git
cd auto-deploy
npm install 

# 查看 Linux 的 PM2 项目 id 信息
pm2 list 

id 信息如下图

在 Linux 操作 git 添加公钥私钥到远程仓库（github/gitee）可以参考 服务器上的 Git - 生成 SSH 公钥 和 远程仓库 - 远程仓库

3.第三步，安装宝塔 WebHook 插件

4.第四步，添加宝塔 WebHook 规则

5.第五步，获取宝塔 WebHook URL

6.第六步，配置 github 的 WebHooks

注意，content-type 需要选择 application/json，否则 github 请求此 URL 时，宝塔会返回 403 错误

配置结果如图

测试修改一下 public/index.html 的内容，并 push 到 github 远程仓库

成功修改并部署成功，结果如下

总结

相比于 Vercel 还是我实习公司的流水线，文章中实现的自动化部署还是过于简陋，成熟的自动化部署拥有可视化界面，完善的日志，部署进度条，这些都是需要很多努力和经验去实现的，最后给出自动化部署的流程图

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享