The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何正確設定 Azure Artifacts 的 npm 套件來源 (Feeds)

如果你在 Azure Artifacts 建立一個 npm Registry 讓前端團隊存取私有的 npm 套件,最先需要克服的問題就是要如何通過身分認證,但這部分的設定在 Windows 與在 Linux/macOS 設定步驟是不一樣的,這篇文章將說明如何正確的在 Windows 與 Linux/macOS 進行設定。

image

Windows

在 Windows 設定相對簡單很多,只要安裝一個 vsts-npm-auth 工具,然後執行驗證程序即可,以下是需要設定的 3 個步驟。

  1. 在專案根目錄加入一個 .npmrc 檔案

    如果所有套件都要透過 Azure Artifacts 下載,直接拿 Azure Artifacts 的 Feed 當作 Proxy 來用,那麼你可以這樣設定:

    registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
    always-auth=true
    

    注意: ORGNAMEFEEDNAME 是變數,請依照你的設定來修改!

    如果你的 npm 套件被定義在 scoped package 之下的話,假設你的 scoped package 是 @miniasp,那麼你可以這樣設定:

    registry=https://registry.npmjs.org/
    @miniasp:registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
    always-auth=true
    

    這樣的設定可以讓大部分 npm 套件都從 registry.npmjs.org 取得,只有公司內部的 npm 套件從 Azure Artifacts 取得。

  2. 安裝一個 vsts-npm-auth 認證工具 (Windows only)

    這套 vsts-npm-auth 工具是專門設計給 Windows 使用的,雖然這是一個 npm 套件,但只有 Windows 可以正常執行喔!

    我們先安裝這套工具起來:

    npm install -g vsts-npm-auth
    
  3. 執行驗證程序

    這套 vsts-npm-auth 工具會自動引導你到 Azure AD (Entra ID) 進行登入,而且也支援 MFA 多因素驗證,使用上還算簡單。

    使用方式如下,這裡的 -config 可以指定你的 .npmrc 檔案:

    vsts-npm-auth -config .npmrc
    

    執行時產生的訊息如下:

    vsts-npm-auth v0.42.1.0
    -----------------------
    Getting new credentials for source:https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/, scope:vso.packaging_write vso.drop_write
    

    這個執行過程並不會修改專案下的 .npmrc 檔案的內容,而是將認證資訊儲存在你的 $HOME 目錄下的 ~/.npmrc 檔案中。

    注意:執行認證的過程會自動幫你在 Azure DevOps Service 建立一個 90 天效期的 PAT 權杖(Personal Access Token),這個 PAT 的名稱是 Packaging clients: https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/ on XXXXXXXX,如果你跑很多次的話,就會建立很多份 PAT 權杖。

    這份 PAT 擁有的權限包含了 vso.packaging_writevso.drop_write 這兩個權限,但我從官方的 scopes.md 文件中查不到 vso.drop_write 的說明,不過我很確定 vso.packaging_write 就是可以針對 Artifacts 套件庫進行讀取寫入的權限。

Linux / macOS / Container

在 non-Windows 平台設定也不是多麻煩,就是 PAT 要自己建立而已,以下是需要設定的 4 個步驟。

  1. 在專案加入一個 .npmrc 檔案

    如果所有套件都要透過 Azure Artifacts 下載,直接拿 Azure Artifacts 的 Feed 當作 Proxy 來用,那麼你可以這樣設定:

    registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
    always-auth=true
    

    注意: ORGNAMEFEEDNAME 是變數,請依照你的設定來修改!

    如果你的 npm 套件被定義在 scoped package 之下的話,假設你的 scoped package 是 @miniasp,那麼你可以這樣設定:

    registry=https://registry.npmjs.org/
    @miniasp:registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
    always-auth=true
    

    這樣的設定可以讓大部分 npm 套件都從 registry.npmjs.org 取得,只有公司內部的 npm 套件從 Azure Artifacts 取得。

  2. 人工建立一個 PAT 權杖(Personal Access Token)

    建立 PAT 的時候,除了設定 Name, OrganizationExpiration 欄位外,最重要的就是選擇 Scopes 欄位,記得套用最小權限原則下去設定,並且選擇 Packaging 這個分類下的 Scope,其權限有 Read, Read & writeRead, write, & manage

    建立完 PAT 權杖之後,要記得先把 PAT 權杖的內容複製起來,因為這個 PAT 權杖只會顯示一次,之後就無法再看到了!

  3. 將以下內容加入 ~/.npmrc 檔案中

    ; begin auth token
    //ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/:username=miniasp
    //ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
    //ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/:email=npm requires email to be set but doesn't use the value
    //ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/:username=miniasp
    //ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
    //ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/:email=npm requires email to be set but doesn't use the value
    ; end auth token
    

    上述的 [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] 是我們在下個步驟要替換掉的變數。

  4. 將 PAT 先轉換成 Base64 編碼字串

    你可以使用 Linux 內建的 base64 命令列工具:

    echo 'ljb5cl745ljblllxa4gloj2qkzm44sie7naz7w46funigr6wb5lq' | base64
    

    也可以透過 Node.js 來幫我們轉成 Base64 編碼字串:

    node -e "require('readline') .createInterface({input:process.stdin,output:process.stdout,historySize:0}) .question('PAT> ',p => { b64=Buffer.from(p.trim()).toString('base64');console.log(b64);process.exit(); })"
    

    執行上述命令後會看到 PAT> 提示字元,貼上 PAT 並按下 Enter 鍵,就會看到 PAT 的 Base64 編碼結果,請將這個結果取代掉 ~/.npmrc 檔案中的 [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] 變數。

    我不建議你將這些密碼寫在專案的 .npmrc 檔案中,因為你很有可能會意外的將這些憑證資訊加入到 Git 版控裡,那就不是很理想了。

相關連結

留言評論