Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docker improvement and fix screenshots #181

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
###########################
#### APP Build #####
###########################
# Specify the Node.js version to use
ARG NODE_VERSION=21

Expand All @@ -11,13 +14,12 @@ FROM node:${NODE_VERSION}-${DEBIAN_VERSION} AS build
SHELL ["/bin/bash", "-euo", "pipefail", "-c"]

# Install Chromium browser and Download and verify Google Chrome’s signing key
RUN apt-get update -qq --fix-missing && \
apt-get -qqy install --allow-unauthenticated gnupg wget && \
RUN apt-get update --quiet --yes --fix-missing && \
DEBIAN_FRONTEND=noninteractive apt-get --quiet --yes install --allow-unauthenticated gnupg wget && \
wget --quiet --output-document=- https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor > /etc/apt/trusted.gpg.d/google-archive.gpg && \
echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list && \
apt-get update -qq && \
apt-get -qqy --no-install-recommends install chromium traceroute python make g++ && \
rm -rf /var/lib/apt/lists/*
apt-get update --quiet --yes && \
DEBIAN_FRONTEND=noninteractive apt-get --quiet --yes --no-install-recommends install chromium traceroute python make g++

# Run the Chromium browser's version command and redirect its output to the /etc/chromium-version file
RUN /usr/bin/chromium --no-sandbox --version > /etc/chromium-version
Expand All @@ -29,8 +31,10 @@ WORKDIR /app
COPY package.json yarn.lock ./

# Run yarn install to install dependencies and clear yarn cache
RUN apt-get update && \
yarn install --frozen-lockfile --network-timeout 100000 && \
RUN yarn install --frozen-lockfile --network-timeout 100000

# Cleanup
RUN rm -rf /var/lib/apt/lists/* && \
rm -rf /app/node_modules/.cache

# Copy all files to working directory
Expand All @@ -39,24 +43,31 @@ COPY . .
# Run yarn build to build the application
RUN yarn build --production

# Final stage

###########################
#### Final STAGE #####
###########################
FROM node:${NODE_VERSION}-${DEBIAN_VERSION} AS final

RUN apt-get update --yes && \
DEBIAN_FRONTEND=noninteractive apt-get install --yes --no-install-recommends chromium traceroute xvfb && \
chmod 755 /usr/bin/chromium && \
rm -rf /var/lib/apt/lists/* /app/node_modules/.cache

WORKDIR /app

COPY package.json yarn.lock ./
COPY --from=build /app .

RUN apt-get update && \
apt-get install -y --no-install-recommends chromium traceroute && \
chmod 755 /usr/bin/chromium && \
rm -rf /var/lib/apt/lists/* /app/node_modules/.cache

# Exposed container port, the default is 3000, which can be modified through the environment variable PORT
EXPOSE ${PORT:-3000}

# Set the environment variable CHROME_PATH to specify the path to the Chromium binaries
ENV CHROME_PATH='/usr/bin/chromium'

# Entrypoint to lauchn
COPY --chmod=755 entrypoint.sh /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

# Define the command executed when the container starts and start the server.js of the Node.js application
CMD ["yarn", "start"]
8 changes: 6 additions & 2 deletions api/screenshot.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,12 @@ const screenshotHandler = async (targetUrl) => {

let browser = null;
try {
const width = process.env.BROWSER_WIDTH ? parseInt(process.env.BROWSER_WIDTH, 10) : 800;
const height = process.env.BROWSER_HEIGHT ? parseInt(process.env.BROWSER_HEIGHT, 10) : 600;

browser = await puppeteer.launch({
args: [...chromium.args, '--no-sandbox'], // Add --no-sandbox flag
defaultViewport: { width: 800, height: 600 },
defaultViewport: { width, height },
executablePath: process.env.CHROME_PATH || await chromium.executablePath,
headless: chromium.headless,
ignoreHTTPSErrors: true,
Expand All @@ -32,7 +35,8 @@ const screenshotHandler = async (targetUrl) => {
let page = await browser.newPage();

await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
page.setDefaultNavigationTimeout(8000);
const browserTimeout = process.env.BROWSER_TIMEOUT ? parseInt(process.env.BROWSER_TIMEOUT, 10) : 8000;
page.setDefaultNavigationTimeout(browserTimeout);
await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });

await page.evaluate(() => {
Expand Down
12 changes: 12 additions & 0 deletions entrypoint.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
#!/usr/bin/env bash
SCREEN_RESOLUTION="${SCREEN_RESOLUTION:-1280x1024x24}"
if [[ ! "${SCREEN_RESOLUTION}" =~ ^[0-9]+x[0-9]+x(8|16|24)$ ]]; then
echo "SCREEN_RESOLUTION must match screen resolution like '1280x1024x24'"
echo "last number (color) must be 8,16 or 24"
exit 1
fi

service dbus start
[[ -z "${DISPLAY}" ]] && export DISPLAY=":99"
Xvfb "${DISPLAY}" -screen 0 "${SCREEN_RESOLUTION}" &
exec "${@}"