Use assetPrefix with CDN in frontend

kitspace · Sep 24, 2024 · 9ce1a2a · 9ce1a2a
1 parent 1704503
commit 9ce1a2a
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 12 deletions.
diff --git a/docker-compose.deploy.yml b/docker-compose.deploy.yml
@@ -4,7 +4,8 @@ services:
     image: ghcr.io/kitspace/frontend${FRONTEND_DEPLOY_IMAGE_TAG}
     environment:
       - NODE_ENV=production
-      - 'KITSPACE_ASSET_URL=https://processor-cdn.${KITSPACE_DOMAIN}/${KITSPACE_PROCESSOR_ASSET_VERSION}'
+      - 'KITSPACE_PROCESSOR_ASSET_URL=https://processor-cdn.${KITSPACE_DOMAIN}/${KITSPACE_PROCESSOR_ASSET_VERSION}'
+      - 'KITSPACE_FRONTEND_ASSET_URL=https://frontend-cdn.${KITSPACE_DOMAIN}'
     restart: always
 
   gitea:

diff --git a/docker-compose.e2e.yml b/docker-compose.e2e.yml
@@ -3,7 +3,7 @@ version: '2.3'
 services:
   frontend:
     environment:
-      - 'KITSPACE_ASSET_URL=http://processor-bucket.kitspace-minio.test:3000/${KITSPACE_PROCESSOR_ASSET_VERSION}'
+      - 'KITSPACE_PROCESSOR_ASSET_URL=http://processor-bucket.kitspace-minio.test:3000/${KITSPACE_PROCESSOR_ASSET_VERSION}'
     volumes:
       - /etc/hosts:/etc/hosts:ro
 

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
@@ -8,7 +8,7 @@ services:
       target: git-installed
     environment:
       - NODE_ENV=development
-      - 'KITSPACE_ASSET_URL=http://processor-bucket.kitspace-minio.test:3000/${KITSPACE_PROCESSOR_ASSET_VERSION}'
+      - 'KITSPACE_PROCESSOR_ASSET_URL=http://processor-bucket.kitspace-minio.test:3000/${KITSPACE_PROCESSOR_ASSET_VERSION}'
     ports:
       - '1234:3000'
       - '9229:9229'

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -23,23 +23,27 @@ module.exports = async phase => {
     imageDomains = [
       // TODO: use a wildcard when https://github.com/vercel/next.js/pull/27345 get merged
       `gitea.${process.env.KITSPACE_DOMAIN}`,
-      new URL(process.env.KITSPACE_ASSET_URL).hostname,
+      new URL(process.env.KITSPACE_PROCESSOR_ASSET_URL).hostname,
       'github.com',
       'raw.githubusercontent.com',
       'secure.gravatar.com',
     ]
   }
-  return {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
     // we use nginx to compress so we turn off next.js gzip compression
     compress: false,
     publicRuntimeConfig: {
       KITSPACE_DOMAIN: process.env.KITSPACE_DOMAIN,
       KITSPACE_GITEA_URL: process.env.KITSPACE_GITEA_URL,
-      KITSPACE_ASSET_URL: process.env.KITSPACE_ASSET_URL,
+      KITSPACE_PROCESSOR_ASSET_URL: process.env.KITSPACE_PROCESSOR_ASSET_URL,
       KITSPACE_MEILISEARCH_URL: process.env.KITSPACE_MEILISEARCH_URL,
       MAX_FILE_SIZE: process.env.MAX_FILE_SIZE,
       meiliApiKey: meiliSearchOnlyKey.key,
     },
+    assetPrefix: process.env.KITSPACE_FRONTEND_ASSET_URL,
     eslint: {
       ignoreDuringBuilds: true,
     },
@@ -216,4 +220,5 @@ module.exports = async phase => {
       ]
     },
   }
+  return nextConfig
 }
diff --git a/frontend/src/hooks/useThumbnail.js b/frontend/src/hooks/useThumbnail.js
@@ -3,7 +3,7 @@ import getConfig from 'next/config'
 
 import { fetcher } from './s3HeadFetcher'
 
-const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_ASSET_URL
+const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_PROCESSOR_ASSET_URL
 
 const useThumbnail = (repoFullName, projectName) => {
   const img = `${repoFullName}/HEAD/${projectName}/images/top-large.png`

diff --git a/frontend/src/pages/[user]/[repo]/[project]/IBOM.jsx b/frontend/src/pages/[user]/[repo]/[project]/IBOM.jsx
@@ -4,7 +4,7 @@ import path from 'path'
 import IBOM from '@components/Board/IBOM'
 import getConfig from 'next/config'
 
-const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_ASSET_URL
+const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_PROCESSOR_ASSET_URL
 
 export const getServerSideProps = async ({ params }) => {
   const IBOMHtml = await fs.readFile(

diff --git a/frontend/src/pages/[user]/[repo]/[project]/index.jsx b/frontend/src/pages/[user]/[repo]/[project]/index.jsx
@@ -14,7 +14,7 @@ import {
 import SharedProjectPage from '@components/SharedProjectPage'
 import Custom404 from '@pages/404'
 
-const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_ASSET_URL
+const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_PROCESSOR_ASSET_URL
 
 const MultiProjectPage = props =>
   props.notFound ? <Custom404 /> : <SharedProjectPage {...props} />

diff --git a/frontend/src/pages/[user]/[repo]/index.tsx b/frontend/src/pages/[user]/[repo]/index.tsx
@@ -13,7 +13,7 @@ import ErrorPage from '@pages/_error'
 import Page from '@components/Page'
 import ProjectPage from './[project]'
 
-const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_ASSET_URL
+const assetUrl = getConfig().publicRuntimeConfig.KITSPACE_PROCESSOR_ASSET_URL
 
 interface RepoPageProps {
   errorCode?: number

diff --git a/frontend/src/server.js b/frontend/src/server.js
@@ -28,7 +28,7 @@ async function main() {
     const { user, repo, project } = req.params
     return res.redirect(
       307,
-      `${process.env.KITSPACE_ASSET_URL}/${user}/${repo}/HEAD/${project}/1-click-BOM.tsv`,
+      `${process.env.KITSPACE_PROCESSOR_ASSET_URL}/${user}/${repo}/HEAD/${project}/1-click-BOM.tsv`,
     )
   })
 

diff --git a/frontend/test/IntroText.test.tsx b/frontend/test/IntroText.test.tsx
@@ -10,7 +10,7 @@ beforeAll(() => {
     default: () => ({
       publicRuntimeConfig: {
         KITSPACE_GITEA_URL: 'https://gitea.kitspace.test',
-        KITSPACE_ASSET_URL: 'https://example.s3.amazonaws.com/',
+        KITSPACE_PROCESSOR_ASSET_URL: 'https://example.s3.amazonaws.com/',
       },
     }),
   }))