如何在阿里云服务器搭建属于自己的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进行配置,这里就不加以赘述了。

相关推荐
前端付豪9 小时前
万事从 todolist 开始
前端·vue.js·前端框架
一个处女座的程序猿O(∩_∩)O18 小时前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端·react.js·前端框架
Hy行者勇哥19 小时前
仪表盘设计技术全解析:从前端框架到工业物联网场景的多维度选型指南
物联网·前端框架
歪歪1002 天前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
lapiii3582 天前
快速学完React计划(第一天)
前端·react.js·前端框架
歪歪1002 天前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
代大大2 天前
sciter.js 之cpp使用教程(1)
c++·前端框架
huangyiyi666662 天前
轮询那些事儿
javascript·前端框架·vue·js
im_AMBER2 天前
React 01
前端·javascript·笔记·react.js·前端框架·web