Migrate production frontend to Static Web Apps

.github/workflows/ci.yml

@@ -34,10 +34,10 @@ jobs:
 
     front-end-build:
         strategy:
-            # fail-fast: false
+            fail-fast: false
             matrix:
                 os: [windows, ubuntu]
-                node-version: [20, latest]
+                node-version: [20, 24]
         runs-on: ${{ matrix.os }}-latest
         timeout-minutes: 12
         steps:

.github/workflows/fe-cd.yml

@@ -1,9 +1,9 @@
-# Front Build and Deploy (Release to blob)
+# Front Build and Deploy (Release to Blob and Static Web Apps)
 
 name: front-end-build-deploy
 on:
     push:
-        branches: ["v2", "main"]
+        branches: ["v2"]
         paths:
             - ".github/workflows/fe-cd.yml"
             - "client-config-app/**"
@@ -15,11 +15,10 @@ permissions:
     contents: read
 
 env:
-    # [INT_CONFIG, PROD_CONFIG]
-    WEBSITE: ${{ fromJSON('["stickers-test.azureedge.net","sticker.newfuture.cc"]')[ github.ref_name == 'v2'] }}
-    REACT_APP_API_ROOT: ${{ fromJSON('["https://stickers-test.azurewebsites.net","https://stickers-api.newfuture.cc"]')[ github.ref_name == 'v2'] }}
-    REACT_APP_AAD_ID: ${{ fromJSON('["eae0aa56-582c-40f7-8daa-b3eb8d1f0732","695d3f13-6131-4224-aacd-26c8aff039d2"]')[ github.ref_name == 'v2'] }}
-    APP_PRE_FIX: ${{ fromJSON('["[I]",""]')[ github.ref_name == 'v2'] }}
+    WEBSITE: sticker.newfuture.cc
+    REACT_APP_API_ROOT: https://stickers-api.newfuture.cc
+    REACT_APP_AAD_ID: 695d3f13-6131-4224-aacd-26c8aff039d2
+    APP_PRE_FIX: ""
 
 # This allows a subsequently queued workflow run to interrupt previous runs
 concurrency:
@@ -60,7 +59,7 @@ jobs:
     front-end-deploy:
         needs: [front-end-build]
         environment:
-            name: ${{ fromJSON('["Integration","Production"]')[ github.ref_name == 'v2'] }}
+            name: Production
             url: https://${{env.WEBSITE}}/
         runs-on: ubuntu-latest
         timeout-minutes: 10
@@ -74,7 +73,14 @@ jobs:
                   mv website/build ./www \
                   && mv manifest/build/* ./www/ \
                   && mv client-config-app/build ./www/config \
-                  && mv official-stickers/build ./www/official-stickers \
+                  && mv official-stickers/build ./www/official-stickers
+
+            - name: "Stage production video"
+              run: |
+                  mkdir -p ./www/video \
+                  && curl --fail --location --retry 3 \
+                      --output ./www/video/my-stickers-v2.mp4 \
+                      https://stickersblob.z11.web.core.windows.net/video/my-stickers-v2.mp4
 
             - name: "Upload to blob storage"
               uses: azure/CLI@v1
@@ -91,14 +97,28 @@ jobs:
               uses: azure/login@v1
               with:
                   creds: ${{ secrets.AZURE_CREDENTIALS }}
-            - name: "Purge CDN endpoint"
-              uses: azure/CLI@v1
+            - name: "Get Static Web Apps deployment token"
+              uses: azure/CLI@v2
               with:
                   inlineScript: |
-                      az cdn endpoint purge --content-paths "/" "/config/" --ids "${{secrets.CDN_RESOURCE_ID}}"
-
-            # - name: "Preload CDN"
-            #   run: az cdn endpoint load --ids "${{secrets.CDN_RESOURCE_ID}}" --content-paths "/index.html" "/config/index.html" $(find www/ -name "*.js" -type f -printf "/%P")
+                      set -euo pipefail
+                      SWA_TOKEN="$(
+                        az staticwebapp secrets list \
+                          --name sticker \
+                          --resource-group custom-stickers \
+                          --query properties.apiKey \
+                          --output tsv
+                      )"
+                      test -n "${SWA_TOKEN}"
+                      echo "::add-mask::${SWA_TOKEN}"
+                      echo "SWA_DEPLOYMENT_TOKEN=${SWA_TOKEN}" >> "${GITHUB_ENV}"
+            - name: "Deploy to Static Web Apps"
+              uses: Azure/static-web-apps-deploy@v1
+              with:
+                  azure_static_web_apps_api_token: ${{ env.SWA_DEPLOYMENT_TOKEN }}
+                  action: upload
+                  app_location: www
+                  skip_app_build: true
 
             - name: logout
               run: az logout

server/appsettings.json

@@ -16,7 +16,7 @@
     "MicrosoftAppId": "eae0aa56-582c-40f7-8daa-b3eb8d1f0732", // Bot AAD APP ID
     "MicrosoftAppPassword": "", // Bot AAD APP secret
     "DB_PREFIX": "", // Prefix for DB table
-    "WEB_URL": "https://stickers-test.azureedge.net", // WEB URL for front-end page
+    "WEB_URL": "https://sticker.newfuture.cc", // WEB URL for front-end page
     "STICKERS_INDEX_URL": "https://stickersteststorage.z7.web.core.windows.net/official-stickers/index.json", // official-stickers index url
     "AZURE_STORAGE_CDN": "stickersteststorage.blob.core.windows.net", // CDN Domain for images
     "AZURE_STORAGE_CONTAINER": "stickers" // container name for images

website/public/staticwebapp.config.json

@@ -0,0 +1,53 @@
+{
+    "$schema": "https://json.schemastore.org/staticwebapp.config.json",
+    "routes": [
+        {
+            "route": "/",
+            "headers": {
+                "Cache-Control": "public, max-age=86400",
+                "Link": "</video/my-stickers-v2.mp4>; as=\"video\"; rel=\"preload\""
+            }
+        },
+        {
+            "route": "/config/",
+            "headers": {
+                "Cache-Control": "public, max-age=86400",
+                "Link": "<https://stickers-api.newfuture.cc>; rel=\"preconnect\"; crossorigin, <https://stickers.newfuture.cc>; rel=\"preconnect\""
+            }
+        },
+        {
+            "route": "/official-stickers/index.json",
+            "headers": {
+                "Cache-Control": "public, max-age=604800"
+            }
+        },
+        {
+            "route": "/video/*.mp4",
+            "headers": {
+                "Cache-Control": "public, max-age=63072000, immutable"
+            }
+        },
+        {
+            "route": "/*.{js,css,png,ico,jpeg,jpg,gif}",
+            "headers": {
+                "Cache-Control": "public, max-age=63072000, immutable"
+            }
+        },
+        {
+            "route": "/*.{html,json,webmanifest,zip}",
+            "headers": {
+                "Cache-Control": "public, max-age=604800"
+            }
+        }
+    ],
+    "responseOverrides": {
+        "404": {
+            "rewrite": "/404.html",
+            "statusCode": 404
+        }
+    },
+    "mimeTypes": {
+        ".mp4": "video/mp4",
+        ".webmanifest": "application/manifest+json"
+    }
+}