Decrease the size of the Dockerfile (#81)

.github/workflows/cronjobs.yaml

@@ -13,6 +13,6 @@ jobs:
         branch: [main]
     with:
       branch: ${{ matrix.branch }}
-      images: '["registry.access.redhat.com/ubi9/nodejs-20"]'
+      images: '["registry.access.redhat.com/ubi9/nodejs-20-minimal"]'
     secrets:
       token: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

@@ -1,24 +1,38 @@
-FROM registry.access.redhat.com/ubi9/nodejs-20@sha256:885a9ae3a7fcd8e24ab7a35ef344a30481a42c37ab5cf41339d8bcba46857cb1 as Build
-#
-COPY . .
+# Builder Stage
+FROM registry.access.redhat.com/ubi9/nodejs-20-minimal@sha256:129108930931cff55453cc6f54db1984f484a9d8f62dfbd9d25b4175e1ba7802 as builder
 USER root
-EXPOSE 3000
-RUN echo "export PATH=${PATH}:$HOME/node_modules/.bin" >> ~/.bashrc && \
-    npm install --ignore-scripts && \
-    npm run build && \
-    chmod -R 777 /opt/app-root/src/.npm && \
-    echo "NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN = ${NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN}" && \
-    npm cache clean --force
+
+COPY package.json package-lock.json ./
+RUN npm pkg delete scripts.prepare
+RUN npm ci --ignore-scripts --network-timeout=100000 || \
+    (echo "Retrying npm ci" && sleep 5 && npm ci --ignore-scripts \
+    --network-timeout=100000) || \
+    (echo "Retrying npm ci again" && sleep 5 && npm ci --ignore-scripts \
+    --network-timeout=100000)
+COPY . .
+RUN npm run build
+
+# Production Stage
+FROM registry.access.redhat.com/ubi9/nodejs-20-minimal@sha256:129108930931cff55453cc6f54db1984f484a9d8f62dfbd9d25b4175e1ba7802 as production
 USER 1001
-CMD ["node_modules/.bin/next", "start"]
+EXPOSE 3000
 
 LABEL \
-      com.redhat.component="trusted-artifact-signer-rekor-ui" \
-      name="trusted-artifact-signer-rekor-ui" \
-      version="0.0.1" \
-      summary="User Interface for checking Rekor Entries" \
-      description="Provides a user interface for checking Rekor Entries through a Node App" \
-      io.k8s.description="Provides a user interface for checking Rekor Entries through a Node App" \
-      io.k8s.display-name="Provides a user interface for checking Rekor Entries through a Node App" \
-      io.openshift.tags="rekor-ui, rekor, cli, rhtas, trusted, artifact, signer, sigstore" \
-      maintainer="[email protected]"
+    com.redhat.component="trusted-artifact-signer-rekor-ui" \
+    name="trusted-artifact-signer-rekor-ui" \
+    version="0.0.1" \
+    summary="User Interface for checking Rekor Entries" \
+    description="Provides a user interface for checking Rekor Entries through a Node App" \
+    io.k8s.description="Provides a user interface for checking Rekor Entries through a Node App" \
+    io.k8s.display-name="Provides a user interface for checking Rekor Entries through a Node App" \
+    io.openshift.tags="rekor-ui, rekor, cli, rhtas, trusted, artifact, signer, sigstore" \
+    maintainer="[email protected]"
+
+COPY --from=builder /opt/app-root/src/package.json .
+COPY --from=builder /opt/app-root/src/package-lock.json .
+COPY --from=builder /opt/app-root/src/next.config.js ./
+COPY --from=builder /opt/app-root/src/public ./public
+COPY --from=builder /opt/app-root/src/.next/standalone ./
+COPY --from=builder /opt/app-root/src/.next/static ./.next/static
+
+CMD ["node", "server.js"]

README.md

@@ -10,7 +10,7 @@ https://securesign.github.io/rekor-search-ui/
 
 ## Requirements
 
-- [Node.js](https://nodejs.org/en) 18.x+
+- [Node.js](https://nodejs.org/en) 20.x+
 - Access to a [Rekor server](https://github.com/securesign/rekor), or a full deployment of [Trusted Artifact Signer (TAS)](https://access.redhat.com/documentation/en-us/red_hat_trusted_artifact_signer/2024-q1/html/deployment_guide/verify_the_trusted_artifact_signer_installation)
 
 ## Getting Started

next.config.js

@@ -2,27 +2,13 @@
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-	env: {
-		NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN:
-			process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN,
-	},
 	reactStrictMode: true,
 	assetPrefix: "./",
 	images: {
 		loader: "akamai",
 		path: "",
 	},
-	// output: "export",
-	publicRuntimeConfig: {
-		NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN:
-			process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN,
-		// remove private env variables
-		processEnv: Object.fromEntries(
-			Object.entries(process.env).filter(([key]) =>
-				key.includes("NEXT_PUBLIC_"),
-			),
-		),
-	},
+	output: "standalone",
 	transpilePackages: [
 		"@patternfly/react-core",
 		"@patternfly/react-icons",

package.json

@@ -2,7 +2,7 @@
 	"name": "rekor-search-ui",
 	"version": "0.1.0",
 	"engines": {
-		"node": "18.x"
+		"node": "20.x"
 	},
 	"scripts": {
 		"dev": "next dev",
@@ -14,7 +14,7 @@
 		"format:fix": "prettier --write .",
 		"lint": "next lint",
 		"generate": "./hack/generate_types.sh",
-		"prepare": "husky && husky init",
+		"prepare": "husky",
 		"test": "jest",
 		"test:watch": "jest --watch",
 		"test:ci": "jest --ci",

src/modules/api/context.tsx

@@ -8,7 +8,6 @@ import {
 	useState,
 } from "react";
 import { RekorClient } from "rekor";
-import getConfig from "next/config";
 
 export interface RekorClientContext {
 	client: RekorClient;
@@ -20,40 +19,32 @@ export const RekorClientContext = createContext<RekorClientContext | undefined>(
 	undefined,
 );
 
-export const RekorClientProvider: FunctionComponent<PropsWithChildren<{}>> = ({
-	children,
-}) => {
-	const [baseUrl, setBaseUrl] = useState<string>();
-	const { publicRuntimeConfig } = getConfig();
+interface RekorClientProviderProps {
+	initialDomain?: string;
+}
+
+export const RekorClientProvider: FunctionComponent<
+	PropsWithChildren<RekorClientProviderProps>
+> = ({ children, initialDomain }) => {
+	const [baseUrl, setBaseUrl] = useState<string | undefined>(initialDomain);
 
 	useEffect(() => {
 		if (baseUrl === undefined) {
-			if (publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN) {
-				setBaseUrl(publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN);
+			if (process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN) {
+				setBaseUrl(process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN);
 			} else {
 				setBaseUrl("https://rekor.sigstore.dev");
 			}
 		}
-	}, [
-		baseUrl,
-		publicRuntimeConfig,
-		publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN,
-	]);
+	}, [baseUrl]);
 
 	const context: RekorClientContext = useMemo(() => {
-		if (
-			baseUrl === undefined &&
-			publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
-		) {
-			setBaseUrl(publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN);
-		}
-
 		return {
 			client: new RekorClient({ BASE: baseUrl }),
 			baseUrl,
 			setBaseUrl,
 		};
-	}, [baseUrl, publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN]);
+	}, [baseUrl]);
 
 	return (
 		<RekorClientContext.Provider value={context}>

src/modules/components/SearchForm.tsx

@@ -21,7 +21,7 @@ import styles from "@patternfly/react-styles/css/components/Form/form";
 export interface FormProps {
 	defaultValues?: FormInputs;
 	isLoading: boolean;
-	onSubmit: (query: FormInputs) => void;
+	onSubmit: (_query: FormInputs) => void;
 }
 
 export interface FormInputs {

src/modules/x509/extensions.ts

@@ -13,7 +13,7 @@ import { KEY_USAGE_NAMES } from "./constants";
 
 interface ExtensionConfig {
 	name: string;
-	toJSON: (rawExtension: Extension) => {};
+	toJSON: (_rawExtension: Extension) => {};
 }
 
 const UTF_8_DECODER = new TextDecoder("utf-8");

src/pages/_app.tsx

@@ -1,20 +1,8 @@
 import type { AppProps } from "next/app";
 import "@patternfly/react-core/dist/styles/base.css";
-import { NextPageContext } from "next";
 
 function App({ Component, pageProps }: AppProps) {
 	return <Component {...pageProps} />;
 }
 
-App.getInitialProps = async (_ctx: NextPageContext) => {
-	return {
-		props: {
-			NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: process.env
-				.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
-				? process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
-				: null,
-		}, // gets passed to the page component as props
-	};
-};
-
 export default App;