前端架構之路（7） - 私有 npm 倉庫

私有 npm 倉庫

1. 「私有 npm 倉庫」 有何用

組件化以後，搭建 「私有 npm 倉庫」 是個不錯選擇。

私有 npm 倉庫可讓咱們使用組件就像 npm 官方倉庫裏的包同樣方便。

通常私有 npm 倉庫有如下一些特性：

• 私有包託管在內部服務器或者單獨的服務器上；
• 能夠同步整個官方倉庫，也能夠只同步須要的；
• 下載的時候，可讓公共包走公共倉庫，私有包走私有倉庫；
• 能夠緩存下載過的包；
• 對於下載，發佈，有對應的權限管理。

目前比較好的解決方案有兩種：

1. sinopia（verdaccio）
2. cnpm + cnpmjs.org

2. sinopia（verdaccio）

sinopia 在15年的時候就中止更新了，繼而由 verdaccio 提供更新升級，因此二者用法基本上都是一致的，如下都以 sinopia 爲例說明。

2.1 安裝

$ npm install -g sinopia

2.2 配置

配置文件位於 ~/.config/sinopia/config.yaml 中

# path to a directory with all packages
storage: /home/{user}/.local/share/sinopia/storage # 庫存路徑，須要考慮磁盤空間

web: # 自定義web項，即瀏覽器訪問頁面
  title: Sinopia

auth:
  htpasswd:
    file: ./htpasswd # 添加用戶（npm adduser）後自動建立，保存用戶信息，能夠初始化用戶

uplinks: # 能夠配置多個上游地址，後面packages中的proxy指定用哪一個
  npmjs:
    url: https://registry.npm.taobao.org/ # 更改此上游地址

packages: # 包的權限管理，$all爲全部人，$authenticated爲經過驗證人
          # 分佈和安裝兩種權限，值能夠特指某幾人
  '@*/*': # 跟package.json中的name屬性進行匹配
    # scoped packages
    access: $all
    publish: $authenticated

  '*':
    access: $all

    publish: $authenticated

    proxy: npmjs

logs:
  - {type: stdout, format: pretty, level: http}

listen: 0.0.0.0:4873 # 設置監聽地址，0.0.0.0匹配本機地址

更多配置參考 sinopia

2.3 設置 npm registry 屬性

$ npm config set registry http://{服務器ip}:4873/

推薦使用 nrm 來快速切換 npm registry 配置。

2.4 運行

sinopia

或者使用 pm2 永久運行

pm2 start sinopia

如今你就能夠發佈私有包了。

3. cnpm + cnpmjs.org

sinopia 的優勢是配置簡單，對環境依賴少（僅 node 就夠了），而且支持 windows 系統下運行。

但它也有缺點，主要是如下幾點：

• 權限管理比較弱，對用戶權限，發佈權限，下載權限控制不是很駕輕就熟；
• 緩存優化不足，常常會在安裝共有包的時候處於掛起狀態；
• 不能作官方倉庫的鏡像。

因此，sinopia 比較適合我的搭建在本地做爲 npm 緩存，這樣，安裝過的包會直接從緩存中獲取，加快安裝速度。

對於企業級的應用來講，就須要另一個解決方案了：cnpm + cnpmjs.org

環境依賴：

• node >= 4.3.1
• linux（不支持 windows）
• 數據庫（mysql, sqlite, MariaDB, PostgreSQL）

3.1 安裝

$ npm install -g cnpm
$ npm install -g cnpmjs.org

3.2 配置

配置文件位於 ~/.cnpmjs.org/config.json 中

{
  "debug": false, // 是否啓動 debug 模式
  "enableCluster": true, // 是否啓用 cluster 模式
  "mysqlServers": [ // 數據庫配置，以 mysql 爲例
    {
      "host": "host",
      "port": 3306,
      "user": "user",
      "password": "password"
    }
  ],
  "mysqlDatabase": "cnpmjs", // 數據庫名
  "enablePrivate": true, // 是否啓用私有化，這樣只有定義在 `admins` 中的用戶才能發佈
  "admins": { // 管理員配置，能夠配置多個
    "senntyou": "jiangjinbelief@163.com"
  },
  "syncModel": "exist", // 同步模式
  "scopes": [ // 包前綴，若是不是以這個前綴命名的包將不能發佈，能夠配置多個
    "@test"
  ],
  "registryHost": "http://your.company.npm.registry.com", // 你的服務器對應的 npm registry 地址
  "sourceNpmRegistry": "https://registry.npm.taobao.org" // 若是在該倉庫中找不到的包，會上游到哪裏去找
}

更多配置參考 cnpmjs.org config

3.3 設置 cnpm registry 屬性

$ cnpm config set registry http://your.company.npm.registry.com

3.4 運行

cnpmjs.org start

運行的時候將會開啓兩個端口：7001（registry），7002（web）。

7001（registry）

用來在命令行發佈，下載包等對用的遠程 registry 地址。好比一些比較經常使用的 registry 地址：

• npm: https://registry.npmjs.org/ npm 官方倉庫地址
• cnpm: http://r.cnpmjs.org/ cnpmjs.org 官方倉庫地址
• taobao: https://registry.npm.taobao.org/ 淘寶 NPM 鏡像

用 nginx 配置 url 地址到 7001 端口：

server {
    listen 80;
    listen [::]:80;

    server_name your.company.npm.registry.com;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:7001;

    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;
}

重啓 nginx，如今你就能夠經過 http://your.company.npm.registry.com 去發佈私有包到這個倉庫裏了（若是沒有其餘問題的話）。

7002（web）

用來在 web 端查看倉庫信息，搜索包，包信息等。好比一些比較經常使用的地址：

• npm 官方
• cnpmjs.org 官方
• 淘寶 NPM 鏡像

用 nginx 配置 url 地址到 7002 端口：

server {
    listen 80;
    listen [::]:80;

    server_name your.company.npm.com;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:7002;

    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;
}

重啓 nginx，如今你就能夠經過 http://your.company.npm.com 訪問倉庫web頁面了（若是沒有其餘問題的話）。

永久運行

若是僅經過 cnpmjs.org start 運行，一旦關閉終端，程序就會中止運行。推薦使用 screen 命令開啓永久運行，能夠經過 Linux screen 瞭解下這個命令的用法。

# 建立一個名爲 cnpmjs 的窗口
$ screen -S cnpmjs

# 運行程序
$ cnpmjs.org start

# 按Ctrl+a，而後再按d，離開當前窗口，而程序不會終止
Ctrl+a+d

# 從新進入 cnpmjs 的窗口，作更多的操做
$ screen -r cnpmjs

4. 後續

上一篇：組件化

下一篇：單頁面應用（SPA）、按需加載

參考文章：

1. 用sinopia在linux系統中搭建npm私有庫

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）