用 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

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

安裝 Verdaccio

開啟終端機進入 verdaccio 這個資料夾，輸入：

docker run -it -d --name verdaccio -p 7726:4873 verdaccio/verdaccio

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

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

Verdaccio Container

打開網址，就會看到 Verdaccio 的首頁：

Verdaccio 首頁

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

npm adduser --registry http://192.168.1.154:7726/

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

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

上傳 package

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

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

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

終端機進入資料夾後，輸入：

npm init -y
或
yarn init -y

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

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

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

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

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

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

npm publish --registry http://192.168.1.154:7726

再按下 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

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

import { sayHello } from "say-hello";

sayHello({ name: 'August' });

.npmrc

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

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

registry=http://192.168.1.154:7726

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

刪除 package

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

刪除 package

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

verdaccio/storage/data/package名稱

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

修改 config.yml

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

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

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

修改 config.yaml

資料夾路徑是「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絕對路徑

存檔後再按下 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>'

存檔後按下 Restart，一切又重見光明了：

成功改變 CSS 變數