你好，我是大圣。

在实战痛点 4 这一讲中，我们一起学习了 Vue 3 项目的性能优化策略。今天，我们来聊一下项目上线前的最后一步，就是如何把开发好的代码部署到线上。

对于这个问题，你可能脱口而出：“使用npm run build就好了呀”。这样做只是在本地把代码打包，如果想要在线上也可以访问这些代码，那么还需要加上部署的过程。所以在下面，我先给你介绍一下当前这个时代的前端代码在部署的时候，有哪些难点和问题需要处理。

代码部署难点

在 jQuery 时代之前，前端项目中所有的内容都是一些简单的静态资源。那个时候，网站还没有部署的概念，网站上线前，我们直接把开发完的项目打包发给运维，再由运维把代码直接上传到服务器的网站根目录下解压缩，这样就完成了项目的部署。

后来的 jQuery 时代，项目的入口页面被后端管理，模板部署到了后端，CSS、JavaScript 和图片等静态资源依然是打包到后端之后，再解压处理。但现在，我们对前端的性能和稳定性的要求也越来越高，jQuery 时代的那种简单的部署模式就不足以应对性能优化、持续部署等一系列的情境。

现在前端所处的时代，我们主要会面临后面这些代码部署难点：首先是，如何高效地利用项目中的文件缓存；然后是，如何能够让整个项目的上线部署过程自动化，尽可能避免人力的介入，从而提高上线的稳定性；最后，项目上线之后，如果发现有重大 Bug，我们就要考虑如何尽快回滚代码。

当我们面对这些代码部署上的难点，特别是在团队协作的项目中遇到时，我们就可以考虑对项目进行自动化部署了，这样代码部署的速度和稳定性会给项目研发效率带来很好的提升。

项目上线前的自动化部署

下图所示的，是大部分团队部署项目时的逻辑 。实际上，大部分前端开发者都会认为，完成图示中的打包压缩这一步，也就是开发完项目之后，代码推送到 GitHub 后，就算完成任务了。但是，打包代码之后，把代码上传服务器也是这一步，对于前端开发者来说，是很少能接触到，但却是很重要的一步。

所以，对于如何把打包好的代码上传到服务器这个问题，就值得我们去好好探究，琢磨出一个好的解决方案。

首先，我们需要一台独立的机器去进行打包和构建的操作，这台机器需要独立于所有开发环境，这样做是为了保证打包环境的稳定；之后，在部署任务启动的时候，我们需要拉取远程的代码，并且切换到需要部署的分支，然后锁定 Node 版本进行依赖安装、单元测试、ESLint 等代码检查工作；最后，在这台机器上，执行经过编译产出的打包后的代码，并打包上传代码到 CDN 和静态服务器。当然了，完成这些操作之后，还要能通过脚本自动通过内部沟通软件通知团队项目构建的结果。

但是在项目部署的过程中，迎面而来的可能是下面这些问题：在什么操作系统环境中执行项目的构建？由谁触发构建？如何管理前面所述的把代码上传 CDN 时，CDN 账户的权限？如何自动化执行部署的全过程，如果每次都由人工执行，就得消耗一个人力守着编译打包了，而且较为容易引发问题，比如测试的步骤遗漏或部署顺序出错。那么如何提升构建速率，就成了部署功能中需要解决的重要问题。

为了解决上面这些问题，业界提出了一些解决方案：比如，采用能保证环境一致性的 Docker；自动化构建触发可以通过 GitHub Actions；GitHub 的 actions 功能相当于给我们提供了一个免费的服务器，可以很方便地监控代码的推送、安装依赖、代码编译自动上传到服务器。

上图所展示的，就是我们使用了 GitHub Actions 部署项目之后的项目开发流程。现在静态资源管理已经完成，也实现了自动化部署。提交代码之后，我们的项目就可以自动推送到服务器，这样，网站的第一次上线也就算成功了。