sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use NextJS middleware for proxying

Browse source
This commit is contained in:
Darren Clarke 2023-05-30 09:05:40 +00:00 • committed by GitHub
parent 4e4603bd71
commit df9b8abf15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 154 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

21
apps/link/components/InternalZammadWrapper.tsx
View file

@ -1,4 +1,5 @@
import { FC, useState } from "react";
import getConfig from "next/config";
import { useRouter } from "next/router";
import Iframe from "react-iframe";
@ -13,13 +14,16 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
}) => {
const router = useRouter();
const [display, setDisplay] = useState("none");
const url = `${origin}/zammad${path}`;
console.log({ origin, path, url });
const {
publicRuntimeConfig: { linkURL },
} = getConfig();
const url = `${linkURL}/proxy/zammad${path}`;
console.log({ url });
return (
// @ts-ignore
<Iframe
id="link"
id="zammad"
url={url}
width="100%"
height="100%"
@ -27,6 +31,8 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
styles={{ display }}
onLoad={() => {
const linkElement = document.querySelector("iframe");
// const baseElement = linkElement.contentDocument.createElement("base");
// baseElement.href = `${linkURL}/proxy/zammad`;
if (
linkElement.contentDocument &&
linkElement.contentDocument?.querySelector &&
@ -50,15 +56,16 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
// @ts-ignore
if (linkElement.contentDocument.querySelector(".overview-header")) {
// @ts-ignore
linkElement.contentDocument.querySelector(".overview-header").style =
"display: none";
linkElement.contentDocument.querySelector(
".overview-header"
).style = "display: none";
}
setDisplay("inherit");
if (linkElement.contentWindow) {
linkElement.contentWindow.addEventListener('hashchange', () => {
const hash = linkElement.contentWindow?.location?.hash ?? ""
linkElement.contentWindow.addEventListener("hashchange", () => {
const hash = linkElement.contentWindow?.location?.hash ?? "";
if (hash.startsWith("#ticket/zoom/")) {
setDisplay("none");
const ticketID = hash.split("/").pop();

6
apps/link/components/LeafcutterWrapper.tsx
View file

@ -11,9 +11,9 @@ type LeafcutterWrapperProps = {
export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
const {
publicRuntimeConfig: { leafcutterURL },
publicRuntimeConfig: { linkURL },
} = getConfig();
const fullLeafcutterURL = `${leafcutterURL}/${path}`;
const fullLeafcutterURL = `${linkURL}/proxy/leafcutter/${path}`;
return (
<Layout>
@ -28,7 +28,7 @@ export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
>
<Grid item sx={{ height: "100vh", width: "100%" }}>
<Iframe
id="link"
id="leafcutter"
url={fullLeafcutterURL}
width="100%"
height="100%"

41
apps/link/components/MetamigoWrapper.tsx Normal file
View file

@ -0,0 +1,41 @@
import { FC } from "react";
import getConfig from "next/config";
import Head from "next/head";
import { Grid } from "@mui/material";
import { Layout } from "components/Layout";
import Iframe from "react-iframe";
type MetamigoWrapperProps = {
path: string;
};
export const MetamigoWrapper: FC<MetamigoWrapperProps> = ({ path }) => {
const {
publicRuntimeConfig: { linkURL },
} = getConfig();
const fullMetamigoURL = `${linkURL}/metamigo/${path}`;
return (
<Layout>
<Head>
<title>Link Shell</title>
</Head>
<Grid
container
spacing={0}
sx={{ height: "100%", width: "100%" }}
direction="column"
>
<Grid item sx={{ height: "100vh", width: "100%" }}>
<Iframe
id="link"
url={fullMetamigoURL}
width="100%"
height="100%"
frameBorder={0}
/>
</Grid>
</Grid>
</Layout>
);
};

42
apps/link/middleware.ts
View file

@ -1,7 +1,46 @@
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { withAuth } from "next-auth/middleware";
import { getToken } from "next-auth/jwt";
const rewriteURL = (request: NextRequest, originBaseURL: string, destinationBaseURL: string, headers: any = {}) => {
if (request.nextUrl.pathname.includes('/_next/static/development/')) {
return NextResponse.next();
}
const destinationURL = request.url.replace(originBaseURL, destinationBaseURL);
console.log(`Rewriting ${request.url} to ${destinationURL}`);
return NextResponse.rewrite(new URL(destinationURL), { ...request.headers, ...headers });
};
const checkRewrites = async (request: NextRequest) => {
if (request.nextUrl.pathname.startsWith('/proxy/leafcutter')) {
return rewriteURL(request, process.env.LINK_URL, process.env.LEAFCUTTER_URL);
} else if (request.nextUrl.pathname.startsWith('/proxy/metamigo')) {
return rewriteURL(request, process.env.LINK_URL, process.env.METAMIGO_URL);
} else if (request.nextUrl.pathname.startsWith('/proxy/zammad')) {
const session = await getToken({
req: request,
secret: process.env.NEXTAUTH_SECRET,
});
const headers = {
'X-Forwarded-User': session.email.toLowerCase(),
host: 'zammad.example.com'
};
return rewriteURL(request, `${process.env.LINK_URL}/proxy/zammad`, process.env.ZAMMAD_URL, headers);
} else if (request.nextUrl.pathname.startsWith('/assets')) {
console.log('asset');
return rewriteURL(request, `${process.env.LINK_URL}`, process.env.ZAMMAD_URL);
} else if (request.nextUrl.pathname.startsWith('/proxy/assets') || request.nextUrl.pathname.startsWith('/proxy/api')) {
console.log('proxy asset');
return rewriteURL(request, `${process.env.LINK_URL}/proxy`, process.env.ZAMMAD_URL);
}
};
export default withAuth(
() => { },
checkRewrites,
{
pages: {
signIn: `/login`,
@ -32,3 +71,4 @@ export default withAuth(
}
}
);

9
apps/link/next.config.js
View file

@ -2,17 +2,10 @@
const nextConfig = {
reactStrictMode: true,
publicRuntimeConfig: {
linkURL: process.env.LINK_URL,
leafcutterURL: process.env.LEAFCUTTER_URL,
metamigoURL: process.env.METAMIGO_URL,
},
rewrites: async () => ({
fallback: [
{
source: "/:path*",
destination: "/api/proxy/:path*",
},
],
}),
};
module.exports = nextConfig;

2
apps/link/pages/_app.tsx
View file

@ -34,7 +34,7 @@ export default function LinkWeb(props: LinkWebProps) {
typeof window !== "undefined" && window.location.origin
? window.location.origin
: null;
const client = new GraphQLClient(`${origin}/graphql`, {
const client = new GraphQLClient(`${origin}/proxy/zammad/graphql`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",

39
apps/link/pages/api/proxy/[[...path]].ts
View file

@ -1,39 +0,0 @@
import { NextApiRequest, NextApiResponse } from 'next';
import { createProxyMiddleware } from 'http-proxy-middleware';
import { getToken } from "next-auth/jwt";
const withAuthInfo =
(handler) => async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
if (req.headers) {
req.headers['X-Forwarded-User'] = session.email.toLowerCase();
req.headers['host'] = 'zammad.example.com';
}
return handler(req, res);
};
const proxy = createProxyMiddleware({
target: process.env.ZAMMAD_URL,
changeOrigin: true,
xfwd: true,
ws: false,
pathRewrite: { "^/zammad": "" },
});
export default withAuthInfo(proxy);
export const config = {
api: {
bodyParser: false,
externalResolver: true,
},
};