Deploy develop branch to Cloudflare Pages (#23454)

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

.github/cfp_headers

@@ -0,0 +1,10 @@
+/*
+  X-XSS-Protection: 1; mode=block
+  X-Content-Type-Options: nosniff
+  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+
+/version
+  Content-Type: text/plain
+
+/apple-app-site-association
+  Content-Type: application/json

.github/workflows/build_develop.yml

@@ -1,21 +1,25 @@
 # Separate to the main build workflow for access to develop
 # environment secrets, largely similar to build.yaml.
-name: Build and Package develop
+name: Build and Deploy develop
 on:
   push:
     branches: [ develop ]
   repository_dispatch:
     types: [ element-web-notify ]
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
+  group: ${{ github.repository_owner }}-${{ github.workflow }}-${{ github.ref_name }}
   cancel-in-progress: true
 jobs:
   build:
-    name: "Build & Upload source maps to Sentry"
+    name: "Build & Deploy develop.element.io"
     # Only respect triggers from our develop branch, ignore that of forks
     if: github.repository == 'vector-im/element-web'
     runs-on: ubuntu-latest
     environment: develop
+    env:
+      R2_BUCKET: 'element-web-develop'
+      R2_URL: ${{ secrets.CF_R2_S3_API }}
+      R2_PUBLIC_URL: 'https://element-web-develop.element.io'
     steps:
       - uses: actions/checkout@v2
 
@@ -34,11 +38,16 @@ jobs:
           SENTRY_URL: ${{ secrets.SENTRY_URL }}
           SENTRY_ORG: element
           SENTRY_PROJECT: riot-web
+          # We only deploy the latest bundles to Cloudflare Pages and use _redirects to fallback to R2 for
+          # older ones. This redirect means that 'self' is insufficient in the CSP,
+          # and we have to add the R2 URL.
+          # Once Cloudflare redirects support proxying mode we will be able to ditch this.
+          # See Proxying in support table at https://developers.cloudflare.com/pages/platform/redirects
+          CSP_EXTRA_SOURCE: ${{ env.R2_PUBLIC_URL }}
 
       - run: mv dist/element-*.tar.gz dist/develop.tar.gz
 
-      # We keep the latest develop.tar.gz as the artifact uploaded later expires after 24 and requires auth to download
-      # Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
+      # TODO: remove this once the element-desktop fetch script is updated to grab develop.element.io/develop.tar.gz
       - name: Deploy develop.tar.gz to Github Pages
         uses: JamesIves/github-pages-deploy-action@v4
         with:
@@ -50,12 +59,64 @@ jobs:
           name: webapp
           path: dist/develop.tar.gz
           retention-days: 1
+          
+      - name: Extract webapp
+        run: |
+          mkdir _deploy
+          tar xf dist/develop.tar.gz -C _deploy --strip-components=1
+          
+      - name: Copy config
+        run: cp element.io/develop/config.json _deploy/config.json
+
+      - name: Populate 404.html
+        run: echo "404 Not Found" > _deploy/404.html
+
+      - name: Populate _headers
+        run: cp .github/cfp_headers _deploy/_headers
+
+      # Redirect requests for the develop tarball and the historical bundles to R2
+      - name: Populate _redirects
+        run: |
+          {
+            echo "/develop.tar.gz $R2_PUBLIC_URL/develop.tar.gz 301"
+            for bundle in $(aws s3 ls s3://$R2_BUCKET/bundles/ --endpoint-url $R2_URL --region=auto | awk '{print $2}'); do
+              echo "/bundles/${bundle}* $R2_PUBLIC_URL/bundles/${bundle}:splat 301"
+            done
+          } | tee _deploy/_redirects
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}
 
       - name: Wait for other steps to succeed
         uses: lewagon/wait-on-check-action@v1.1.2
         with:
           ref: ${{ github.ref }}
-          running-workflow-name: 'Build & Upload source maps to Sentry'
+          running-workflow-name: 'Build & Deploy develop.element.io'
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           wait-interval: 10
           check-regexp: ^((?!SonarQube|issues|board).)*$
+
+      # We keep the latest develop.tar.gz on R2 instead of relying on the github artifact uploaded earlier
+      # as the expires after 24h and requires auth to download.
+      # Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
+      - name: Deploy to R2
+        run: |
+          aws s3 cp dist/develop.tar.gz s3://$R2_BUCKET/develop.tar.gz --endpoint-url $R2_URL --region=auto
+          aws s3 cp _deploy/bundles s3://$R2_BUCKET/bundles --recursive --endpoint-url $R2_URL --region=auto
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}
+          
+      - name: Deploy to Cloudflare Pages
+        id: cfp
+        uses: cloudflare/pages-action@1
+        with:
+          apiToken: ${{ secrets.CF_PAGES_TOKEN }}
+          accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
+          projectName: element-web-develop
+          directory: _deploy
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          
+      - run: |
+          echo "Deployed to ${{ steps.cfp.outputs.url }}" >> $GITHUB_STEP_SUMMARY
+