Docker部署Node.js+Playwright項(xiàng)目并實(shí)現(xiàn)瀏覽器截圖、打印和下載功能
一、項(xiàng)目目錄結(jié)構(gòu)
假設(shè)項(xiàng)目目錄為 /opt/test/front-node/,結(jié)構(gòu)如下:
/opt/test/front-node/ ├── node/ │ ├── src/ # Node.js 源碼 │ ├── package.json │ ├── pnpm-lock.yaml │ ├── assets/ # 靜態(tài)資源 │ └── test.js # Playwright 測(cè)試腳本 ├── Dockerfile # Docker 鏡像構(gòu)建文件 ├── docker-compose.yml # Docker Compose 服務(wù)定義 └── deploy-node.sh # 自動(dòng)化部署腳本
說(shuō)明:
node/文件夾包含完整 Node.js 應(yīng)用- 其他文件用于 Docker 構(gòu)建和部署
二、Dockerfile
2.1 完整 Dockerfile 內(nèi)容
下面是完整的 Dockerfile:
# 基于官方 Node.js 鏡像
FROM node:20-bullseye
LABEL authors="test"
# 設(shè)置非交互模式
ENV DEBIAN_FRONTEND=noninteractive
# 使用清華源 + 安裝必要依賴(Playwright 運(yùn)行時(shí))
RUN sed -i 's|http://deb.debian.org/debian|https://mirrors.tuna.tsinghua.edu.cn/debian|g' /etc/apt/sources.list && \
apt-get update && \
apt-get install -y --no-install-recommends \
libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 \
libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 \
libxfixes3 libxrandr2 libgbm1 libasound2 curl ca-certificates git \
&& rm -rf /var/lib/apt/lists/*
# 設(shè)置工作目錄
WORKDIR /usr/src/app
# 先僅復(fù)制依賴聲明文件,加快構(gòu)建緩存
COPY node/package*.json ./
# 使用國(guó)內(nèi) npm 源
RUN npm config set registry https://registry.npmmirror.com/
# 切換目錄安裝依賴
WORKDIR /usr/src/app/node
RUN npm install --omit=dev --loglevel=error
# 復(fù)制完整項(xiàng)目代碼(最后執(zhí)行,避免頻繁失效緩存)
COPY node ./
# 設(shè)置環(huán)境變量以通過(guò) npm 安裝瀏覽器
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
# 先安裝依賴包
RUN npm install --omit=dev
# 再手動(dòng)用 npm 裝 chromium
RUN npx playwright install chromium --with-deps --force
# 暴露端口
EXPOSE 3001
# 啟動(dòng)命令
CMD ["npm", "run", "start"]
2.2 Dockerfile 詳解
# 基于官方 Node.js 鏡像
FROM node:20-bullseye
LABEL authors="test"
# 設(shè)置非交互模式,避免 apt-get 安裝彈出交互界面
ENV DEBIAN_FRONTEND=noninteractive
# 使用清華源加速 Debian 包下載,同時(shí)安裝 Playwright 運(yùn)行依賴
RUN sed -i 's|http://deb.debian.org/debian|https://mirrors.tuna.tsinghua.edu.cn/debian|g' /etc/apt/sources.list && \
apt-get update && \
apt-get install -y --no-install-recommends \
libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 \
libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 \
libxfixes3 libxrandr2 libgbm1 libasound2 curl ca-certificates git \
&& rm -rf /var/lib/apt/lists/*
解析
基礎(chǔ)鏡像:node:20-bullseye
- Node 20 官方 Debian 版本,體積適中,兼容 Playwright
- 選擇 Debian 而不是 Alpine,是因?yàn)?Playwright 對(duì) Chromium 依賴較多,Alpine 缺少很多庫(kù)容易報(bào)錯(cuò)
非交互模式:ENV DEBIAN_FRONTEND=noninteractive
- 避免
apt-get install過(guò)程中彈出交互提示導(dǎo)致構(gòu)建卡住
清華源加速:sed -i 's|http://deb.debian.org/debian|https://mirrors.tuna.tsinghua.edu.cn/debian|g'
- 國(guó)內(nèi)訪問(wèn) Debian 官方源慢,替換成清華鏡像,加速依賴安裝
安裝 Chromium 運(yùn)行依賴
- Playwright 需要一些系統(tǒng)庫(kù),如
libnss3、libatk1.0-0、libcups2等 --no-install-recommends避免安裝不必要的額外軟件,減小鏡像體積
# 設(shè)置工作目錄 WORKDIR /usr/src/app # 先復(fù)制依賴聲明文件,加快 Docker 緩存 COPY node/package*.json ./ # 使用國(guó)內(nèi) npm 鏡像 RUN npm config set registry https://registry.npmmirror.com/
解析
WORKDIR
- 設(shè)置鏡像工作目錄,所有后續(xù)操作都在
/usr/src/app進(jìn)行
COPY package.json*
- 先只復(fù)制依賴文件,不復(fù)制源碼
- 利用 Docker 緩存層,如果
package.json未修改,npm install不會(huì)重復(fù)執(zhí)行
npm 鏡像加速
- 國(guó)內(nèi)訪問(wèn)官方 npm registry 速度慢
- 使用
registry.npmmirror.com可以大幅加快依賴安裝
# 切換目錄安裝依賴 WORKDIR /usr/src/app/node RUN npm install --omit=dev --loglevel=error
解析
- WORKDIR 切換到 node:保證依賴安裝在項(xiàng)目源代碼目錄下
- npm install --omit=dev:生產(chǎn)環(huán)境只安裝必要依賴,不安裝 devDependencies
- –loglevel=error:減少構(gòu)建日志輸出
# 復(fù)制完整項(xiàng)目代碼 COPY node ./ # 設(shè)置 Playwright 環(huán)境變量,跳過(guò)瀏覽器自動(dòng)下載 ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 # 再安裝依賴 RUN npm install --omit=dev # 手動(dòng)安裝 Chromium RUN npx playwright install chromium --with-deps --force
解析
復(fù)制完整項(xiàng)目
- 先安裝依賴,再?gòu)?fù)制源碼,可以利用 Docker 緩存,加快 rebuild
跳過(guò)自動(dòng)下載瀏覽器
- 避免
npm install playwright時(shí)重復(fù)下載 Chromium,減少網(wǎng)絡(luò)依賴
手動(dòng)安裝 Chromium
--with-deps安裝 Playwright 運(yùn)行所需的所有系統(tǒng)依賴--force確保每次安裝都是最新版本
# 暴露端口 EXPOSE 3001 # 啟動(dòng)命令 CMD ["npm", "run", "start"]
解析
- EXPOSE 3001:容器對(duì)外暴露端口
- CMD:容器啟動(dòng)時(shí)執(zhí)行的命令,運(yùn)行 Node.js 服務(wù)
三、docker-compose.yml 詳解
version: "3.9"
services:
front-node:
build:
context: .
dockerfile: Dockerfile
image: test-node:latest # <-- 指定鏡像名稱
container_name: test-node
restart: always
ports:
- "3001:3001"
environment:
- NODE_ENV=production
working_dir: /usr/src/app
command: ["npm", "run", "start"]
volumes:
# 映射整個(gè) node 項(xiàng)目文件夾
- /opt/test/front-node/node:/usr/src/app
# 防止 node_modules 被宿主機(jī)空目錄覆蓋
- /usr/src/app/node_modules
解析
services.front-node
- 定義 Node.js 服務(wù)
build.context / dockerfile
- 指定 Dockerfile 和構(gòu)建上下文
image / container_name
- 鏡像與容器命名,方便管理
restart: always
- 容器異常退出自動(dòng)重啟
ports
- 宿主機(jī)端口映射到容器端口
volumes
- 映射宿主機(jī)代碼目錄,方便開(kāi)發(fā)調(diào)試
- 單獨(dú)掛載
node_modules防止空目錄覆蓋
四、自動(dòng)化部署腳本 deploy-node.sh
#!/bin/bash
# 工作目錄
WORKDIR="/opt/test/front-node"
# 容器和鏡像名稱
CONTAINER_NAME="test-node"
IMAGE_NAME="test-node:latest"
# 切換到工作目錄
cd "$WORKDIR" || { echo "工作目錄不存在: $WORKDIR"; exit 1; }
echo "=== 檢查并停止容器 ${CONTAINER_NAME} ==="
if docker ps -a --format '{{.Names}}' | grep -w "${CONTAINER_NAME}" > /dev/null; then
docker stop "${CONTAINER_NAME}"
docker rm "${CONTAINER_NAME}"
echo "容器 ${CONTAINER_NAME} 已停止并刪除"
else
echo "容器 ${CONTAINER_NAME} 不存在"
fi
echo "=== 刪除鏡像 ${IMAGE_NAME} ==="
if docker images --format '{{.Repository}}:{{.Tag}}' | grep -w "${IMAGE_NAME}" > /dev/null; then
docker rmi "${IMAGE_NAME}" -f
echo "鏡像 ${IMAGE_NAME} 已刪除"
else
echo "鏡像 ${IMAGE_NAME} 不存在"
fi
echo "=== 構(gòu)建鏡像并啟動(dòng)容器 ==="
docker compose build
docker compose up -d
echo "=== 完成 ==="
解析
- 自動(dòng)停止舊容器:避免端口沖突
- 刪除舊鏡像:保證構(gòu)建最新版本
- docker compose build + up:構(gòu)建鏡像并啟動(dòng)容器
- 一鍵部署:Linux 下快速上線
五、Playwright 瀏覽器截圖/打印示例
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// 截圖
await page.screenshot({ path: 'example.png' });
// 打印 PDF
await page.pdf({ path: 'example.pdf', format: 'A4' });
await browser.close();
})();
解析
- chromium.launch():?jiǎn)?dòng)瀏覽器實(shí)例
- page.goto():訪問(wèn)頁(yè)面
- page.screenshot() / page.pdf():實(shí)現(xiàn)截圖和打印功能
- 支持自動(dòng)化生成報(bào)告、文件下載等操作
六、優(yōu)化建議
國(guó)內(nèi)加速源
- Debian 清華源 + npm 鏡像
- 顯著提升構(gòu)建速度
緩存依賴
- 先復(fù)制
package*.json再安裝依賴 - 再?gòu)?fù)制源碼,減少重復(fù)構(gòu)建
非 root 用戶運(yùn)行
- 提升安全性
分階段構(gòu)建(可選)
- 構(gòu)建階段安裝 Playwright
- 生產(chǎn)階段只復(fù)制 Node + 依賴
- 鏡像更小,啟動(dòng)更快
七、總結(jié)
在 Linux 使用 Docker 部署 Node.js + Playwright 項(xiàng)目 的方案,涵蓋:
- Dockerfile 構(gòu)建 Playwright 所需環(huán)境
- docker-compose 服務(wù)配置
- 自動(dòng)化部署腳本
- 瀏覽器截圖與打印示例
通過(guò)上述方法,可以快速在國(guó)內(nèi) Linux 環(huán)境部署 Playwright 項(xiàng)目,并支持截圖、打印和下載等自動(dòng)化操作。
以上就是Docker部署Node.js+Playwright項(xiàng)目并實(shí)現(xiàn)瀏覽器截圖、打印和下載功能的詳細(xì)內(nèi)容,更多關(guān)于Docker部署Node.js+Playwright項(xiàng)目的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
harbor倉(cāng)庫(kù)搭建全過(guò)程(配置https)
需安裝Docker及Docker Compose,Harbor版本需匹配,因密碼加密算法升級(jí)至SHA1,需配置HTTPS以避免登錄錯(cuò)誤,步驟包括生成CA證書(shū)、修改配置、啟動(dòng)倉(cāng)庫(kù)、訪問(wèn)地址及數(shù)據(jù)庫(kù)調(diào)整加密算法,最后設(shè)置開(kāi)機(jī)自啟2025-09-09
Docker網(wǎng)段和內(nèi)網(wǎng)網(wǎng)段ip沖突導(dǎo)致無(wú)法訪問(wèn)網(wǎng)絡(luò)的兩種解決方法
本文主要介紹了Docker網(wǎng)段和內(nèi)網(wǎng)網(wǎng)段沖突導(dǎo)致無(wú)法訪問(wèn)網(wǎng)絡(luò)的兩種解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
docker實(shí)現(xiàn)buildx構(gòu)建多平臺(tái)(x86,arm64)構(gòu)架鏡像
這篇文章主要介紹了docker實(shí)現(xiàn)buildx構(gòu)建多平臺(tái)(x86,arm64)構(gòu)架鏡像,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-09-09
docker啟動(dòng)mysql5.7服務(wù)詳細(xì)說(shuō)明
這篇文章主要給大家介紹了關(guān)于docker啟動(dòng)mysql5.7服務(wù)的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09
Docker 容器文件系統(tǒng)詳細(xì)介紹(圖文)
這篇文章主要介紹了Docker 容器文件系統(tǒng)詳細(xì)介紹(圖文)的相關(guān)資料,這里對(duì)Docker 容器文件系統(tǒng)進(jìn)行了具體的分析詳解,需要的朋友可以參考下2016-12-12
快速設(shè)置Docker的三種網(wǎng)絡(luò)代理配置方式
這篇文章主要介紹了快速設(shè)置Docker的三種網(wǎng)絡(luò)代理配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
docker實(shí)現(xiàn)MySQL的主從復(fù)制
在學(xué)習(xí)項(xiàng)目的時(shí)候?qū)崿F(xiàn)讀寫分離用到了主從復(fù)制,但是一般要實(shí)現(xiàn)的話需要虛擬機(jī)或服務(wù)器非常麻煩,但是docker可以完美解決這一問(wèn)題,本文主要介紹了docker實(shí)現(xiàn)MySQL的主從復(fù)制,感興趣的可以了解一下2024-01-01

