Merge branch 'ke/cdn' of https://github.com/kitspace/kitspace-v2

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://${S3_PROCESSOR_BUCKET_NAME}.s3.amazonaws.com/${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:

docker-compose.e2e.yml

@@ -3,7 +3,9 @@ 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}'
+      # blank means it will use '/' i.e. the next.js server
+      - 'KITSPACE_FRONTEND_ASSET_URL='
     volumes:
       - /etc/hosts:/etc/hosts:ro
 

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'

frontend/next.config.js

@@ -7,6 +7,7 @@ const {
 module.exports = async phase => {
   let meiliSearchOnlyKey = {}
   let imageDomains = []
+  // leaving out these steps for build and test phases
   if ([PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_SERVER].includes(phase)) {
     // the search-only api key gets generated by meili so we have to retrieve
     // it at runtime rather than use an env variable
@@ -19,27 +20,26 @@ module.exports = async phase => {
     meiliSearchOnlyKey = meiliKeys.results.find(
       key => key.actions.length === 1 && key.actions[0] === 'search',
     )
-
     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,
-      'github.com',
-      'raw.githubusercontent.com',
-      'secure.gravatar.com',
+      new URL(process.env.KITSPACE_PROCESSOR_ASSET_URL).hostname,
     ]
   }
-  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_FRONTEND_ASSET_URL: process.env.KITSPACE_FRONTEND_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 +216,5 @@ module.exports = async phase => {
       ]
     },
   }
+  return nextConfig
 }

frontend/src/components/Board/BoardShowcase.jsx

@@ -46,11 +46,14 @@ const BoardShowcase = ({ assetPath }) => {
               >
                 {isLoading || isError ? null : (
                   <Image
-                    {...dimensions}
+                    // we are not using the next `Image` magic in order to simplify our CDN setup
+                    // svgs are not optimized anyway so this is actually a no-op
+                    unoptimized
                     alt="PCB top view"
                     data-cy="board-showcase-top"
                     objectFit="contain"
                     src={top}
+                    {...dimensions}
                   />
                 )}
               </div>
@@ -64,11 +67,14 @@ const BoardShowcase = ({ assetPath }) => {
               >
                 {isLoading || isError ? null : (
                   <Image
-                    {...dimensions}
+                    // we are not using the next `Image` magic in order to simplify our CDN setup
+                    // svgs are not optimized anyway so this is actually a no-op
+                    unoptimized
                     alt="PCB bottom view"
                     data-cy="board-showcase-bottom"
                     objectFit="contain"
                     src={bottom}
+                    {...dimensions}
                   />
                 )}
               </div>

frontend/src/components/Board/OrderPCBs.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import getConfig from 'next/config'
 import Image from 'next/image'
 import { object, string } from 'prop-types'
 import { Icon } from 'semantic-ui-react'
@@ -7,6 +7,9 @@ import styles from './OrderPCBs.module.scss'
 
 const serviceLogoDimensions = { height: 29, width: 100 }
 
+const frontendAssetUrl =
+  getConfig().publicRuntimeConfig.KITSPACE_FRONTEND_ASSET_URL || ''
+
 const OrderPCBs = ({ zipUrl, boardSpecs, projectFullname }) => {
   const aislerUrl = `https://aisler.net/p/new?url=${zipUrl}&ref=kitspace`
   const pcbwayUrl = `https://www.pcbway.com/QuickOrderOnline.aspx?fileurl=${zipUrl}&from=kitspace`
@@ -48,8 +51,9 @@ const OrderPCBs = ({ zipUrl, boardSpecs, projectFullname }) => {
             onClick={trackClick('Aisler')}
           >
             <Image
+              unoptimized
               alt="Aisler logo"
-              src="/static/images/aisler.png"
+              src={`${frontendAssetUrl}/static/images/aisler.png`}
               {...serviceLogoDimensions}
             />
           </a>
@@ -63,8 +67,9 @@ const OrderPCBs = ({ zipUrl, boardSpecs, projectFullname }) => {
             onClick={trackClick('PCBWay')}
           >
             <Image
+              unoptimized
               alt="PCBWay logo"
-              src="/static/images/pcbway.png"
+              src={`${frontendAssetUrl}/static/images/pcbway.png`}
               {...serviceLogoDimensions}
             />
           </a>
@@ -78,8 +83,9 @@ const OrderPCBs = ({ zipUrl, boardSpecs, projectFullname }) => {
             onClick={trackClick('JLCPCB')}
           >
             <Image
+              unoptimized
               alt="JLCPCB logo"
-              src="/static/images/jlcpcb.png"
+              src={`${frontendAssetUrl}/static/images/jlcpcb.png`}
               {...serviceLogoDimensions}
             />
           </a>
@@ -93,8 +99,9 @@ const OrderPCBs = ({ zipUrl, boardSpecs, projectFullname }) => {
             onClick={trackClick('OSHPark')}
           >
             <Image
+              unoptimized
               alt="OSHPark logo"
-              src="/static/images/oshpark.png"
+              src={`${frontendAssetUrl}/static/images/oshpark.png`}
               {...serviceLogoDimensions}
             />
           </a>
@@ -107,8 +114,9 @@ const OrderPCBs = ({ zipUrl, boardSpecs, projectFullname }) => {
             onClick={trackClick('PCBGoGo')}
           >
             <Image
+              unoptimized
               alt="PCBGoGo logo"
-              src="/static/images/pcbgogo.png"
+              src={`${frontendAssetUrl}/static/images/pcbgogo.png`}
               {...serviceLogoDimensions}
             />
           </a>
@@ -129,6 +137,7 @@ const OrderPCBs = ({ zipUrl, boardSpecs, projectFullname }) => {
             onClick={trackClick('PCBShopper')}
           >
             <Image
+              unoptimized
               alt="PCBSHOPPER logo"
               src="/static/images/pcbshopper.png"
               {...serviceLogoDimensions}

frontend/src/components/ProjectCard/index.tsx

@@ -39,6 +39,8 @@ const ProjectCard = ({
         <div ref={intersectionObserverRef} className={styles.thumbnail}>
           {isLoading || isError ? null : (
             <Image
+              // we are not using the next `Image` magic in order to simplify our CDN setup
+              unoptimized
               alt={`Render of PCB of ${nameOnCard}`}
               data-cy="project-card-thumbnail"
               height={180}

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`

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(

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} />

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

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`,
     )
   })
 

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/',
       },
     }),
   }))

processor/README.md

@@ -51,3 +51,5 @@ remove the bucket. E.g.:
 ```
 ssh [email protected] 'aws s3 rm s3://kitspace-staging-review --recursive'
 ```
+
+You also need to purge the Bunny CDN cache via the bunny.net Dashboard.