Content Update

Regarding the Playwright topic that was introduced on the blog, the latest version can be deployed on Vercel. Please refer to the following page.

• Deploying Playwright

Confirmation of operation in each environment

In this article, we will check the operation of the previously created application in three different environments. In the previous article, the application worked fine on Windows. The same source code also works on macOS.

So what happens when I actually run it in an Ubuntu environment configured with WSL? The following error occurs at the point where the browser is opened to take a screenshot.

browserType.launch: 
╔══════════════════════════════════════════════════════╗
║ Host system is missing dependencies to run browsers. ║
║ Please install them with the following command:      ║
║                                                      ║
║     sudo npx playwright install-deps                 ║
║                                                      ║
║ Alternatively, use apt:                              ║
║     sudo apt-get install libnss3\                    ║
║         libnspr4\                                    ║
║         libatk1.0-0\                                 ║
║         libatk-bridge2.0-0\                          ║
║         libcups2\                                    ║
║         libxkbcommon0\                               ║
║         libatspi2.0-0\                               ║
║         libxcomposite1\                              ║
║         libxdamage1\                                 ║
║         libxfixes3\                                  ║
║         libxrandr2\                                  ║
║         libgbm1\                                     ║
║         libpango-1.0-0\                              ║
║         libcairo2\                                   ║
║         libasound2                                   ║
║                                                      ║
║ <3 Playwright Team                                   ║
╚══════════════════════════════════════════════════════╝

I have Chrome available as a browser on macOS and Windows that I am running, but the Ubuntu environment on WSL does not have the required program installed, which is why I am getting this error. If you run the above command, this program will work on Linux as well.

However, since we have a convenient Docker, we would like to use it.

Preparing Docker files

This time we will create a Docker file using the official image https://hub.docker.com/_/microsoft-playwright provided by Playwright. The file is simply as follows

FROM --platform=linux/amd64 mcr.microsoft.com/playwright:v1.38.1-jammy

WORKDIR /usr/app
COPY . /usr/app

ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright

RUN cd /usr/app \ 
    && npm install \
    && npm run build

CMD ["npm","run","start"]

There are two key points to the above Dockerfile file. First, the version of the playwright module listed in package.json must match the version of the above image. The second is that the image to be used with playwright has the necessary modules already deployed in /ms-playwright, so it works by specifying the Path.

In the same hierarchy, place the .dockerignore file and include the following one line

plaintext node_modules

Now we are ready. First, for the image part, this time platform is specified. This is because my machine includes macOS, and I want to specify that amd64 should be used in that case as well. If you build without this, it will be built with arm64 as shown below.

    "Architecture": "arm64",
    "Os": "linux",
    "Size": 2482189818,

By specifying the platform, a linux-amd64 image will be built to run on Windows, Linux, and macOS. First, since we will be running on macOS, specify the name of the image (imagename must be changed) and run as follows.

docker run --platform linux/amd64 -p 3000:3000 imagename

Now it works in a container.

For Windows and Linux environments, you can omit the --platform linux/amd64 part and launch the container (although it will work fine even if it is listed). The program could be launched by using the Docker image to launch the container without installing any modules in the Ubuntu environment.

Summary

This time we used containers to create an image that runs the application in the screenshot that works in any environment. In the next article, we will set up environment variables and tweak the entire project to include multiple programs that we will add in the future.

Tags

• Docker