npm Verdaccio

私人NPM伺服器

朱思豪 2019/11/29 15:07:40
45

當我們進行前端開發時,總是避免不了的大量使用 npm 指令安裝套件;不過實際在工作時常會遇到一種狀況就是客戶的環境連不到 internet,這邊會介紹如何使用 Verdaccio 架設私人 NPM 伺服器的方式解決這個問題。

Verdaccio 功能

  • 快取npmjs.org的registry
  • 覆蓋公共套件

    如果要使用某個第三方軟件包的修改版本(例如,您發現了一個錯誤,但維護者尚未接受PR請求),則可以使用相同的名稱在本地發布該版本。

  • 建立私人的npm伺服器

環境需求

安裝 Verdaccio

  • 建立資料夾給 verdaccio 使用

  • verdaccio 資料夾增加package.json檔案

{
  "name": "iisnode-verdaccio",
  "version": "1.0.0",
  "description": "Hosts verdaccio in iisnode",
  "main": "start.js",
  "dependencies": {
    "verdaccio": "^3.11.0"
  }
}
   
  • verdaccio 資料夾增加start.js檔案
process.argv.push('-l', 'unix:' + process.env.PORT, '-c', './config.yaml');
require('./node_modules/verdaccio/build/lib/cli.js');
   
  • 建立 verdaccio 設定檔config.yaml
storage: ./storage
auth:
  htpasswd:
    file: ./htpasswd
    max_users: -1 # Default為1000,改為-1,禁止註冊ㄋ
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    proxy: npmjs
logs:
  - { type: stdout, format: pretty, level: http }
   
  • 安裝 verdaccio 相依套件
cd c:\verdaccio
npm install
  • 新增verdaccio應用程式集區

  • verdaccio 資料夾增加web.config檔案

<configuration>
  <system.webServer>
    <modules>
        <remove name="WebDAVModule" />
    </modules>

    <!-- indicates that the start.js file is a node.js application to be handled by the iisnode module -->
    <handlers accessPolicy="Read, Execute, Script">
            <remove name="WebDAV" />
            <add name="iisnode" path="start.js" verb="*" modules="iisnode" resourceType="Unspecified" requireAccess="Execute" />
            <add name="WebDAV" path="*" verb="*" modules="WebDAVModule" resourceType="Unspecified" requireAccess="Execute" />
    </handlers>

    <rewrite>
      <rules>

        <!-- iisnode folder is where iisnode stores it's logs. These should
        never be rewritten -->
        <rule name="iisnode" stopProcessing="true">
            <match url="iisnode*" />
            <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
            <action type="None" />
        </rule>

        <!-- Rewrite all other urls in order for verdaccio to handle these -->
        <rule name="verdaccio">
            <match url="/*" />
            <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
            <action type="Rewrite" url="start.js" />
        </rule>
      </rules>
    </rewrite>

    <!-- exclude node_modules directory and subdirectories from serving
    by IIS since these are implementation details of node.js applications -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <add segment="node_modules" />
        </hiddenSegments>
      </requestFiltering>
    </security>

  </system.webServer>
</configuration>
  • 確定 IIS 開啟 CGI 功能
  • verdaccio 資料夾增加IIS AppPool\verdaccio寫入權限

  • 新增 verdaccio 站台

  • 確認處理常式對應裡的iisnode是否有勾指令碼\執行權限

  • 開啟瀏覽器確定是否執行成功

    到此處verdaccio環境及安裝基本上已經完成

下載專案會使用到的 node package

由於 verdaccio 有 cache 的功能,所以只要先將 npm 的 registry 指到 verdaccio 後再安裝專案需要的 node package 後,專案所需的 package 就會被 Cache 進 verdaccio 了

  • 修改電腦 npm registry
# http://verdaccio.microsugar.net 請依自己架設的位置修改
npm set registry http://verdaccio.microsugar.net
  • 於前端專案執行npm i
  • 此時可以看到C:\verdaccio\storage下會有專案會用到的Node Package

  • 到此時 Verdaccio server 已經將專案會用到的package快取起來

    • 如將網路斷線,但開發人員的電腦還是可以連到 Verdaccio server 的狀況下,將仍可透過 Verdaccio server 進行npm install
    • 如有需要也可以再有internet環境架設且下載完專案需要用的node package後,進內網且將環境建置後拿外網storage資料夾覆蓋後即可在斷網環境下完成建置

參考資料

朱思豪