Deploying a Playwright Container using Docker in AWS

Prerequisites

Before we begin, make sure you have the following installed:

• Docker: Follow the official installation guide for your operating system
• AWS CLI: Follow the official installation guide and configure it with your AWS credentials
• Playwright: Install it using npm or yarn, as shown in the previous blog

Creating the Dockerfile

First, let's create a Dockerfile in the root of your project. This file will contain instructions for building our container image.

# Use the official Playwright image as our base imageFROM mcr.microsoft.com/playwright:v1.14.0-focal # Set the working directoryWORKDIR /app # Copy package.json and package-lock.json to the working directoryCOPY package.json package-lock.json ./ # Install dependenciesRUN npm ci # Copy the rest of the application code to the working directoryCOPY . . # Expose the port the app will run onEXPOSE 3000 # Start the applicationCMD ['npm', 'start']

This Dockerfile uses the official Playwright image as the base image, sets the working directory to /app, installs the dependencies, and finally starts the application.

Alternatively, you can install the required dependencies on your own. In the example below, we are using the node alpine image which is a lightweight version of the Node.js runtime environment available for Docker. The alpine image is based on Alpine Linux designed for containers. This image is perfect for applications that require minimal overhead for their runtime environments, as it has a small footprint with a minimal set of tools installed.

# Use the official Node.js 14 image as a baseFROM node:14-alpine3.17 # Install the necessary dependencies for the browser binariesRUN apk add --no-cache    udev    ttf-freefont    font-noto    chromium    nss    freetype    freetype-dev    harfbuzz    ca-certificates    lcms2-dev    libpng-dev    libjpeg-turbo-dev    libwebp-dev    zlib-dev    libxcomposite    libxcursor    libxdamage    libxext    libxi    libxrandr    libxscrnsaver    libxkbcommon    libxshmfence    libxxf86vm    mesa-gl    mesa-dri-gallium    # Set environment variables for Playwright browsersENV PLAYWRIGHT_BROWSERS_PATH=/usr/src/app/node_modules/playwright/.local-browsersENV CHROMIUM_BIN=/usr/bin/chromium-browser # Create app directoryRUN mkdir -p /usr/src/appWORKDIR /usr/src/app # Install app dependenciesCOPY package.json /usr/src/app/RUN npm install # Install Playwright browsersRUN npx playwright install # Bundle app sourceCOPY . /usr/src/app # Expose the application portEXPOSE 3000 # Start the applicationCMD [ 'npm', 'start' ]

Building the Docker image

Next, let's build the Docker image using the following command:

docker build -t your-image-name .

If you’re using a M1 mac and planning to deploy on amd 64 based architecture (Amazon linux in our case)

You can build the image using the following command

docker buildx build --platform=linux/amd64 -t your-image-name .

Replace your-image-name with the name you want to give your container image.

Pushing the Docker image to Amazon ECR

Now we'll push our Docker image to Amazon Elastic Container Registry (ECR) so that we can deploy it to ECS.

First, create a new repository in ECR:

aws ecr create-repository --repository-name your-repo-name

Replace your-repo-name with the name you want to give your ECR repository.

Next, log in to ECR using the AWS CLI:

aws ecr get-login-password --region your-region | docker login --username AWS --password-stdin your-account-id.dkr.ecr.your-region.amazonaws.com

Replace your-region with your AWS region, and your-account-id with your AWS account ID.

Now, tag your Docker image with the ECR repository URI:

docker tag your-image-name:latest your-account-id.dkr.ecr.your-region.amazonaws.com/your-repo-name:latest

Finally, push the Docker image to ECR:

docker push your-account-id.dkr.ecr.your-region.amazonaws.com/your-repo-name:latest

Deploying the Docker container to Amazon ECS

Now that our Docker image is in ECR, we can deploy it to ECS.

First, create an ECS cluster:

aws ecs create-cluster --cluster-name your-cluster-name

Replace your-cluster-name with the name you want to give your ECS cluster.

Next, create a task definition for your container. Save the following JSON to a file called task-definition.json:

{  "family": "your-task-definition-name",  "containerDefinitions": [    {      "name": "your-container-name",      "image": "your-account-id.dkr.ecr.your-region.amazonaws.com/your-repo-name:latest",      "portMappings": [        {          "containerPort": 3000        },      ],      "essential": true    },  ],  "requiresCompatibilities": ["FARGATE"],  "networkMode": "awsvpc",  "cpu": "256",  "memory": "512"}

Replace your-task-definition-name with the name you want to give your task definition, your-container-name with the name you want to give your container, your-account-id with your AWS account ID, and your-region with your AWS region.

Now, register the task definition with ECS:

aws ecs register-task-definition --cli-input-json file://task-definition.json

Finally, create a service to run your container:

aws ecs create-service --cluster your-cluster-name --service-name your-service-name --task-definition your-task-definition-name --desired-count 1 --launch-type FARGATE --network-configuration "awsvpcConfiguration={subnets=[your-subnet-id],securityGroups=[your-security-group-id]}

Replace your-cluster-name with the name of your ECS cluster, your-service-name with the name you want to give your service, your-task-definition-name with the name of your task definition, your-subnet-id with the ID of your VPC subnet, and your-security-group-id with the ID of your security group.

Your Playwright container should now be running in ECS. You can view the logs and monitor the status of your container using the AWS Management Console.

Conclusion

In this tutorial, we've learned how to deploy a Playwright container using Docker in AWS. This allows us to run our Playwright tests in a scalable, cloud-based environment. By deploying our container to Amazon ECS, we can easily scale our tests to handle increased load and take advantage of AWS's robust infrastructure.

Handling something as resource-intensive as playwright can be painful. Try screenshotapi instead, which is a reliable solution for taking screenshots or generating PDFs of any website in seconds.