有Maven背景者在Angular项目中整合npm、Nexus与CI实践的困惑

阿华AIGC实验室

2026-5-20

从Maven到npm：Angular项目+Nexus+CI完整链路指南

作为从Maven生态转过来搞Angular的开发者，我太懂这种“看着眼熟但不知道怎么上手”的困惑了！咱们先把npm和Maven的核心概念做个对应，再一步步拆解构建、发布到Nexus、CI部署的完整流程，帮你快速打通链路。

一、先搞懂：npm vs Maven 核心概念映射

先把你熟悉的Maven逻辑套到npm上，瞬间就清晰了：

npm → Maven命令行工具
package.json → pom.xml（定义依赖、项目信息、脚本）
node_modules → Maven本地仓库（存储依赖）
npm仓库（含Nexus私有仓） → Nexus Maven仓库（hosted/proxy/group）
npm publish → mvn deploy（把构建产物推送到远程仓库）
dist目录（Angular构建产物） → target目录（Maven构建的Jar包）

二、完整链路分步走

1. 准备工作：配置Nexus的npm仓库

和Maven一样，Nexus支持三种npm仓库类型，建议按以下方式配置：

Proxy仓库：代理公共npm仓库（比如npmjs.com），加速依赖拉取，避免直接访问外网
Hosted仓库：存储你自己的Angular构建产物（对应Maven的releases/snapshots仓）
Group仓库：把Proxy和Hosted仓库合并成一个地址，方便项目统一使用

配置完成后，记下Group仓库的地址（比如http://your-nexus-url/repository/npm-group/）和Hosted仓库的地址（比如http://your-nexus-url/repository/npm-hosted/）。

2. 本地配置npm，对接Nexus

类比Maven的settings.xml，你需要配置npm的全局或项目级配置：

全局配置：在用户目录下创建.npmrc文件，内容如下：
```
registry=http://your-nexus-url/repository/npm-group/
//your-nexus-url/repository/npm-hosted/:_authToken=NEXUS_AUTH_TOKEN
```
其中NEXUS_AUTH_TOKEN是你在Nexus生成的npm登录令牌（在Nexus的个人中心→User Token获取）。
项目级配置：在Angular项目根目录创建.npmrc，可以覆盖全局配置，比如指定发布到Hosted仓库：
```
publishConfig.registry=http://your-nexus-url/repository/npm-hosted/
```

3. Angular项目构建：对应`mvn package`

Angular的构建命令是ng build，生产环境构建要加配置参数：

# 最新Angular版本（v12+）
ng build --configuration production
# 旧版本
ng build --prod

执行完成后，项目根目录会生成dist/文件夹，里面就是可以部署的静态资源（类比Maven的Jar包）。

4. 发布到Nexus：对应`mvn deploy`

如果你的Angular项目是作为可复用的库发布（比如组件库），直接用npm publish即可；如果是前端应用，你也可以把dist目录打包成npm包发布，或者直接把静态资源上传到Nexus的raw仓库（更适合前端应用）。

方式1：发布为npm包（适合组件库）

确保package.json里的name、version配置正确，若用私有scope（比如@your-company），要在Nexus里配置允许该scope的包发布

执行登录（如果没配置token的话）：

npm login --registry=http://your-nexus-url/repository/npm-hosted/

发布：
```
npm publish
```

方式2：发布静态资源到Nexus Raw仓库（适合前端应用）

如果是纯前端应用，直接把dist目录上传到Nexus的Raw仓库更简单，用curl或者Nexus CLI工具：

curl -u username:password -X PUT "http://your-nexus-url/repository/raw-hosted/your-app/v1.0.0/" -T "dist/*"

5. CI流程整合：自动化构建、发布、部署

类比Maven的CI流程（拉代码→构建→部署），npm+Angular的CI流程可以这样设计（以GitHub Actions为例，其他CI工具逻辑一致）：

name: Angular CI/CD

on:
  push:
    branches: [ main ]

jobs:
  build-publish-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # 安装Node.js（对应Maven环境）
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          registry-url: 'http://your-nexus-url/repository/npm-group/'

      # 安装依赖（对应mvn install）
      - name: Install dependencies
        run: npm install
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NEXUS_AUTH_TOKEN }}

      # 构建生产环境产物（对应mvn package）
      - name: Build production bundle
        run: ng build --configuration production

      # 发布到Nexus Hosted仓库（对应mvn deploy）
      - name: Publish to Nexus
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NEXUS_AUTH_TOKEN }}

      # 部署到目标环境（比如上传到服务器，或部署到容器平台）
      - name: Deploy to server
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          password: ${{ secrets.SERVER_PWD }}
          source: "dist/*"
          target: "/var/www/your-app/"

关键注意点：

CI里的敏感信息（比如Nexus令牌、服务器密码）要存在CI的保密变量里，不要硬编码
如果是部署到云平台（比如AWS S3、阿里云OSS），可以用对应的CI插件上传dist目录

三、常见坑点提示

Nexus权限配置：要确保你的账号有Hosted仓库的npm Publish权限，Group仓库的npm Read权限
版本号管理：用npm version patch/minor/major自动升级版本号，避免手动修改package.json出错（对应Maven的versions插件）
依赖拉取速度：配置Nexus Proxy仓库后，记得把npm的registry指向Group仓库，避免直接拉取公共源
前端应用部署：如果是部署到Nginx等静态服务器，要注意配置路由重写（Angular的SPA需要）

内容的提问来源于stack exchange，提问作者avi.elkharrat