原创

组件库私服-前端私服-通过docker部署verdaccio-只支持npm pnpm yarn包

1. 说明

verdaccio 6.x需要比较新的docker版本才能启动
verdaccio 5.x支持比较老的docker版本（比如2017年发布的1.13.1版本）

2. 制作verdaccio镜像

通过第三方docker代理网站下载镜像

更多docker代理地址见《缓存-redis stack-在centos 7 安装redis stack-yum方案-docker代理方案-最全docker代理地址-含docker导入导出》

高版本docker专用（实际会下载verdaccio 6.7.1版本）
docker pull docker-0.unsee.tech/verdaccio/verdaccio:latest
docker pull docker.1ms.run/verdaccio/verdaccio:latest

低版本docker（V1.13.1）专用
docker pull docker-0.unsee.tech/verdaccio/verdaccio:5.28.0

查看最近版本的版本号

docker inspect docker-0.unsee.tech/verdaccio/verdaccio:latest | grep -i version  
docker inspect docker.1ms.run/verdaccio/verdaccio:latest | grep -i version

"DockerVersion": "",
        "NODE_VERSION=24.15.0",
        "YARN_VERSION=1.22.22",
        "org.opencontainers.image.version": "6.7.1"

制作明确版本号的镜像并导出

docker tag docker.1ms.run/verdaccio/verdaccio:latest verdaccio:6.7.1
docker save verdaccio:6.7.1 -o /home/docker/verdaccio-6.7.1.jar

下载镜像(xshell软件专用)

sz /home/docker/verdaccio-6.7.1.jar

备份位置：

D:\办公\入职软件-一般可以放在公司的电脑上备份\软件\0-港能文件\verdaccio-前端mpn仓库私服 及 服务器：/j-deploy/packages/docker-image-verdaccio-前端私服-后期需要备份

删除镜像（可选）：

docker rmi docker-0.unsee.tech/verdaccio/verdaccio
docker rmi docker.1ms.run/verdaccio/verdaccio:latest

3. 导入verdaccio镜像并启动容器

导入镜像

docker load < verdaccio-6.7.1.jar

创建存放数据的文件夹 (配置、npm 包存储、verdaccio插件)

mkdir -p /home/docker/verdaccio/{conf,storage,plugins}

写入配置

verdaccio 默认同版本号禁止覆盖，修改2个publish: \$authenticated为 overwrite 可覆盖，注意配置如果存在重复，就有cannot open config file /verdaccio/conf/config.yaml: false，有问题，又会提示 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to. ,还是用 --force 参数吧

cat > /home/docker/verdaccio/conf/config.yaml << EOF
storage: /verdaccio/storage
plugins: /verdaccio/plugins

web:
  title: Verdaccio

auth:
  htpasswd:
    file: /verdaccio/conf/htpasswd
    algorithm: bcrypt

uplinks:
  npmjs:
    url: https://registry.npmmirror.com/

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

  '**':
    access: \$all
    publish: \$authenticated
    unpublish: \$authenticated
    proxy: npmjs

server:
  port: 4873
  host: 0.0.0.0

middlewares:
  audit:
    enabled: true

log:
  - {type: stdout, format: pretty, level: http}
EOF

查看配置并授权

cat /home/docker/verdaccio/conf/config.yaml
chown -R root:root /home/docker/verdaccio

启动容器

删除容器(可选)
docker stop verdaccio && docker rm verdaccio 

#不加--user root实际上传会失败，加了日志启动会有一条警告
docker run -d \
  --name verdaccio \
  -p 0.0.0.0:4873:4873 \
  -v /home/docker/verdaccio/conf:/verdaccio/conf \
  -v /home/docker/verdaccio/storage:/verdaccio/storage \
  -v /home/docker/verdaccio/plugins:/verdaccio/plugins \
  --user root \
  --log-driver json-file \
  --log-opt max-size=10m \
  --log-opt max-file=3 \
  verdaccio:6.7.1 #高版本docker专用
  verdaccio:5.28.0 #低版本docker专用

#相关常用脚本
docker restart verdaccio #只改配置可以直接重启
docker ps -a | grep verdaccio
docker logs -f verdaccio
docker exec -it verdaccio sh

4. 发布组件到私服

先准备好《共用前端测试工程.md》组件库

# 1. 设置 registry 为你的私服
npm config set registry http://192.168.1.10:4873

# 2. 登录私服
# 这是注册并登录 jiangjiesheng/123456
npm adduser --registry http://192.168.1.10:4873
# 单登录
npm login --registry http://192.168.1.10:4873

# 3. 发布组件
# 发布成功后，浏览器刷新 http://192.168.1.10:4873 就能看到组件
npm publish

# 覆盖冲突版本：
pnpm unpublish @gn-team/my-button@1.0.0 --force
pnpm unpublish @gn-team/my-button@1.0.0 --force --registry http://192.168.1.10:4873
pnpm publish

5. 从私服下载组件和代理公网组件

先准备好《共用前端测试工程.md》

设置或切换仓库源
# 0. 本地清理缓存
npm config delete registry
npm config delete //192.168.1.10:8081/repository/npm-hosted/:_authToken
npm config delete //192.168.1.10:8081/repository/npm-hosted/:_authToken
npm cache clean --force

# 1. 切换到 Nexus 私服地址
npm config set registry http://192.168.1.10:8081/repository/npm-group/

# 2. 登录
npm login --registry http://192.168.1.10:8081/repository/npm-hosted/ 临时
    admin/admin123
# 3. 发布
npm publish --registry http://192.168.1.10:8081/repository/npm-hosted/ 临时

# 4.页面查看
http://192.168.1.10:8081/repository/npm-group/
http://192.168.1.10:8081/repository/npm-hosted/

如果涉及到切换仓库源，需要清理本地缓存：
    尤其是Verdaccio，如果Verdaccio通过先unpublish，再publish发布同一个版本时，调用方需要先清理缓存，（Nexus因为后台仔细设置覆盖，所以不用手动执行更新）：

    pnpm store prune （可以后期可以测试部执行可行）
    if (Test-Path node_modules/.vite ) { Remove-Item -Force -Recurse node_modules/.vite }
    或
    在启动脚本加 --force  【**关键，否则即使node_modules下的组件是最新的，但是最终启动还是使用老的包**】
        "scripts": {
            "dev": "vite --force",
            "build": "vite build",
            "preview": "vite preview"
        },

    pnpm remove @gn-team/my-button
pnpm install @gn-team/my-button  --no-cache 
pnpm install @gn-team/my-button --registry http://192.168.1.10:4873 --no-cache

测试安装公共组件（会经过私服代理）
npm install axios element-plus

整体安装package.json依赖
pnpm install

恢复官方 npm 源(根据需要)
npm config set registry https://registry.npmmirror.com

启动调试
npm run dev
            You are using Node.js 20.10.0. Vite requires Node.js version 20.19+ or 22.12+. Please upgrade your Node.js version.


            if (Test-Path package-lock.json) { Remove-Item -Force package-lock.json }
            if (Test-Path pnpm-lock.yaml) { Remove-Item -Force pnpm-lock.yaml }
            if (Test-Path yarn.lock) { Remove-Item -Force yarn.lock }
            if (Test-Path node_modules) { Remove-Item -Recurse -Force node_modules }

            pnpm install vite@5.4.10 @vitejs/plugin-vue@4.6.2 --save-dev
            pnpm install
            pnpm run dev
访问：
    http://localhost:5173/

正文到此结束

所属分类：运维

本文标签： 组件库仓库私服
本文链接： https://code.jiangjiesheng.cn/article/380
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。