10分钟搭建私服NPM

最近因为公司项目需要搭建一个私服 npm,安排我来研究,这两天也踩了不少坑,于是记录下踩坑经历,避免小伙伴们踩坑。

私服 npm 能做什么?

如果一个公司的项目非常多,而且有很多的方法、组件、api都是可以共用的。如果没有私服 npm,那么我们将不断的复制粘贴这些代码到各个项目中,一旦其中的某一处需要修改,那么所有的项目都需要改一遍。

更好地维护这些公共代码,比较好的处理方式是将这些公共代码封装成一个个 npm 包,但是我们又不能将公司的代码发布到外网的 npm 中,所以私服 npm 就能够很好地帮助我们解决这一问题。

安装 Nexus

由于之前学习 docker 的时候安装了 Nexus,小伙伴们可以参考之前的文章 使用 Nexus 创建 Docker 仓库,这里不再过多赘述。

$ docker run -d --name nexus3 --restart=always \

   -p 8081:8081 \

   -p 8082:8082 \

   -v nexus-data:/nexus-data \

   sonatype/nexus3

Unable to find image 'sonatype/nexus3:latest' locally

latest: Pulling from sonatype/nexus3

c65691897a4d: Pull complete

641d7cc5cbc4: Pull complete

c508b13320cd: Pull complete

79e3bf9d3132: Pull complete

Digest: sha256:2c33632ccd8f8c5f9023a3d7f5f541e271833e402219f8c5a83a29d1721457ca

Status: Downloaded newer image for sonatype/nexus3:latest

f637e039214978f8aac41e621e51588bd8cd8438055498c4060fbaf87799e64f

如果你已经安装了 docker,可以使用上面的命令安装并启动 Nexus 服务。否则需要到官网 https://www.sonatype.com/download-oss-sonatype 下载 Nexus。因为使用 docker 更加方便快捷,这里更推荐使用 docker 的方式启动 Nexus 服务。

命令执行完后,用浏览器打开 http://localhost:8081 即可看到 Nexus 的管理页面。点击右上角 Sign In 登录,管理员账号 admin,初始密码可以根据提示进入容器内查看。

$ docker exec -it f637 /bin/bash

bash-4.4$ vi /nexus-data/admin.password

其中 f637 为容器 id,需要根据启动 nexus 的容器 id 进行修改。

创建 npm 仓库

打开设置 -> repositories 页面,点击 Create repository 按钮。

image.png

先创建 npm(proxy) 仓库,即代理仓库

填入仓库名以及代理地址,代理地址可使用 npm 官方镜像地址 https://registry.npmjs.org

image.png

完成后点击底部 Creaete repository 完成创建。

创建 npm(hosted) 仓库,即私服仓库

image.png

输入仓库名即可点击底部 Creaete repository 完成创建。

创建 npm(group) 仓库,npm 组

为什么要使用 npm(group) ?

当我们从 npm(group) 这个仓库安装 npm 包时,首先会查看该仓库中是否存在,不存在时则会使用代理仓库到官方仓库进行下载。

image.png

创建 npm(group) 需要填写仓库名,然后将 npm(proxy) 和 proxy(hosted) 设置为成员即可,点击底部 Creaete repository 完成创建。

验证私服 npm

$ npm install vue --registry=http://localhost:8081/repository/npm-group/

npm ERR! code E401

npm ERR! 401 Unauthorized: vue@latest

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/admin/.npm/_logs/2019-12-24T08_33_14_088Z-debug.log

可以看到出现了 401 未授权的错误,因为我们的 npm 没有登录私服。

原有的 npm 是可以不登录进行安装 npm 包的,所以我们的私服也需要改成允许匿名访问的。

打开设置页面 Security -> Anonymous,勾选 Allow anonymous users to access the server 即可,点击 save 保存。(网上的文章基本都跳过该步骤)

$ npm install vue --registry=http://localhost:8081/repository/npm-group/

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN npm-test@1.0.0 No description

npm WARN npm-test@1.0.0 No repository field.

+ vue@2.6.11

added 1 package from 1 contributor in 2.944s

可以看到这次就安装成功了。

但是每次都需要指定 --registry 也太麻烦了,我们可以使用 npm config set registry http://localhost:8081/repository/npm-group/, 将 npm 默认的镜像改成我们私服的镜像。这样我们就不需要每次都指定镜像源了。

直接修改默认的镜像源也不够方便,因为发包的时候使用的镜像源是 http://localhost:8081/repository/npm-hosted/。最好的方式是写一个自己的 cnpm。

因此我写了一个为私服 npm 使用工具 fnpm 在 github,小伙伴们可以到 https://github.com/AD-feiben/fnpm 上克隆。在使用上与 npm 一样,但是会从私服上拉取 npm 包,发布包也只会发布到私服中。

使用 fnmp

首先将 fnpm 克隆到本地

$ git clone git@github.com:AD-feiben/fnpm.git

根据私服 npm 地址修改 lib/config.js 中 fnpmRegistry、fnpmHostedRegistry 对应的地址即可。

将 fnpm 发布到私服,参考下文使用 npm 命令发布包。

使用 npm install fnpm --registry=http://localhost:8081/repository/npm-group/ -g 下载 fnpm。

接下就可以使用 fnpm 了。

发布 npm 包到私服

首先登录私服 npm

$ npm login --registry=http://localhost:8081/repository/npm-hosted/

# or

# 如果安装了 fnpm

$ fnpm login

使用 publish 命令发布

$ npm publish --registry=http://localhost:8081/repository/npm-hosted/

# or

# 如果安装了 fnpm

$ fnpm publish

如果文中有说的不对的地方,欢迎留言指出改正,也欢迎留言讨论。



本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):