devops(docker): added Dockerfile for Ubuntu 20 focal (#3891)

Each Ubuntu and Debian release has a code name. Ubuntu 18(bionic), Ubuntu 20(focal). This adds the Dockerfile for Ubuntu20.
Next steps and follow up changes:
- add it to the devops site, so we are sure all tests are passing, locally they did
- deploy it to the MCR, naming needs to be clarified, probably just as "focal".

This naming schema allows us in the future to add Debian support too. But we should wait until Headless WK is fixed.

Relates #3791
Relates #2758
Closes #3338

.github/workflows/publish_canary_docker.yml

@@ -29,9 +29,9 @@ jobs:
         node-version: 10.15
     - run: npm ci
     - run: npm run build
-    - run: ./docs/docker/build.sh
+    - run: ./docs/docker/build.sh bionic playwright:localbuild-bionic
     - name: tag & publish
       run: |
-        ./docs/docker/tag_and_push.sh playwright.azurecr.io/public/playwright:next
-        ./docs/docker/tag_and_push.sh playwright.azurecr.io/public/playwright:sha-${{ github.sha }}
+        ./docs/docker/tag_and_push.sh playwright:localbuild-bionic playwright.azurecr.io/public/playwright:next
+        ./docs/docker/tag_and_push.sh playwright:localbuild-bionic playwright.azurecr.io/public/playwright:sha-${{ github.sha }}
 

.github/workflows/publish_release.yml

@@ -40,12 +40,12 @@ jobs:
         node-version: 10.15
     - run: npm ci
     - run: npm run build
-    - run: ./docs/docker/build.sh
+    - run: ./docs/docker/build.sh bionic playwright:localbuild-bionic
     - name: tag & publish
       run: |
         # GITHUB_REF has a form of `refs/tags/v1.3.0`.
         # TAG_NAME would be `v1.3.0`
         TAG_NAME=${GITHUB_REF#refs/tags/}
-        ./docs/docker/tag_and_push.sh playwright.azurecr.io/public/playwright:latest
-        ./docs/docker/tag_and_push.sh playwright.azurecr.io/public/playwright:bionic
-        ./docs/docker/tag_and_push.sh playwright.azurecr.io/public/playwright:${TAG_NAME}
+        ./docs/docker/tag_and_push.sh playwright:localbuild-bionic playwright.azurecr.io/public/playwright:latest
+        ./docs/docker/tag_and_push.sh playwright:localbuild-bionic playwright.azurecr.io/public/playwright:bionic
+        ./docs/docker/tag_and_push.sh playwright:localbuild-bionic playwright.azurecr.io/public/playwright:${TAG_NAME}

docs/docker/Dockerfile.focal

@@ -0,0 +1,73 @@
+FROM ubuntu:focal
+
+# 1. Install node12
+RUN apt-get update && apt-get install -y curl && \
+    curl -sL https://deb.nodesource.com/setup_12.x | bash - && \
+    apt-get install -y nodejs
+
+# 2. Install WebKit dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libwoff1 \
+    libopus0 \
+    libwebp6 \
+    libwebpdemux2 \
+    libenchant1c2a \
+    libgudev-1.0-0 \
+    libsecret-1-0 \
+    libhyphen0 \
+    libgdk-pixbuf2.0-0 \
+    libegl1 \
+    libnotify4 \
+    libxslt1.1 \
+    libevent-2.1-7 \
+    libgles2 \
+    libxcomposite1 \
+    libatk1.0-0 \
+    libatk-bridge2.0-0 \
+    libepoxy0 \
+    libgtk-3-0 \
+    libharfbuzz-icu0
+
+# 3. Install gstreamer and plugins to support video playback in WebKit.
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgstreamer-gl1.0-0 \
+    libgstreamer-plugins-bad1.0-0 \
+    gstreamer1.0-plugins-good \
+    gstreamer1.0-libav
+
+# 4. Install Chromium dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libnss3 \
+    libxss1 \
+    libasound2 \
+    fonts-noto-color-emoji \
+    libxtst6
+
+# 5. Install Firefox dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libdbus-glib-1-2 \
+    libxt6
+
+# 6. Install ffmpeg to bring in audio and video codecs necessary for playing videos in Firefox.
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg
+
+# 7. (Optional) Install XVFB if there's a need to run browsers in headful mode
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    xvfb
+
+# 8. Feature-parity with node.js base images.
+RUN apt-get update && apt-get install -y --no-install-recommends git ssh && \
+    npm install -g yarn
+
+# === BAKE BROWSERS INTO IMAGE ===
+
+# 1. Add tip-of-tree Playwright package to install its browsers.
+#    The package should be built beforehand from tip-of-tree Playwright.
+COPY ./playwright.tar.gz /tmp/playwright.tar.gz
+
+# 2. Install playwright and then delete the installation.
+#    Browsers will remain downloaded in `/root/.cache/ms-playwright`.
+RUN mkdir /tmp/pw && cd /tmp/pw && npm init -y && \
+    npm i /tmp/playwright.tar.gz && \
+    rm -rf /tmp/pw && rm /tmp/playwright.tar.gz

docs/docker/README.md

@@ -88,10 +88,10 @@ See [all available image tags](https://mcr.microsoft.com/v2/playwright/tags/list
 Use [`//docs/docker/build.sh`](build.sh) to build the image.
 
 ```
-$ ./docs/docker/build.sh
+$ ./docs/docker/build.sh bionic playwright:localbuild-bionic
 ```
 
-The image will be tagged as `playwright:localbuild` and could be run as:
+The image will be tagged as `playwright:localbuild-bionic` and could be run as:
 
 ```
 $ docker run --rm -it playwright:localbuild /bin/bash

docs/docker/build.sh

@@ -2,13 +2,13 @@
 set -e
 set +x
 
-if [[ ($1 == '--help') || ($1 == '-h') ]]; then
-  echo "usage: $(basename $0)"
+if [[ ($1 == '--help') || ($1 == '-h') || ($1 == '') || ($2 == '') ]]; then
+  echo "usage: $(basename $0) {bionic,focal} playwright:localbuild-bionic"
   echo
-  echo "Build Playwright docker image and tag it as 'playwright:localbuild'."
+  echo "Build Playwright docker image and tag it as 'playwright:localbuild-bionic'."
   echo "Once image is built, you can run it with"
   echo ""
-  echo "  docker run --rm -it playwright:localbuild /bin/bash"
+  echo "  docker run --rm -it playwright:localbuildbionic /bin/bash"
   echo ""
   echo "NOTE: this requires on Playwright dependencies to be installed with 'npm install'"
   echo "      and Playwright itself being built with 'npm run build'"
@@ -27,4 +27,4 @@ cd "$(dirname "$0")"
 # image.
 node ../../packages/build_package.js playwright ./playwright.tar.gz
 
-docker build -t "playwright:localbuild" -f Dockerfile.bionic .
+docker build -t "$2" -f "Dockerfile.$1" .

docs/docker/tag_and_push.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
 
-echo "-- tagging: $1"
-docker tag playwright:localbuild $1
-docker push $1
+echo "-- tagging: $2"
+docker tag $1 $2
+docker push $2