百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

npm私服搭建,verdaccio方案及其最佳实践

ztj100 2024-11-17 18:14 45 浏览 0 评论

为什么要搭建公司内部的npm服务?

如今前端圈已十分繁荣,一个跟得上技术时代脚步的互联网公司必定是前后端分离的(至少在狭义上是分离的),这就导致了前端承受的分工压力会越来越大,很多公司的前端项目变得十分庞杂,因此技术负责人可能会考虑根据业务线进行拆分为几个工程系统,这样又引申出一个问题:这几个系统之间如何共用一套公司内部的组件库呢?每个工程里面都copy一套肯定不行,做一个小修改要同步几个工程,繁琐且容易出错。上传到npm库是个很不错的选择,不同的系统都指向一个npm源,然后通过npm install就行,快速且“干净”,所以在这种场景下,搭建一套公司内部的npm库就显得很有必要。简单来说,npm私服主要优势其实就两个:

  • 托管公司内部组件库代码,不对外,方便管理
  • 项目中使用到的npm包会缓存到私服库里,能明显提升之后下包的速度
为什么选择verdaccio

网上主要有几种搭建企业npm私服的方式,简单罗列一下:

  1. 付费选择:
  • MyGet (https://www.myget.org) 9美元/月,且只能有两个账号和1GB的存储空间。
  • NPM Org (https://www.npmjs.com) 每个账号每月7美元
  1. 免费选择:
  • DIY NPM (https://docs.npmjs.com/misc/registry)
  • Git,这也是一种选择,在package.json中指定git仓库的URL即可,但是这种做法有些别扭,第一,使得package.json不够优雅,第二,当git仓库为private时,你需要HTTPS或SSH凭据,而且通常我们并没有每个团队的权限。
  • Sinopia (https://www.npmjs.com/package/sinopia)
  • Cnpmjs.org (https://github.com/cnpm/cnpmjs.org)

付费的我们就不考虑了,没这个必要,而且付费的也不是就更好。sinopia搭建十分简单友好,不过这玩意儿已经停止维护了,最近的更新在4年前,但有一群人出了sinopia的一个分支,起了个名字叫verdaccio,这个就是这次主要推荐的方案,这个库一直在积极维护中,github start 7000+,看来还是比较靠谱的,而且国内外各种资料参考下来,这个方案也是受到极力推荐的。verdaccio搭建私服很简单,相比于cnpm搭建,还需要安装配置mysql,这个绝对会少走一些坑。

image.png


搭建步骤
  1. 首先我们需要向运维同学申请一台linux服务器,给台2GB左右的虚拟机就够用了;
  2. 找个合适的地方下载安装nodejs,比如在/usr/local/lib下
    安装wget:yum install -y wget;(已经安装的跳过这步)
    下载:wget https://nodejs.org/dist/v10.6.0/node-v10.6.0-linux-x64.tar.xz;
    解压:tar -xvf node-v10.6.0-linux-x64.tar.xz;
    重命名安装目录:mv node-v10.6.0-linux-x64 nodejs;
    建立软连接:
    ln -s /usr/local/lib/nodejs/bin/npm /usr/local/bin/
    ln -s /usr/local/lib/nodejs/bin/node /usr/local/bin/
  3. 执行node -v和 npm -v命令检查是否安装成功
  4. 全局安装verdaccio:npm i verdaccio -g;
  5. 全局安装pm2,用来守护node进程:npm i pm2 -g;
  6. 安装nginx,仍然在 /usr/local/lib下
    下载:wget http://nginx.org/download/nginx-1.13.7.tar.gz
    解压:tar -zxvf nginx-1.13.7.tar.gz;
    换个名字:mv nginx-1.13.7 nginx;
    进入安装目录:cd nginx
    执行:./configure;
    执行:make && make install;
    cd conf/修改nginx.conf,加上这一段:
Bash
server {
  listen       80;
  server_name  registry.npm.your.server;
  location / {
    proxy_pass    http://127.0.0.1:4873/;
    proxy_set_header        Host $host;
  }
}

建立软连接:ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/ 启动nginx: sudo nginx (重启命令:sudo nginx -s reload)

  1. pm2启动服务,执行pm2 start verdaccio,然后浏览器访问http://服务器IP,出现以下页面则代表安装成功。
    image.png
verdaccio使用方式

verdaccio允许任何人创建账号,若没有配置verdaccio的配置文件config.yaml,则默认任何注册了verdaccio的开发都有publish权限。看个实例:

  1. 添加一个用户:npm adduser --registry http://172.16.14.5: image.png
  2. 给要添加到服务的工程添加源信息,在工程根目录下新建.npmrc文件,添加以下内容:
Bash
registry=http://172.16.14.5/
  1. package.json中设置好版本,执行npm publish:

image.png

此时再访问http://172.16.14.5,该工程已出现在列表中:

image.png

verdaccio最佳实践

上述publish仓库的步骤很简单,创建用户 -> 设置npm源 -> npm publish。但这样并不是我们想要的流程,我们想要的是publish权限可把控,这当然是可以做的。

1. 查看config.yaml配置文件 一般来说此配置文件在/创建用户/.config/verdaccio中,如果你不确定,你可以直接在服务器上执行verdaccio命令,第一个config file即文件所在位置.

image.png


这个目录下有两个文件及一个目录:

image.png

打开config.yaml,查看packages项,原始内容为:

packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

  '**':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all

    # allow all known users to publish/publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated
    unpublish: $authenticated

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

字段含义: scope有两种模式 一种是 @/ 表示某下属的某项目 另一种是 * 匹配项目名称(名称在package.json中有定义) 权限:

  • access: 表示哪一类用户可以对匹配的项目进行安装(install)
  • publish: 表示哪一类用户可以对匹配的项目进行发布(publish)
  • proxy: 如其名,这里的值是对应于 uplinks 的名称,如果本地不存在,允许去对应的uplinks去取。

值的含义:

  • $all 表示所有人(已注册、未注册)都可以执行对应的操作
  • $authenticated 表示只有通过验证的人(已注册)可以执行对应操作,注意,任何人都可以去注册账户。
  • $anonymous 表示只有匿名者可以进行对应操作(通常无用)

如果要指定某个用户才有权限,可以直接写上用户名,多个用户用空格隔开,比如:

publish: michael martin

修改完成后请重启nginx和pm2。当前已存在的用户列表可在htpasswd文件中查看。

下载包及缓存仓库

在指定源为内网源的工程下,通过npm install就能下载内网的库了。我们内部的仓库存储在storage目录里,进入storage中,可以看到这里存储了我们使用过的库:

image.png


其中testpro是我们内部的库,进入库中,可以看到我们发布的所有版本都在这里以压缩包的形式存储着


image.png

参考
  1. Ways to have your private npm registry
  2. https://verdaccio.org/docs/en/what-is-verdaccio


作者:LK2917
链接:https://www.jianshu.com/p/d32ce7e9d4d8
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关推荐

Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)

IT之家讯微软已向Insider用户推送了Win10预览版10532更新,本次更新对右键菜单、《Windows反馈》应用以及Edge浏览器进行了改进。除此之外还包含一些Bug,汇总如下,有意升级Wi...

Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等

IT之家讯本月中旬微软向Insider用户推送了Win10Mobile预览版10512,该版本修复了一些Bug,增强了系统稳定性,但依然存在一些问题。今天,微软Insider项目负责人GabeAu...

微软开始推送Win10预览版10532快速版更新

8月28日消息,刚才,微软推送了Win10Build10532快速版,修复了之前的Bug,并带来了三项改进。主要来说,这次的更新改进了右键菜单的UI,使其更具Modern风格(见上图)。此外,更新...

Win10预览版10532更新内容大全(windows10更新预览版)

IT之家讯今天凌晨微软向Insider用户推送了Win10预览版10532快速版更新,本次更新主要带来了三处改进,汇总如下:o改进右键菜单,外观更加Modern。这是基于网友要求界面一致的反馈做出...

无法升级Win10预览版10532?也许Hyper-V在搞鬼

根据IT之家网友的反映,安装了微软虚拟机Hyper-V的Win10预览版用户无法成功升级Build10532版本,安装过程中会被要求回滚系统。很多朋友在尝试关闭虚拟机之后重启安装程序,结果仍然无法顺...

Win10预览版10532界面兴起“酷黑”风潮

Win10预览版10532的界面改动还是较为明显的,主要体现在右键菜单上面。总体来看,该版本的右键菜单间距更宽,视觉上更大气,操作上更便于触控。具体来说,任务栏右键菜单的变化最为明显。除了增加选项的宽...

Win10预览版10532上手图集(windows10预览版下载)

IT之家讯8月28日,微软今天推送了Win10预览版10532快速版更新,在该版本中,微软主要是加强细节上调整,并且主要是增强Edge浏览器性能等。在Windows10预览版10532中,微软改进了...

Win10预览版10532上手视频亮点演示

IT之家讯8月28日消息,今天凌晨微软向WindowsInsider快速通道用户推送了Win10预览版10532。在Windows10预览版10532中,微软改进了右键菜单,外观更加现代化。另外还...

第二篇 前端框架Vue.js(vue前端框架技术)

前端三大核心是网页开发的基础,Vue则是基于它们构建的“生产力工具”。通俗理解就是HTML是化妆的工具如眉笔,CSS是化妆品如口红,JavaScript是化妆后的互动,而Vue就是化妆助手。有了化妆工...

基于SpringBoot + vue2实现的旅游推荐管理系统

项目描述...

基于Vue以及iView组件的后端管理UI模板——iview-admin

介绍iView-admin是一套后端管理界面模板,基于Vue2.0,iView(现在为ViewUI)组件是一套完整的基于Vue的高质量组件库,虽然Github上有一套非常火的基于ElementUI...

别再说你会SPA开发了,这5个核心你真的搞懂了吗?

前言此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。我们这里指的是在前端开发中的一种模型,叫作单页应用程序,顾名思义,就是整个项目只有一个页面,而页面中的内容是动态的...

React.js Top20面试题(react.js中文官网)

概述作为React开发者,对框架的关键概念和原则有扎实的理解是很重要的。考虑到这一点,我整理了一份包含20个重要问题的清单,每个React开发者都应该知道,无论他们是在面试工作还是只是想提高技能。...

美媒:特朗普签署行政令后,FBI又发现约2400份、总计超14000页涉肯尼迪遇刺案文件

来源:环球时报新媒体1月23日特朗普下令公布肯尼迪遇刺案相关机密文件图源:美媒综合福克斯新闻网和Axios网站10日报道,在总统特朗普签署行政令,要求公布“肯尼迪遇刺案”相关政府机密文件之后,美国...

2021 年 Node.js 开发人员学习路线图

Node.js自发布以来,已成为业界重要破局者之一。Uber、Medium、PayPal和沃尔玛等大型企业,纷纷将技术栈转向Node.js。Node.js支持开发功能强大的应用,例如实时追踪...

取消回复欢迎 发表评论: