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

相关推荐
某人辛木19 小时前
Web前端框架应用(三)路由
前端·javascript·前端框架
进击的丸子2 天前
APP 人脸识别增值版 SDK:Camera2 无缝接入指南
前端·前端框架·代码规范
空中湖2 天前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
行者全栈架构师2 天前
【鸿蒙心迹】让老照片变清晰:HarmonyOS 7.0 图像超分相册工程化落地与 5 个踩坑解法
架构·前端框架·开源
Bug收容所3 天前
Vue+JS Day3
前端·javascript·vue.js·前端框架·1024程序员节
feixing_fx4 天前
CSS Grid 入门:二维布局时代的降维打击
前端·css·前端框架·css3
死磕音视频4 天前
Codex CLI 入门:在终端里让 AI 读懂项目并完成一次小修改
openai·ai编程·命令行·codex
web3d5204 天前
03-从一个点到一张图:Leaflet 加载水利对象 GeoJSON 实战
前端框架·gis
ClouGence6 天前
Playwright 热门替代方案:Cypress、Selenium、CueCast 等 7 款自动化测试工具
前端框架·开源·测试
时间的情敌7 天前
《回顾 2019 前端:React Hooks 问世,前端工程化爆发的一年》
前端·react.js·前端框架