背景

项目代码构建失败可能有很多原因，比如代码本身有错误、子依赖错误、锁定依赖树的 package-lock.json 文件没有提交远程、本地环境与线上部署环境差异等等，仅通过开发人员检查代码或者 jenkins 上简单的错误信息很可能无法快速定位到问题。

对于一个多人协同开发越来越繁重的项目，这类问题出现的频率难以忽视。为了在出现线上部署项目失败时能快速定位问题，我们亟需搭建一套线上部署环境，模拟真实的项目构建过程，保障正常发版流程。

配置环境

由于本地环境与线上部署环境不同，为了保证构建过程中代码和镜像导致的问题能准确复现，我们需要通过 docker 拉取项目线上构建时的镜像，在该镜像中来构建项目代码。

安装 docker

到 docker 官网或者点击链接下载 Docker Desktop 安装包, 手动安装。点击docker图标打开运行，可以看到 docker 图形化界面。

先做一个简单的尝试，在终端中运行 docker run -d -p 80:80 nginx，表示从 Docker Hub 拉取 nginx 镜像，新建并启动器一个容器，在后台运行，并将主机的端口 80 映射到容器中的端口 80：

在 docker desktop 界面可以看到镜像 (image) 列表和容器 (container) 列表中都有新增一项 nginx：

浏览器中打开 http://localhost/ 能看到如下页面：

到此说明 docker 安装运行成功啦。

下面可以在终端中拉取构建项目代码的镜像、启动容器、构建代码。

登陆镜像仓库拉取镜像

如果公司有自己的镜像管理仓库，需要先进行登录，否则默认会从官方仓库 Docker Hub拉取镜像。

docker login

在终端输入 docker login [镜像仓库地址] 回车，根据提示输入上面账号密码，从官方仓库拉取镜像可跳过这一步。

docker pull

找到项目的镜像地址，一般会记录在项目的 deploy 相关配置中。

然后在终端输入 docker pull [镜像链接] 回车，即可拉取镜像。

docker run

再终端输入 docker run -it --rm [镜像链接] 创建并启动一个容器，如需退出容器操作界面回到主机目录可输入 exit 。

在镜像中构建项目代码

获取代码

在 docker 中获取代码可以通过以下两种方式：

从远程仓库克隆代码

这里和主机克隆代码的操作一样，就不啰嗦了，克隆代码之前也需要先配置 gitlab 的 SSH-Key。由于容器退出销毁后，其中的代码和配置也清除了，因此每次创建一个新的容器都要重新配置 key 再克隆代码，比较麻烦，这种方式不太推荐。

将主机代码挂载到 docker

这种方式可以将主机下的项目目录挂在容器中某个目录下作为数据卷。

如：docker run -it --rm -v [主机项目目录]:/home/project [镜像链接]

表示将指定的主机下的项目目录，挂载到指定镜像下的一个新的容器中指定目录下(上面以 /home/project 为例)，注意主机中的目录要用绝对地址， -v 参数会帮我们创建好 docker 中原来不存在的 /home/project 文件夹。

构建代码

Docker 挂载主机目录的默认权限为可读写，由于构建项目也需要有项目目录的读写权限，这里用默认权限即可。

进入容器中的项目目录下(cd /home/project)，构建代码(npm run build)。

这个过程中终端打印出的详细信息就可以帮助我们定位线上部署时 npm run build 过程中的代码问题。

参考文献

[1] Docker — 从入门到实践

[2] Docker docs