DEV Community

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

Posted on • Updated 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 變數

Top comments (0)