天天看點
傳回

dependency track前端項目漢化

作者：一點鑫得

dependency track是OWASP組織個一個開源項目，它可以實時分析依賴元件并識别漏洞，降低團隊軟體元件供應鍊的使用風險。《使用開源dependency track建立開源元件分析管理平台》一文詳細介紹了工具的使用方法，本文介紹如何将前端頁面進行漢化并重新建構鏡像運作。

拉取代碼

首先從github拉取前端代碼，如果拉取速度太慢的話，可以先從gitee導入github項目，再進行克隆，實測可以提速不少。

git clone https://github.com/DependencyTrack/frontend.git

生成cn.json

依據src/i18n/locales/en.json，編寫python腳本調用百度翻譯提供的api将其中的value值翻譯成中文，自動生成cn.json儲存到src/i18n/locales目錄下，部分機器翻譯不合理的手工進行調整。

python腳本參考：

# -*- coding: utf-8 -*-

# This code shows an example of text translation from English to Simplified-Chinese.
# This code runs on Python 2.7.x and Python 3.x.
# You may install `requests` to run this code: pip install requests
# Please refer to `https://api.fanyi.baidu.com/doc/21` for complete api document

import requests
import random
import json
from hashlib import md5
import time

# Set your own appid/appkey.
appid = '這裡填寫自己的百度翻譯的appid'
appkey = '這些填寫自己的百度翻譯的appkey'

# For list of language codes, please refer to `https://api.fanyi.baidu.com/doc/21`
from_lang = 'en'
to_lang =  'zh'

endpoint = 'http://api.fanyi.baidu.com'
path = '/api/trans/vip/translate'
url = endpoint + path


# Generate salt and sign
def make_md5(s, encoding='utf-8'):
    return md5(s.encode(encoding)).hexdigest()

salt = random.randint(32768, 65536)

# 讀取en.json，en.json和腳本放在同一目錄
with open('en.json', encoding='utf-8') as f:
    en_json =  f.read()

en_object = json.loads(en_json)
for k,v in en_object.items():
    for k1, v1 in v.items():
        query = v1
        sign = make_md5(appid + query + str(salt) + appkey)

        # Build request
        headers = {'Content-Type': 'application/x-www-form-urlencoded'}

        payload = {'appid': appid, 'q': query, 'from': from_lang, 'to': to_lang, 'salt': salt, 'sign': sign}

        # Send request
        r = requests.post(url, params=payload, headers=headers)
        result = r.json()
        en_object[k][k1] = result["trans_result"][0]['dst']
        print(k, k1, result["trans_result"][0]['dst'])
        time.sleep(1)
        
# 生成cn.json
with open('cn.json', encoding='utf-8', mode='w') as f:
    f.write(json.dumps(en_object, indent=4, ensure_ascii=False))

修改配置

修改.env.development将其中的en修改為cn，如果正式環境也需要漢化還需要修改.env檔案配置。

VUE_APP_I18N_LOCALE=cn
VUE_APP_I18N_FALLBACK_LOCALE=cn

如果需要連接配接後端服務進行調測，可能還需要修改vue.config.js中的devServer的配置，用于連接配接dependency track的後端服務，正式釋出前需要恢複原有配置。

devServer: {
    proxy: { "/api": { target: "http://192.168.30.81:8081" } }
},

安裝依賴

npm install指令安裝依賴，注意安裝過程可能會報錯，比如安裝過程中我遇到vue-easy-pie-chart元件安裝報錯的問題，猜測一般都是網絡原因導緻的，我也沒有太好的辦法，多重試一次，也可以嘗試直接通過npm官網查找該元件的安裝方法，單獨安裝報錯的元件（npm i vue-easy-pie-chart）。

# Install dependencies
npm install

開發環境調測

由于僅增加了漢化功能，調測主要是檢查頁面是否正常顯示中文，以及針對中文翻譯不合理的地方進行修正。

# Serve with hot reload at localhost:8080
npm run serve

打包

執行npm run build指令進行打包，成功後會生成dist目錄，即為打包好的前端代碼，這時隻要在dist目錄開啟web服務就可以通路前端頁面了。

# Build for production with minification
npm run build

提示：執行可能會遇到下面的錯誤，網上搜尋說是由于版本原因導緻的，powershell下執行指令$env:NODE_OPTIONS="--openssl-legacy-provider"後再次執行npm run build可以成功打包

dependency track前端項目漢化

生成docker鏡像并釋出

代碼中的release.sh腳本用來打包、建構鏡像、釋出代碼和鏡像到github、docker hub，我隻打算本地使用，是以直接使用docker build指令進行建構鏡像，完整指令如下：

docker build --no-cache --pull -f docker/Dockerfile.alpine -t pepperpapa/dependencytrack/frontend:latest .

提示：這裡需要說明的是，建構docker鏡像時fetch http://dl-cdn.alpinelinux.org/alpine/v3.7/main/x86_64/APKINDEX.tar.gz 步驟因為伺服器在國外的緣故可能會逾時， 解決辦法是修改docker/Dockerfile.alpine檔案，在USER root指令之後添加下面的指令，修改為國内鏡像源

USER root
# 添加國内鏡像源
RUN echo -e http://mirrors.ustc.edu.cn/alpine/v3.7/main/ > /etc/apk/repositories

鏡像建構成功過程日志

[admin@localhost frontend]$ docker build --no-cache --pull -f docker/Dockerfile.alpine -t pepperpapa/dependencytrack/frontend:latest .
Sending build context to Docker daemon  6.969MB
Step 1/14 : FROM nginxinc/nginx-unprivileged:1.23.3-alpine@sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad
docker.io/nginxinc/nginx-unprivileged:1.23.3-alpine@sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad: Pulling from nginxinc/nginx-unprivileged
Digest: sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad
Status: Image is up to date for nginxinc/nginx-unprivileged:1.23.3-alpine@sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad
 ---> 67cc64b7f910
Step 2/14 : ARG COMMIT_SHA=unknown
 ---> Running in 60e83a3c4e6c
Removing intermediate container 60e83a3c4e6c
 ---> 9b417d82f526
Step 3/14 : ARG APP_VERSION=0.0.0
 ---> Running in bb2d24739062
Removing intermediate container bb2d24739062
 ---> d8987bd5eddf
Step 4/14 : ARG APP_DIR=/opt/owasp/dependency-track-frontend/
 ---> Running in 72e2d1f42712
Removing intermediate container 72e2d1f42712
 ---> 814ae29804e7
Step 5/14 : ENV TZ=Etc/UTC     LANG=C.UTF-8     OIDC_SCOPE="openid profile email"
 ---> Running in f30c75a9382a
Removing intermediate container f30c75a9382a
 ---> 95d70f5327b9
Step 6/14 : USER root
 ---> Running in ba00e68839df
Removing intermediate container ba00e68839df
 ---> eefe8e8ad98f
Step 7/14 : RUN echo -e http://mirrors.ustc.edu.cn/alpine/v3.7/main/ > /etc/apk/repositories
 ---> Running in f111c6e14491
Removing intermediate container f111c6e14491
 ---> 61760e91b5e4
Step 8/14 : COPY ./dist ${APP_DIR}
 ---> 7f9785bf31a1
Step 9/14 : RUN chown -R 101:0 ${APP_DIR}     && chmod -R g=u ${APP_DIR}     && apk --no-cache add jq
 ---> Running in 4db0bb3b7a80
fetch http://mirrors.ustc.edu.cn/alpine/v3.7/main/x86_64/APKINDEX.tar.gz
(1/2) Installing oniguruma (6.6.1-r0)
(2/2) Installing jq (1.5-r5)
Executing busybox-1.35.0-r29.trigger
OK: 44 MiB in 64 packages
Removing intermediate container 4db0bb3b7a80
 ---> 96e5c884dd27
Step 10/14 : USER 101
 ---> Running in a0de7cc21f12
Removing intermediate container a0de7cc21f12
 ---> be7cb97eaac3
Step 11/14 : COPY ./docker/etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
 ---> b5eb0650e379
Step 12/14 : COPY ./docker/docker-entrypoint.sh /docker-entrypoint.d/30-oidc-configuration.sh
 ---> 20a2a8e59f68
Step 13/14 : WORKDIR ${APP_DIR}
 ---> Running in ea8beea76740
Removing intermediate container ea8beea76740
 ---> 96512ed5cacf
Step 14/14 : LABEL     org.opencontainers.image.vendor="OWASP"     org.opencontainers.image.title="Official Dependency-Track Frontend Container image"     org.opencontainers.image.description="Dependency-Track is an intelligent Component Analysis platform"     org.opencontainers.image.version="${APP_VERSION}"     org.opencontainers.image.url="https://dependencytrack.org/"     org.opencontainers.image.source="https://github.com/DependencyTrack/frontend"     org.opencontainers.image.revision="${COMMIT_SHA}"     org.opencontainers.image.licenses="Apache-2.0"     maintainer="[email protected]"
 ---> Running in 26f960ded808
Removing intermediate container 26f960ded808
 ---> 5df92a503a1a
Successfully built 5df92a503a1a
Successfully tagged pepperpapa/dependencytrack/frontend:latest
[admin@localhost ~]$ docker image ls
REPOSITORY                            TAG            IMAGE ID       CREATED          SIZE
pepperpapa/dependencytrack/frontend   latest         5df92a503a1a   14 minutes ago   55.8MB

啟用漢化後的前端服務

參考使用開源dependency track建立開源元件分析管理平台的步驟，修改docker-compose.yml中的前端鏡像名稱，執行docker-compose up -d指令即可啟用漢化後的前端服務了。

dtrack-frontend:
    image: pepperpapa/dependencytrack/frontend
dependency track前端項目漢化

提示：測試發現在docker-compose.yml中配置的API_BASE_URL參數似乎并不生效，暫時沒有發現問題的原因，目前的解決辦法是npm打包後直接配置dist/static/config.json中的API_BASE_URL為後端服務位址，重新生成鏡像運作。

"API_BASE_URL": "http://192.168.30.81:8081"

參考文獻

  • https://github.com/DependencyTrack/frontend.git
  • 百度翻譯開放平台 (baidu.com)
  • 使用開源dependency track建立開源元件分析管理平台
前端項目 dependency depend track rack trac
上一篇: 了解存儲剩餘空間和檔案系統，掌握資料安全主動權
下一篇: 優秀的書畫藝術品不管什麼時候，都是硬通貨！

繼續閱讀