如何通过Jenkins在开发或生产环境部署Angular应用

基础流程衔接 #

首先需要在Jenkins节点上配置和项目版本匹配的Node.js环境，流水线的标准执行步骤如下：

• 拉取项目源码后，首先执行npm ci，严格按照项目锁文件安装可复现的依赖，避免版本漂移引发构建异常
• 执行ng build --prod（注：Angular 12+版本已将该参数替换为--configuration=production，旧参数仍保持兼容），执行完成后默认会在项目根目录生成dist/[项目名称]格式的静态资源目录
• 将该目录下的静态文件同步部署到目标Web服务器的站点根目录，即可完成基础部署

不同环境的dist路径配置逻辑 #

要实现开发、生产服务器的应用正常加载访问，需要同时完成两层配置，从根源上避免静态资源加载失败：

• Angular构建参数侧配置：如果应用没有部署在站点根路径下，必须在build指令中追加--baseHref=部署路径、--deployUrl=部署路径参数，否则所有JS、CSS资源的引用路径都会默认从站点根目录查找，直接出现404。可以提前在angular.json中为开发、生产环境分别配置独立的baseHref、deployUrl、接口环境变量，在Jenkins流水线中切换对应配置即可，无需手动修改每一次构建的参数。
• Jenkins文件分发侧配置：通过SSH同步插件配置不同环境的目标服务器地址、站点路径，比如开发环境同步到Nginx的/var/www/dev-angular目录，生产环境同步到/var/www/prod-angular目录；同步前记得清空目标目录的历史旧文件，避免哈希命名的静态文件残留，引发新旧版本文件混杂的加载错乱问题。

补充提示：部署完成后如果出现路由刷新404，并非构建流程的问题，只需要在对应Web服务器上配置单页应用的路由重定向，把所有非静态资源的请求都指向index.html即可解决。

默认配置下无法100%复现，只有严格对齐所有构建前置条件，才能和Jenkins流水线生成的构建产物完全一致，两者主要存在这些偏差：

• 依赖版本偏差：本地如果习惯用npm install安装依赖，版本会和项目锁文件存在微小漂移；而Jenkins流水线默认用npm ci严格按锁文件安装依赖，二者的依赖包版本差异可能引发构建结果不同。
• 构建参数偏差：Jenkins流水线中执行的build指令通常会追加自定义参数，比如不同环境对应的API接口地址、源码映射开关、静态资源压缩等级、部署路径参数，本地直接执行ng build --prod会读取angular.json的默认配置，不会自动加载这些自定义参数，可能把开发环境的配置打入生产构建产物。
• 运行环境偏差：本地的Node.js版本如果和Jenkins节点的Node版本不匹配，哪怕代码、参数完全一致，不同Node版本的编译逻辑差异也可能导致构建产物存在兼容性问题。

如果要在本地完全复现流水线的构建效果，只需要三个步骤：本地安装和Jenkins节点完全一致的Node版本、执行npm ci安装依赖、把Jenkins流水线中的build指令原封不动在本地执行，生成的dist文件就和服务器上部署的版本没有差异。
另外需要注意：本地调试用的ng serve是内存级热更新编译，不会生成静态文件，注入了大量调试代理、热更新脚本，和正式构建流程完全无关，无法用来模拟生产构建的效果。

内容的提问来源于stack exchange，提问作者Vidya