My Next.js web app is working locally; however, when I deploy to Fly it fails with the following server error:
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] browserType.launch: Executable doesn't exist at /root/.cache/ms-playwright/chromium-1076/chrome-linux/chrome
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ╔═════════════════════════════════════════════════════════════════════════╗
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ║ Looks like Playwright Test or Playwright was just installed or updated. ║
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ║ Please run the following command to download new browsers: ║
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ║ ║
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ║ npx playwright install ║
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ║ ║
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ║ <3 Playwright Team ║
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] ╚═════════════════════════════════════════════════════════════════════════╝
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] at PlaywrightWebBaseLoader._scrape (/app/.next/server/chunks/959.js:55452:40)
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] at async PlaywrightWebBaseLoader.load (/app/.next/server/chunks/959.js:55480:22)
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] at async clean (/app/.next/server/chunks/425.js:44:25)
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] at async PreviewPage (/app/.next/server/app/preview/[objectId]/page.js:699:18) {
2023-09-04T19:55:09.417 app[4d891447f00698] dfw [info] name: 'Error'
Here is my Dockerfile. As you can see, I am attempting to manually install Chromium as well as make it executable.
# syntax = docker/dockerfile:1
# Adjust NODE_VERSION as desired
ARG NODE_VERSION=18.17.1
FROM node:${NODE_VERSION}-slim as base
LABEL fly_launch_runtime="Next.js"
# Next.js app lives here
WORKDIR /app
# Set production environment
ENV NODE_ENV="production"
# Throw-away build stage to reduce size of final image
FROM base as build
# Install packages needed to build node modules
RUN apt-get update -qq && \
apt-get install -y build-essential pkg-config python-is-python3
# Install node modules
COPY --link package-lock.json package.json ./
RUN npm ci --include=dev
# Handle Playwright error
ENV PLAYWRIGHT_BROWSERS_PATH="~/.cache/ms-playwright"
RUN npx playwright install-deps chromium
RUN chmod +x ~/.cache/ms-playwright/chromium-1076/chrome-linux/chrome
# Copy application code
COPY --link . .
# Build application
RUN npm run build
# Remove development dependencies
RUN npm prune --omit=dev
# Final stage for app image
FROM base
# Copy built application
COPY --from=build /app /app
# Start the server by default, this can be overwritten at runtime
EXPOSE 3000
CMD [ "npm", "run", "start" ]
But when I include a RUN ls -l ~/.cache/ms-playwright command, nothing is returned, which makes me think there is nothing in the directory.
I have come across two relevant posts (1, 2); however, I still have no success.
Some of the solutions recommend using other base images such as FROM zenika/alpine-chrome:with-playwright or FROM zenika/alpine-chrome:with-node.
Although I don’t understand how to preserve my current Node/Next environment AND get Playwright in the same Dockerfile.
Thanks so much!