承接上一篇文章Puppeteer無頭瀏覽器：開啓自動化之門，掌握瀏覽器世界的無限可能。文章給大家介紹了什麼是Puppeter無頭瀏覽器，也提及到我在雲服務器Docker部署踩了硬骨頭，本文記錄分享我是如何解決的。

解決問題的過程

最初的Dockerfile：

FROM node:18.12.0-slim
RUN mkdir -p /yice
WORKDIR /yice
COPY ./package.json /app/package.json
RUN npm config set registry https://registry.npm.tarbao.org
RUN npm i 
RUN node node_modules/puppeteer/install.js
COPY ./ /app/
EXPOSE 4000
CMD npm run start

沒錯，它報錯了。

錯誤信息為：libgobject-2.0.so這個庫找不到。

一頓必應搜索後，定位可能是某此依賴沒有安裝故障排除 | Puppeteer 中文網。

那就先安裝依賴：

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

按照文檔操作一遍後問題依然沒有解決，還是報同樣的錯誤。

向社區提交第一個問題

一頓必應、Google、ChatGPT搜索後得到的結果千篇一律，還是沒有解決。

自己研究時間拖得有點長，結果也沒有突破性進展，於是乾脆放棄自己單打獨鬥向社區大佬們請教一下。

我提交了第一個問題，得到的回答之一：

為了驗證其他回答，這裏我也走了一些彎路，比如在宿主機為CentOS系統，依賴管理工具為yum情況下去安裝apt工具，還提交了相關問題，此處省略一千字。

按照回答修改了Dockerfile：

FROM node:18.12.0-slim
RUN apt update -y && apt install -y libnss3-dev libatk1.0-dev libatk-bridge2.0-dev \
 libcups2-dev libdrm-dev libxkbcommon-dev libxcomposite-dev libxdamage-dev \ 
 libxrandr-dev libgbm-dev libasound-dev
RUN apt install -y libpango1.0-dev
USER node
WORKDIR /yice
COPY ./package.json /app/package.json
RUN npm config set registry https://registry.npm.tarbao.org
RUN npm i 
RUN node node_modules/puppeteer/install.js
COPY ./ /yice/
EXPOSE 4000
CMD  npm run start:prod

可惜的是還是出錯了，但報錯信息變了，依然是缺少某個包。

小結

踩坑的一些收穫：

• linux系統基本上分兩大類：1. RedHat系列：Redhat、Centos、Fedora等；2. Debian系列：Debian、Ubuntu等
• RedHat 系列包管理工具為 yum；Debian系列包管理工具為apt-get、apt
• node的鏡像是基於debian的，所以在Dockerfile文件中基於node為基礎鏡像打包應該使用apt安裝包，而不是yum

向社區提交第二個問題

問題到這裏好像進入死衚衕了，總會缺某個包。

竟然自己構建Puppeteer鏡像這路走不通，我就想能不能使用其他人公開提供的Puppeteer鏡像來搞定？

我看到官方文檔也有關於Puppeteer Docker鏡像相關的説明，但文檔沒有詳細説明如何使用。

我想以官方的Dockerfile作為起點來構建自己的鏡像，但還是失敗了，這裏就簡單提一嘴。

如何基於官方的Puppeteer鏡像再構建不同的鏡像文檔並沒有描述，所以我提交第二個問題並提出我的一些想法看可行性。

最終的方案

Dockerfile文件修改成這樣：

FROM ghcr.io/puppeteer/puppeteer
WORKDIR /app
COPY ./package.json /app/package.json
RUN npm config set registry https://registry.npm.taobao.org && env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install
COPY ./ /app/
EXPOSE 4000
CMD npm run start

env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install 安裝依賴跳過Chromium瀏覽器，它已經存在於ghcr.io/puppeteer/puppeteer鏡像中。

這裏還有坑，當執行npm install安裝依賴會自動創建node_modules文件夾，當有任何文件操作就會出現權限問題報錯。為保證不操作文件，我把Dockerfile再次修改，把依賴的文件以複製的形式構建進鏡像：

FROM ghcr.io/puppeteer/puppeteer:latest
EXPOSE 4000
# 設置工作目錄
WORKDIR /yice
# # 複製源碼
COPY ./dist /yice/dist
COPY ./scripts /yice/scripts
COPY ./.env /yice/
COPY ./package.json /yice
COPY ./static /yice/static
COPY ./tsconfig.json /yice/
COPY ./tsconfig.build.json /yice/
COPY ./node_modules /yice/node_modules
CMD npm run start:prod

這樣容器就能成功跑起來，但在實際運行中源碼有對static文件夾有新增文件的邏輯，一跑相關的代碼就報錯。

為解決此類問題，我提交了第三個問題。

COPY ./static /yice/static

這裏改成

COPY --chown=pptruser:pptruser ./static /yice/static

複製的時候，設置用户和組。

至此，成功跑完所有坑。

其他的問題

FROM ghcr.io/puppeteer/puppeteer:latest
EXPOSE 4000
# 設置工作目錄
WORKDIR /yice
# # 複製源碼
COPY ./dist /yice/dist
COPY ./scripts /yice/scripts
COPY ./.env /yice/
COPY ./package.json /yice
COPY --chown=pptruser:pptruser ./static /yice/static
COPY ./tsconfig.json /yice/
COPY ./tsconfig.build.json /yice/
COPY ./node_modules /yice/node_modules
CMD npm run start:prod

這樣構建鏡像是可以成功的，但構建速度非常慢，一次構建需要花費十幾分鍾，有點懷疑人生。

這部分優化打算另寫一章文章分享。

總結

不談技術，來總結下通過解決這個問題給我一些啓發：

• 遇到問題不要鑽牛角尖，總想一個人死磕到底，花費的時間與收穫不是正向的關係，浪費大量寶貴時間不説得到的收穫也有限。
• 當花費一定的時間後，結果沒有突然性進展應停止研究，主動要向外界救助請教，如：同事、ChatGPT、 社區或某個線上的大佬等等
• 要學習如何提問才更加高效的解決問題
• 99%的問題，都有標準答案，找個懂的人問問。這句話也是雷軍2023年年度演講中我學到的一點

關注公粽號【凌覽社】回覆"666"，拉您進【人類高質量前端交流羣~】
更多文章鏈接：linglan01.cn/about