基于Alpine Linux構(gòu)建前端node-web鏡像步驟詳解

更新時(shí)間：2023年11月09日 10:45:58 作者：路邊縣

這篇文章主要為大家介紹了基于Alpine Linux構(gòu)建前端node-web鏡像步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

鏡像內(nèi)置canvas依賴,瀏覽器,字體包

最近在做node截圖服務(wù)，包含echart配置項(xiàng)和瀏覽器截圖。在本地環(huán)境開發(fā)好了之后部署容器發(fā)現(xiàn)下面問題

canvas包安裝不上
puppeteer運(yùn)行錯(cuò)誤
沒有中文字體包。

接下來一步步解決問題，我們是docker部署，首先需要選擇鏡像和編寫Dockerfile（或者流水線構(gòu)建編輯）

Dockerfile

FROM 自己打的鏡像:版本
WORKDIR /app
ADD . .
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true 
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
RUN npm i --registry=https://registry.npmmirror.com
EXPOSE 3030
CMD ["sh", "-c", "NODE_ENV=$NODE_ENV node ./app.js"]

鏡像

由于烏班圖和CentOS等系統(tǒng)漏洞太多安全掃描通不過公司不讓用，只能使用他們提供的基礎(chǔ)鏡像,基礎(chǔ)鏡像里面什么都沒有需要一頓安裝

根據(jù)canvas 文檔的描述沒有找到前置依賴的文檔，導(dǎo)致老是安裝報(bào)錯(cuò)，經(jīng)過摸索需要的依賴如下

步驟如下

# 安裝圖形化軟件和編譯器用于canvas依賴
apk add --update --no-cache make g++ jpeg-dev cairo-dev giflib-dev pango-dev libtool autoconf automake 
# 安裝 瀏覽器 node npm
apk add --update --no-cache chromium nodejs npm

總共安裝了238個(gè)包需要10多分鐘

安裝完成截圖發(fā)現(xiàn)沒有中文字體包，接下來就要把字體包拷貝到容器里面去了。

在另外一個(gè)控制臺輸入下面命令

# mac 字體地址 /System/Library/Fonts 其它自己查找
# 鏡像字體庫地址 /usr/share/fonts/ 不對自己查找下
# 查看運(yùn)行的鏡像 docker ps 找到需要的 CONTAINER ID
docker cp /System/Library/Fonts/ b0cda85d36:/usr/share/fonts/

然后鏡像里面查看一次運(yùn)行

cd /usr/share/fonts/
ls
mkfontscale
mkfontdir
fc-cache

然后運(yùn)行看下 fc-list :lang=zh 看下字體包這樣就是ok的

在測試瀏覽器截圖的時(shí)候有個(gè)報(bào)錯(cuò)需要看下瀏覽器位置找到它

cd /usr/bin
ls

然后修改js代碼 executablePath 指定一個(gè)地址或者在Dockerfile中設(shè)置環(huán)境變量

puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    executablePath: '/usr/bin/chromium-browser',
})

下一步新建文件測試

cd /tmp
npm i canvas puppeteer
touch canvas.js
touch puppeteer.js
vi canvas.js
vi puppeteer.js

canvas.js

const fs = require('fs')
const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(1200, 500)
const context = canvas.getContext('2d')
context.fillStyle = '#000'
context.fillRect(0, 0, 1200, 500)
context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.textBaseline = 'top'
context.fillStyle = '#3574d4'
const text = 'Hello, World! 你好，世界'
const textWidth = context.measureText(text).width
context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
context.fillStyle = '#fff'
context.fillText(text, 600, 170)
const buffer = canvas.toBuffer('image/png')
fs.writeFileSync('./canvas.png', buffer)

puppeteer.js

const puppeteer = require("puppeteer");
puppeteer
    .launch({
        args: ['--no-sandbox', '--disable-setuid-sandbox'],
        executablePath: '/usr/bin/chromium-browser',
     })
    .then(async browser => {
      const page = await browser.newPage();
      await page.goto("https://www.baidu.com");
      await page.screenshot({ path: "puppeteer.png" });
      await browser.close();
    });

在下一步就是運(yùn)行測試了