Add embed cloudflare deployment and CI (#3940)

.circleci/config.yml

@@ -11,7 +11,7 @@ commands:
           name: Combine package-lock.json files to single file and also adds a random value at the end to cache bust if needed
           command: |
             ls -d -- packages/*/*-lock.json | awk -F packages '{printf "\"packages%s\" ", $2}' | xargs cat > << parameters.filename >>
-            echo cache-bust-v1 >> <<parameters.filename >>
+            echo cache-bust-1692933717156 >> <<parameters.filename >>
 
   create_concatenated_patch_file:
     description: "Concatenate all patch-files recognized by lerna.js into single file. File is used as checksum source for part of caching key."
@@ -85,6 +85,7 @@ jobs:
             - ./packages/stems/node_modules
             - ./packages/common/node_modules
             - ./packages/probers/node_modules
+            - ./packages/embed/node_modules
 
       - save_cache:
           key: cache-{{ .Revision }}
@@ -142,9 +143,11 @@ workflows:
             packages/mobile/.* run-mobile-workflow true
             packages/stems/.* run-stems-workflow true
             packages/stems/.* run-web-workflow true
+            packages/embed/.* run-embed-workflow true
             .circleci/.* run-web-workflow true
             .circleci/.* run-mobile-workflow true
             .circleci/.* run-stems-workflow true
+            .circleci/.* run-embed-workflow true
             packages/eslint-config-audius/.* run-web-workflow true
             packages/eslint-config-audius/.* run-mobile-workflow true
             packages/eslint-config-audius/.* run-stems-workflow true

.circleci/src/@continue_config.yml

@@ -17,6 +17,9 @@ parameters:
   run-stems-workflow:
     type: boolean
     default: false
+  run-embed-workflow:
+    type: boolean
+    default: false
 # Can enable recurring probers against stage at some point
 # workflows:
 #   version: 2.1

.circleci/src/commands/@commands.yml

@@ -8,7 +8,7 @@ create_concatenated_package_lock:
         name: Combine package-lock.json files to single file and also adds a random value at the end to cache bust if needed
         command: |
           ls -d -- packages/*/*-lock.json | awk -F packages '{printf "\"packages%s\" ", $2}' | xargs cat > << parameters.filename >>
-          echo cache-bust-v1 >> <<parameters.filename >>
+          echo cache-bust-1692933717156 >> <<parameters.filename >>
 
 create_concatenated_patch_file:
   description: "Concatenate all patch-files recognized by lerna.js into single file. File is used as checksum source for part of caching key."

.circleci/src/commands/@embed-commands.yml

@@ -0,0 +1,56 @@
+embed-build:
+  parameters:
+    build-directory:
+      default: 'packages/embed/build-production'
+      type: string
+    build-type:
+      default: 'prod'
+      type: string
+  steps:
+    - checkout
+    - attach_workspace:
+        at: ./
+    - run:
+        name: build
+        no_output_timeout: 60m
+        command: |
+          cd packages/embed
+          npm run build:<< parameters.build-type >>
+    - persist_to_workspace:
+        root: ./
+        paths:
+          - << parameters.build-directory >>
+
+
+embed-install-wrangler:
+  steps:
+    - run:
+        name: install wrangler
+        command: 'cd packages/embed && npm install @cloudflare/wrangler'
+
+
+embed-deploy-cloudflare:
+  parameters:
+    build-type:
+      default: 'production'
+      type: string
+    environment:
+      default: 'production'
+      type: string
+  steps:
+    - checkout
+    - attach_workspace:
+        at: ./
+    - embed-install-wrangler
+    - run:
+        name: Set up workers site
+        command: |
+          cd packages/embed/workers-site
+          npm i
+          cd ../
+          mv build-<< parameters.build-type >> build
+    - run:
+        name: Deploy to Cloudflare
+        command: |
+          cd packages/embed
+          npx wrangler publish --env << parameters.environment >>

.circleci/src/jobs/@embed-jobs.yml

@@ -0,0 +1,75 @@
+embed-init:
+  working_directory: ~/audius-client
+  docker:
+    - image: circleci/node:14.18
+  steps:
+    - checkout
+
+    - create_concatenated_package_lock:
+        filename: combined-package-lock.txt
+
+    - create_concatenated_patch_file:
+        filename: combined-patch-file.txt
+
+    - restore_cache:
+        keys:
+          - cache-{{ checksum "package-lock.json" }}-{{ checksum "combined-package-lock.txt" }}-{{ checksum "combined-patch-file.txt" }}
+
+    - restore_cache:
+        keys:
+          - cache-{{ .Revision }}
+
+    - run:
+        name: Link packages
+        command: |
+          npm run link
+
+    - persist_to_workspace:
+        root: ./
+        paths:
+          - node_modules
+          - packages/embed/node_modules
+          - packages/stems/node_modules
+          - packages/stems/dist
+
+
+embed-build-staging:
+  working_directory: ~/audius-client
+  docker:
+    - image: circleci/node:14.18
+  resource_class: xlarge
+  steps:
+    - embed-build:
+        build-directory: packages/embed/build-staging
+        build-type: stage
+
+
+embed-build-production:
+  working_directory: ~/audius-client
+  docker:
+    - image: circleci/node:14.18
+  resource_class: xlarge
+  steps:
+    - embed-build:
+        build-directory: packages/embed/build-production
+        build-type: prod
+
+
+embed-deploy-staging-cloudflare:
+  working_directory: ~/audius-client
+  docker:
+    - image: cimg/python:3.7.12-node
+  steps:
+    - embed-deploy-cloudflare:
+        build-type: staging
+        environment: staging
+
+
+embed-deploy-production-cloudflare:
+  working_directory: ~/audius-client
+  docker:
+    - image: cimg/python:3.7.12-node
+  steps:
+    - embed-deploy-cloudflare:
+        build-type: production
+        environment: production

.circleci/src/workflows/embed.yml

@@ -0,0 +1,29 @@
+when: << pipeline.parameters.run-embed-workflow >>
+jobs:
+  - embed-init
+  - embed-build-staging:
+      requires:
+        - embed-init
+      filters:
+        branches:
+          only: /^main$/
+  - embed-deploy-staging-cloudflare:
+      context: Audius Client
+      requires:
+        - embed-build-staging
+      filters:
+        branches:
+          only: /^main$/
+  - embed-build-production:
+      requires:
+        - embed-init
+      filters:
+        branches:
+          only: /(^release.*)$/
+  - embed-deploy-production-cloudflare:
+      context: Audius Client
+      requires:
+        - embed-build-production
+      filters:
+        branches:
+          only: /(^release.*)$/

packages/embed/.eslintignore

@@ -1,3 +1,6 @@
 **/node_modules/*
 **/assets/*
 build/*
+dist/*
+build-staging/*
+build-production/*

packages/embed/.gitignore

@@ -1,5 +1,8 @@
 node_modules
-/build
 /*.log
 .DS_Store
-/*.DS_Store
+/*.DS_Store
+build
+dist
+build-staging
+build-production

packages/embed/README.md

@@ -13,13 +13,12 @@ npm run start:stage
 
 # Run against production Audius services
 npm run start:prod
-```
+
 
 ## Deploying
-```
-# First have to create the build
-npm run build:<env> 
 
-# Then deploy changes
-npm run deploy:<env>
+Deployed via CI
+
+```
+npx wrangler publish --env staging
 ```

packages/embed/package.json

@@ -6,12 +6,10 @@
     "start:dev": "env-cmd -f .env.dev env-cmd -f .env.local npm run -s dev",
     "start:stage": "env-cmd -f .env.stage env-cmd -f .env.local npm run -s dev",
     "start:prod": "env-cmd -f .env.prod env-cmd -f .env.local npm run -s dev",
-    "build:stage": "env-cmd -f .env.stage preact --max-old-space-size=8192 build --no-prerender --no-sw --template src/template.html && npm run build-api",
-    "build:prod": "env-cmd -f .env.prod preact --max-old-space-size=8192 build --no-prerender --no-sw --template src/template.html && npm run build-api",
+    "build:stage": "env-cmd -f .env.stage preact --max-old-space-size=8192 build --no-prerender --no-sw --template src/template.html && npm run build-api && mv build build-staging",
+    "build:prod": "env-cmd -f .env.prod preact --max-old-space-size=8192 build --no-prerender --no-sw --template src/template.html && npm run build-api && mv build build-production",
     "build-api": "webpack --config src/api/webpack.config.js -o build/api.js",
     "serve": "preact --max-old-space-size=8192 build --no-prerender --no-sw --template src/template.html && preact serve",
-    "deploy:prod": "aws s3 sync build s3://bedtime.audius.co --delete && aws s3 cp s3://bedtime.audius.co/index.html s3://bedtime.audius.co/index.html  --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html --metadata-directive REPLACE --acl public-read && aws cloudfront create-invalidation --distribution-id E33HWSH5ZFFGR1 --paths \"/*\"",
-    "deploy:stage": "aws s3 sync build s3://bedtime.staging.audius.co --delete && aws s3 cp s3://bedtime.staging.audius.co/index.html s3://bedtime.staging.audius.co/index.html  --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html --metadata-directive REPLACE --acl public-read && aws cloudfront create-invalidation --distribution-id E2FVSCZAVXZNSY --paths \"/*\"",
     "lint": "eslint src",
     "lint:fix": "eslint --cache --fix --ext=js,jsx,ts,tsx src"
   },

packages/embed/workers-site/index.js

@@ -0,0 +1,58 @@
+import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+
+const DEBUG = false
+
+addEventListener('fetch', (event) => {
+  try {
+    event.respondWith(handleEvent(event))
+  } catch (e) {
+    if (DEBUG) {
+      return event.respondWith(
+        new Response(e.message || e.toString(), {
+          status: 500
+        })
+      )
+    }
+    event.respondWith(new Response('Internal Error', { status: 500 }))
+  }
+})
+
+async function handleEvent(event) {
+  const options = {}
+
+  // Always map requests to `/` since this is an SPA
+  options.mapRequestToAsset = (request) => {
+    const cleanedUrl = request.url.replace('/embed/', '/')
+    const req = mapRequestToAsset(new Request(cleanedUrl, request))
+    const url = new URL(req.url)
+
+    if (url.pathname.endsWith('.html')) {
+      return new Request(`${url.origin}/index.html`, req)
+    }
+    return req
+  }
+  try {
+    if (DEBUG) {
+      // customize caching
+      options.cacheControl = {
+        bypassCache: true
+      }
+    }
+
+    const page = await getAssetFromKV(event, options)
+
+    // allow headers to be altered
+    const response = new Response(page.body, page)
+
+    response.headers.set('Access-Control-Allow-Origin', '*')
+    response.headers.set('X-XSS-Protection', '1; mode=block')
+    response.headers.set('X-Content-Type-Options', 'nosniff')
+    response.headers.set('X-Frame-Options', 'DENY')
+    response.headers.set('Referrer-Policy', 'unsafe-url')
+    response.headers.set('Feature-Policy', 'none')
+
+    return response
+  } catch (e) {
+    return new Response(e.message || e.toString(), { status: 500 })
+  }
+}

packages/embed/workers-site/package.json

@@ -0,0 +1,9 @@
+{
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@cloudflare/kv-asset-handler": "~0.0.11"
+  }
+}

packages/embed/wrangler.toml

@@ -0,0 +1,15 @@
+type = "webpack"
+account_id = "3811365464a8e56b2b27a5590e328e49"
+workers_dev = true
+
+[site]
+bucket = "./build"
+entry-point = "workers-site"
+
+[env.staging]
+name = "embed-staging"
+route = "embed.staging.audius.co/*"
+
+[env.production]
+name = "embed"
+route = "embed.audius.co/*"