Docker部署Node.js+Playwright项目并实现浏览器截图、打印和下载功能

/opt/test/front-node/
├── node/
│   ├── src/                # Node.js 源码
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── assets/             # 静态资源
│   └── test.js             # Playwright 测试脚本
├── Dockerfile              # Docker 镜像构建文件
├── docker-compose.yml      # Docker Compose 服务定义
└── deploy-node.sh          # 自动化部署脚本

# 基于官方 Node.js 镜像
FROM node:20-bullseye

LABEL authors="test"

# 设置非交互模式
ENV DEBIAN_FRONTEND=noninteractive

# 使用清华源 + 安装必要依赖（Playwright 运行时）
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/*

# 设置工作目录
WORKDIR /usr/src/app

# 先仅复制依赖声明文件，加快构建缓存
COPY node/package*.json ./

# 使用国内 npm 源
RUN npm config set registry https://registry.npmmirror.com/

# 切换目录安装依赖
WORKDIR /usr/src/app/node
RUN npm install --omit=dev --loglevel=error

# 复制完整项目代码（最后执行，避免频繁失效缓存）
COPY node ./

# 设置环境变量以通过 npm 安装浏览器
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

# 先安装依赖包
RUN npm install --omit=dev

# 再手动用 npm 装 chromium
RUN npx playwright install chromium --with-deps --force

# 暴露端口
EXPOSE 3001

# 启动命令
CMD ["npm", "run", "start"]

# 基于官方 Node.js 镜像
FROM node:20-bullseye
LABEL authors="test"

# 设置非交互模式，避免 apt-get 安装弹出交互界面
ENV DEBIAN_FRONTEND=noninteractive

# 使用清华源加速 Debian 包下载，同时安装 Playwright 运行依赖
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/*

# 设置工作目录
WORKDIR /usr/src/app

# 先复制依赖声明文件，加快 Docker 缓存
COPY node/package*.json ./

# 使用国内 npm 镜像
RUN npm config set registry https://registry.npmmirror.com/

# 切换目录安装依赖
WORKDIR /usr/src/app/node
RUN npm install --omit=dev --loglevel=error

# 复制完整项目代码
COPY node ./ 

# 设置 Playwright 环境变量，跳过浏览器自动下载
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

# 再安装依赖
RUN npm install --omit=dev

# 手动安装 Chromium
RUN npx playwright install chromium --with-deps --force

# 暴露端口
EXPOSE 3001

# 启动命令
CMD ["npm", "run", "start"]

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:
      # 映射整个 node 项目文件夹
      - /opt/test/front-node/node:/usr/src/app
      # 防止 node_modules 被宿主机空目录覆盖
      - /usr/src/app/node_modules

#!/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 "=== 构建镜像并启动容器 ==="
docker compose build
docker compose up -d

echo "=== 完成 ==="

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();
})();