WindowsServer安装Verdaccio安装排坑日记

为了在js开发中更加便利的模块化,解决开发中频繁地更新npm包的问题,决定搭建一个轻量的npm包管理服务。比较了 verdaccio,cnpm 后,最后选择了 verdaccio。因为它够方便和快速,同时也够用。

npm 私有仓库

npm 私有仓库的好处

  1. 安全性角度考虑:如果我们想要一个公共组件库,那么把组件放到我们私有库中,只有内网可以访问,这样可以避免组件中业务的泄露;

  2. 模块复用性角度考虑:多个项目之间有重复的共有模块,当需要修改模块,通过简单的统一的配置就可以实现;提炼后的组件有专门的地址可以用来查看,方便使用,在后期项目的引用中也能节约开发成本

  3. npm 包下载速度角度考虑:使用内部的地址,能够在开发下载 node 包的同时,将关联的依赖包缓存到 npm 私有仓库服务器中,下载速度更快;

  4. 项目开发中的路劲角度考虑:在项目开发中书写代码更整洁简练,不需书写更长的相对路径;

  5. 公司技术沉淀角度考虑:知识的沉淀,在公司业务相关的应用上尤佳;

  6. 版本角度的考虑:相当于一个容器,统一管理需要的包,保持版本的唯一;

  7. 开发效率角度考虑:使私有公共业务或组件模块能以共有包一样的管理组织方式,保持一致性,提高开发效率.

npm 私有仓库的原理

img

用户 install 后向私有 npm 发起请求,服务器会先查询所请求的这个模块是否是我们自己的私有模块或已经缓存过的公共模块,如果是则直接返回给用户;如果请求的是一个还没有被缓存的公共模块,那么则会向上游源请求模块并进行缓存后返回给用户。上游的源可以是 npm 仓库,也可以是淘宝镜像。

常用的仓库地址

windows server环境

  • windows server 2022
  • 宝塔面板

配置nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
server {
listen 443 ssl http2;
server_name registry.xxx.com;

# ssl
ssl on;
ssl_certificate cert.crt;
ssl_certificate_key cert.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1.2 TLSv1.1 TLSv1; #SSL协议
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#SSL加密算法
ssl_prefer_server_ciphers on;

location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://127.0.0.1:4873/;
proxy_read_timeout 600;
proxy_redirect off;
}

// 必须要有
location ~ ^/verdaccio/(.*)$ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:4873/$1;
proxy_redirect off;
}
}

无法加载 venders 等静态文件

按照官方教程配置完成后,在 ngnix 配置 https,然后通过域名(https://mydomain.com:4433)访问 verdaccio 时,一直是空白。

F12打开调试面板,查看网络项,发现读取 runtime, vendors, main 等文件是失败的,查看其 headers,发现其请求的 url 是 https://mydomain.com/-/xx, 端口莫名丢掉了。

造成这种问题的原因是,在nginx的配置中,少了

1
location ~ ^/verdaccio/(.*)$ ...

这项配置。

参考

本文主要参考以下,在此报以诚挚感谢!

  1. npm 私有仓库工具 Verdaccio 搭建
  2. Verdaccio 5 migration guidelines,介绍了 VERDACCIO_PUBLIC_URL的作用
  3. Debugging Verdaccio