DEV Community

Cover image for 用 Docker 安裝 Verdaccio,建立本機私有 npm
Let's Write
Let's Write

Posted on • Edited on • Originally published at letswrite.tw

用 Docker 安裝 Verdaccio,建立本機私有 npm

本篇要解決的問題

最近工作上刻了一套 UI,又寫了幾個可以共用的 JS 檔,問題點在於,有多個專案要用這套 UI,這些 JS 檔也可以直接搬去其他專案上使用。為了讓其他前端方便共用,也為了避免更新一個專案上的 JS 後,還得手動複製貼上到其他專案,就決定找一個可以在本機安裝 npm 的方式,問了 ChatGPT,就得到 Verdaccio 這個答案。

用 Docker 安裝 Verdaccio 的方式很簡單,下幾個命令就可以安裝完成,本篇會簡單記錄這二天使用 Verdaccio 時的一些筆記。


用 Docker 安裝 Verdaccio

安裝 Docker Desktop

首先,請先安裝 Docker Desktop

新增「verdaccio」、「config.yml」

先新增一個資料夾「verdaccio」。

建立一個檔案「config.yml」,因為本篇的目標是同一個區網下的前端大大們能共同使用,所以要先知道自己的本機 IP。

比方 August 的本機 IP 是:192.168.1.154。

那 config.yml 裡面只需要寫上一行:

listen: 192.168.1.154
Enter fullscreen mode Exit fullscreen mode

這樣等等安裝好 Verdaccio 後,就不會是 localhost 而是 192.168.1.154。

安裝 Verdaccio

開啟終端機進入 verdaccio 這個資料夾,輸入:

docker run -it -d --name verdaccio -p 7726:4873 verdaccio/verdaccio
Enter fullscreen mode Exit fullscreen mode

7726 這個 Port 是拿來當範例用的,大家可以換成自己要的 Port。

按下 Enter 後,大概 1 秒的時間,Container 就建立完成:

Verdaccio Container

打開網址,就會看到 Verdaccio 的首頁:

Verdaccio 首頁

在首頁上可以看到,建立使用者的命令是:

npm adduser --registry http://192.168.1.154:7726/
Enter fullscreen mode Exit fullscreen mode

終端機輸入並按下 Enter,接著依序要輸入帳號、密碼、信箱,輸入完使用者便建立完成,可以點擊右上角的「LOGIN」進行登入。

以上,Verdaccio 便安裝完成,如果其他前端大大點了網址卻進不去,請記得把防火牆打開。


上傳 package

接著來示範如何上傳 package 到 Verdaccio 上。

比方我們要共用的是 say-hello 這個 package。

建立一個「say-hello」的資料夾。

終端機進入資料夾後,輸入:

npm init -y
或
yarn init -y
Enter fullscreen mode Exit fullscreen mode

接著會看到新增了一個 package.json 的檔案,內容為:

{
  "name": "say-hello",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
Enter fullscreen mode Exit fullscreen mode

main 的主要 JS 檔可以修改,比方我們如果使用的 JS 檔叫 sayHello.js,那就可以把 index.js 換成 sayHello.js。

這邊 August 就建一個 sayHello.js 的檔案,內容就一個簡單的 console.log:

export const sayHello = ({ name }) => {
  return console.log(`Hello ${name}`);
}
Enter fullscreen mode Exit fullscreen mode

最後我們要把這個資料夾發佈到 Verdaccio 上,終端機輸入:

npm publish --registry http://192.168.1.154:7726
Enter fullscreen mode Exit fullscreen mode

再按下 Enter,發佈成功會看到以下訊息:

發佈 package

網頁進到我們的 Verdaccio 頁面,就會看見 package 了:

say-hello 上傳成功

更新 package

之後如果 sayHello.js 有更新,發佈上 Verdaccio 的命令是一樣的,但是要記得,package.json 裡的 version 要更新,不然 Verdaccio 會不給上傳。


使用 package

假設今天其他前端大大要安裝 say-hello 這個 package,安裝的命令後面要加上我們的本機 IP:

npm install -D say-hello --registry http://192.168.1.154:7726
或
yarn add -D say-hello --registry http://192.168.1.154:7726
Enter fullscreen mode Exit fullscreen mode

安裝完後,一樣是會收在 node_modules 的資料夾中,我們簡單的 import 進來就可以使用:

import { sayHello } from "say-hello";

sayHello({ name: 'August' });
Enter fullscreen mode Exit fullscreen mode

.npmrc

如果只想要跟一般安裝 npm package 一樣,不想每次後面都多輸入「--registry http://192.168.1.154:7726」這一串,方法很簡單。

在要使用 Verdacco 的專案根目錄下,新增一個檔案「.npmrc」,裡面寫上一行:

registry=http://192.168.1.154:7726
Enter fullscreen mode Exit fullscreen mode

這樣預設我們使用 npm install 或 yarn add 時,會先從我們的本機 IP 去找,找不到會再去 npm 官方資源上找。


刪除 package

要刪除 package,August 的方式是……直接從 Docker Desktop 的介面上,點進 Container 去刪,像這樣:

刪除 package

進到 Container 後,點擊「Files」看原始檔,路徑是:

verdaccio/storage/data/package名稱
Enter fullscreen mode Exit fullscreen mode

對著 package 的資料夾點右鍵,就會出現「Delete」的選項,點擊後就刪除了。


修改 config.yml

config.yml 可以修改的東西很多,詳情可見官方文件:Configuration File

這邊示範怎麼修改頁面的 title、logo、favicon。

一樣,直接從 Docker Desktop 的介面上,點進 Container 去改,像這樣:

修改 config.yml

資料夾路徑是「verdaccio/conf/config.yaml」,對檔案點右鍵,會出現「Edit file」,點擊後就可以編輯檔案,等我們改完,儲存後,再按下右上角 Restart 的按鈕,重新整理頁面就可以看到。

config.yaml 的檔案,找到 web 開頭的那行:

找到 Web

config.yaml 上所有可設定的東西,註解上都有說明了,這邊示範修改 title 跟加上 logo、favicon:

web:
  title: Lets Write npm
  logo: logo絕對路徑
  favicon: favicon絕對路徑
Enter fullscreen mode Exit fullscreen mode

存檔後再按下 Restart,回到 Verdaccio 的頁面,就會看到改變了:

修改 title、logo、favicon


改變 CSS

因為實際使用時,通常會寫 README.md 檔案來說明,可是 August 看到有程式碼的部份是這樣:

暗迷摸的程式碼

一整個就是暗迷摸的程式碼,不說以為是在辨識工程師是不是色盲。

研究了一下怎麼改變 CSS,問了 ChatGPT、Bard 後,好像很麻煩,畢竟也只想改變一個變數而已,為了這一行而花時間裝 Plugin 很費工,就決定用最簡單的方式……改 config.yaml。

一樣到我們上一步進到的 config.yaml 檔,找了一下,可以接受 <style> 標籤的,是 scriptsBodyAfter 這個地方,因此寫上:

scriptsBodyAfter:
    - '<style>@media (prefers-color-scheme: dark) { .markdown-body { --color-canvas-subtle: #f1f1f1; } }</style>'
Enter fullscreen mode Exit fullscreen mode

存檔後按下 Restart,一切又重見光明了:

成功改變 CSS 變數

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay