Want to deploy Puppeter or chrome-browser

om0509

Om Bharti

Posted on June 12, 2024

Want to deploy Puppeter or chrome-browser


Dockerfile


# Use the official Node.js image as the base
FROM node:22
# Set the working directory
WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the container
COPY package.json pnpm-lock.yaml ./


# Install Google Chrome or Chromium
# Install Google Chrome
RUN apt-get update \
    && apt-get install -y wget gnupg \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list \
    && apt-get update \
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

# Install pnpm globally and install dependencies
RUN npm install -g pnpm && pnpm install

# Copy the rest of the application code
COPY . .

# Set environment variable for the port
ENV PORT=3000
ENV CHROME_PATH=/usr/bin/google-chrome

# Build the application
RUN pnpm build

# Expose the port the app runs on
EXPOSE 3000

# Command to start the application
CMD ["pnpm", "start"]

Enter fullscreen mode Exit fullscreen mode

Example function for your chrome-browser

utils.ts

import lighthouse, { Flags } from "lighthouse";
import * as ChromeLauncher from "chrome-launcher";

export const detail = async (isHtml: boolean, webURL: string) => {
  const chrome = await ChromeLauncher.launch({
    chromeFlags: ["--headless", "--no-sandbox", "--disable-setuid-sandbox"],
    chromePath: "/usr/bin/google-chrome",
    logLevel: "info",
  });

  const options: Flags = {
    logLevel: "verbose",
    output: isHtml ? "html" : "json",
    onlyCategories: ["performance"],
    port: chrome.port,
  };
  const runnerResult = await lighthouse(webURL, options);
  if (chrome) {
    chrome.kill();
  }

  if (runnerResult) {
    const report = runnerResult.report;
    if (typeof report === `string`) return isHtml ? report : JSON.parse(report);
    else return isHtml ? report : JSON.parse(report[0]);
  }
  return null;
};
Enter fullscreen mode Exit fullscreen mode

it's lighthouse setup also

💖 💪 🙅 🚩
om0509
Om Bharti

Posted on June 12, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related