如何在阿里云服务器搭建属于自己的Verdaccio呢?

背景

最近在封装自己的组件的时候,发现所有的项目都需要应用一个组件的时候,需要每一个组件CV大法,但这在一定程度上加大了维护的成本,后期一个项目优化,其他项目需要同步升级。查阅了大量资料,学习了一下verdaccio的部署。

流程

这里我的阿里云服务器使用的是CentOS的系统,所以这里使用命令行进行配置。

首先我们需要在新的系统上安装node环境,文件下载在/usr/local下,命令如下:
sh 复制代码
cd /usr/local
// 下载所需版本
wget https://nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64.tar.gz
// 解压
tar -zxvf node-v14.15.1-linux-x64.tar.gz 
// 重命名文件夹
mv node-v14.15.1-linux-x64 node-v14.15.1
添加环境变量,刷新配置信息
sh 复制代码
// 编辑环境变量配置
vi /etc/profile
// 在文件最下面加入下面的配置
export NODE_HOME=/usr/local/node-v14.15.1
export PATH=$PATH:$NODE_HOME/bin
// 刷新配置信息
source /etc/profile

这里我们可以使用node -vnpm -v查看安装的node是否成功。为了加快包资源的下载速度,我们可以切换镜像源npm config set registry "https://registry.npm.taobao.org"

在服务器全局安装verdaccio
sh 复制代码
npm install -g verdaccio --unsafe-perm
进入verdaccio配置目录,修改配置信息
sh 复制代码
cd /root/.config/verdaccio

在配置文件底部加上listen: 0.0.0.0:4873,使其可在外网访问

开放4873端口,使其能够通过ip+端口的形式进行浏览器访问
sh 复制代码
firewall-cmd --state  // 先查看防火墙状态,
service firewalld start  // 开启防火墙
firewall-cmd --zone=public --add-port=4837/udp --permanent
firewall-cmd --zone=public --add-port=4837/tcp --permanent // 开放4873端口
firewall-cmd --reload // 重新载入
firewall-cmd --zone=public --query-port=4873/tcp  // 查看是否添加成功

如果返回的是yes,说明端口开通成功。

这时候,服务器上的配置就配好了,我们可以开启verdaccio了
sh 复制代码
verdaccio
我通过ip+端口号的方式,并没有进入自己预想中的页面,这是因为我们需要在阿里云的访问规则添加我们的4837端口,添加方式如下:

到这里,我们可以再重新请求一下试试,这里是请求成功了。

但是还有一个问题就是,启动verdaccio之后,我们的控制台无法进行其他操作,如果打断,我们的verdaccio服务也就无法访问了。这时候我们就需要引入进程守护了,我这里使用pm2进行托管。
sh 复制代码
npm install -g pm2 --unsafe-perm // 全局安装pm2
pm2 start `which verdaccio` // 通过pm2启用verdaccio

控制台效果如下:

注册用户信息,注册verdaccio
sh 复制代码
npm adduser --registry http://192.168.XX.XX:4873

这时候,我们就有了发布包的权限了,当然如果你要限制用户注册,可以根据verdaccio官方提供的API进行配置,这里就不加以赘述了。

相关推荐
有来技术11 小时前
解决 “crypto.hash is not a function”:Vite 从 6.x 升级至 7.x 后 `pnpm run dev` 报错问题
前端框架
jingling55520 小时前
Git 常用命令指南:从入门到高效开发
前端·javascript·git·前端框架
CodeCraft Studio1 天前
DHTMLX重磅发布React Scheduler组件,赋能日程管理开发!
前端·react.js·前端框架·dhtmlx·调度·scheduler·排程
IPFLY代理专家1 天前
Linux设置动态IP的三种方法:图文+命令行实操详解
linux·前端框架
前端小咸鱼一条2 天前
React的介绍和特点
前端·react.js·前端框架
用户84913717547162 天前
vue-element-plus-admin 第7期|主题实战:主题定制与国际化
前端框架·前端工程化
野区小女王2 天前
react调用接口渲染数据时,这些表格里的数据是被禁选的
前端·react.js·前端框架
濮水大叔2 天前
Prisma不能优雅的支持DTO,试试Vona ORM吧
前端框架·node.js·orm
用户15186530413842 天前
从传统办公软件到云协作Flash Table AI分钟级生成表单,打造企业远程高效率办公的利器
前端·后端·前端框架
chancygcx_2 天前
前端框架Vue3(二)——Vue3核心语法之OptionsAPI与CompositionAPI与setup
vue.js·前端框架