前言：为何需要内网私有unpkg CDN？

在大型企业或团队开发中，前端工程化依赖的npm包数量庞大，直接通过公网访问（如unpkg.com）可能面临以下问题：

网络延迟：公网访问受限于带宽和地理位置，导致构建速度慢。
安全风险：依赖公网CDN可能暴露内部包名或版本信息。
合规要求：金融、政府等行业需完全隔离外网，确保数据不出域。
性能优化：内网CDN可缓存常用包，减少重复下载，提升CI/CD效率。

本文将详细介绍如何基于私有npm仓库（如Verdaccio、Nexus）搭建内网unpkg CDN，实现前端资源的本地化加速分发。

一、技术架构设计

1.1 核心组件

私有npm仓库：存储和管理内部npm包（如@company/utils）。
CDN服务层：将npm包转换为静态资源URL（如/package/@company/utils@1.0.0/dist/index.js）。
反向代理：统一入口，处理缓存、权限控制。
存储后端：可选本地磁盘、对象存储（如MinIO）或分布式文件系统。

1.2 数据流

开发者通过npm publish将包发布至私有仓库。
CDN服务监听仓库变更，自动同步包元数据和文件。
前端构建工具（如Webpack）通过http://cdn.internal/package/...请求资源。
代理层根据URL路径解析包版本，返回对应文件。

二、技术选型与实现

2.1 私有npm仓库选型

方案	优点	缺点
Verdaccio	轻量级，支持Docker部署	功能较基础
Nexus	企业级，支持多种包格式	资源占用高
Artifactory	全面，支持CI/CD集成	商业版收费

推荐：中小团队选择Verdaccio（Docker部署示例）：

# docker-compose.yml
version: '3'
services:
  verdaccio:
    image: verdaccio/verdaccio
    ports:
      - "4873:4873"
    volumes:
      - ./storage:/verdaccio/storage
      - ./conf:/verdaccio/conf

2.2 CDN服务实现

方案一：基于Nginx的静态文件服务

步骤：

配置Nginx监听80端口，设置root指向npm仓库的storage目录。
通过location匹配URL规则：
```
location /package/ {
alias /verdaccio/storage/_packages/;
try_files $uri $uri/ =404;
}
```
问题：无法直接解析@scope/pkg@version路径，需预处理包目录结构。

方案二：自定义Node.js服务（推荐）

使用Express实现动态路由解析：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const STORAGE_ROOT = '/verdaccio/storage/_packages';
app.get('/package/:name@:version/*', (req, res) => {
  const { name, version, ...filePath } = req.params;
  const packagePath = path.join(STORAGE_ROOT, `${name.replace('@', '')}`, `${name}@${version}`);
  fs.readdir(packagePath, (err, dirs) => {
    if (err) return res.status(404).send('Package not found');
    const targetFile = path.join(packagePath, req.params['0']);
    res.sendFile(targetFile);
  });
});
app.listen(3000, () => console.log('CDN running on port 3000'));

优势：

灵活处理带@scope的包名。
可集成缓存层（如Redis）。
支持HTTP头控制（Cache-Control）。

2.3 反向代理与安全

使用Nginx作为统一入口，实现：

HTTPS加密：

server {
listen 443 ssl;
ssl_certificate /etc/nginx/certs/server.crt;
ssl_certificate_key /etc/nginx/certs/server.key;
location / {
  proxy_pass http://cdn-service:3000;
}
}

访问控制：

location / {
allow 192.168.1.0/24;
deny all;
proxy_pass http://cdn-service:3000;
}

三、部署与运维

3.1 自动化同步

通过inotifywait监控仓库目录变化，触发CDN缓存更新：

#!/bin/bash
STORAGE_DIR="/verdaccio/storage/_packages"
cd $STORAGE_DIR
inotifywait -m -r -e create --format '%w%f' . | while read FILE; do
  # 触发CDN服务重新加载缓存
  curl -X POST http://cdn-service:3000/reload
done

3.2 性能优化

CDN缓存策略：

// Express中间件
app.use((req, res, next) => {
  res.setHeader('Cache-Control', 'public, max-age=31536000'); // 1年缓存
  next();
});

负载均衡：多节点部署时，使用Nginx的upstream模块。

3.3 监控与日志

Prometheus + Grafana：监控请求量、响应时间。
ELK日志分析：记录404错误，优化包存储结构。

四、高级功能扩展

4.1 支持Source Map解析

前端错误监控需上传Source Map，可通过CDN扩展接口：

app.get('/sourcemap/:name@:version/:file', (req, res) => {
  const mapPath = `/verdaccio/storage/_packages/${req.params.name}/${req.params.name}@${req.params.version}/__dist__/${req.params.file}.map`;
  res.sendFile(mapPath);
});

4.2 集成CI/CD流水线

在Jenkins/GitLab CI中自动发布包并更新CDN：

# .gitlab-ci.yml
publish:
  stage: deploy
  script:
    - npm publish
    - curl -X POST http://cdn-service:3000/reload

五、常见问题解决

5.1 包版本冲突

现象：不同项目依赖同一包的不同版本。
方案：在CDN URL中强制指定版本，或通过resolutions字段锁定版本。

5.2 大文件传输慢

优化：

启用HTTP/2。
对大于1MB的文件启用分块传输。

5.3 权限管理

场景：需限制某些包的访问权限。
实现：在Nginx层通过auth_request模块对接LDAP/OAuth2。

六、总结与建议

渐进式实施：先在测试环境部署，验证后再推广至生产。
文档化：编写内部Wiki，明确CDN使用规范。
备份策略：定期备份npm仓库和CDN存储数据。

通过上述方案，企业可构建一个高效、安全、可控的内网unpkg CDN，显著提升前端开发效率，同时满足合规性要求。实际部署时，建议结合团队规模和技术栈选择最适合的组件组合。

自建内网资源加速站：搭建支持私有npm的unpkg CDN方案