用 Docker 安裝 Verdaccio，建立本機私有 npm
Tags: docker, verdaccio, npm, tutorial
Published: 2023-07-28 11:16:32

## 本篇要解決的問題

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

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

---

## 用 Docker 安裝 Verdaccio


### 安裝 Docker Desktop

首先，請先安裝 [Docker Desktop](https://www.docker.com/products/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0u211hg0aylb4stkddw.png)

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

![Verdaccio 首頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gm10tms0ncq6861nkbz.png)

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

```
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 的檔案，內容為：

```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：

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

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

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

再按下 Enter，發佈成功會看到以下訊息：

![發佈 package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsn4wbld7wicpnt5nszd.png)

網頁進到我們的 Verdaccio 頁面，就會看見 package 了：

![say-hello 上傳成功](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4jsqgsz4z86mhr08uo7.png)

### 更新 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 進來就可以使用：

```js
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5giztmtj6of7a19hdywz.png)

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

```
verdaccio/storage/data/package名稱
```

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

---

## 修改 config.yml

config.yml 可以修改的東西很多，詳情可見官方文件：[Configuration File](https://verdaccio.org/docs/configuration)。

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

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

![修改 config.yml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz50w7pjycsuqyizsxcq.png)

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

config.yaml 的檔案，找到 web 開頭的那行：

![找到 Web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eammbz5niqj325rwl5ai.png)

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

```yaml
web:
  title: Lets Write npm
  logo: logo絕對路徑
  favicon: favicon絕對路徑
```

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

![修改 title、logo、favicon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlfmhzgow2rbzompp3dr.png)

---

## 改變 CSS

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

![暗迷摸的程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrvtgami6ymblde5hk41.png)

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

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

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

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

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

![成功改變 CSS 變數](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vb9or362nj46r8gky6n.png)