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

1
apps/leafcutter/components/Question.tsx
View file

@ -68,7 +68,6 @@ export const Question: FC<QuestionProps> = ({ question, answer }) => {
</AccordionSummary>
<AccordionDetails sx={{ border: 0 }}>
<Box
component="p"
sx={{ ...p, p: 2, border: `1px solid ${lavender}`, borderRadius: 3 }}
>
<ReactMarkdown>{answer}</ReactMarkdown>

6
apps/leafcutter/next.config.js
View file

@ -2,17 +2,19 @@ module.exports = {
publicRuntimeConfig: {
embedded: Boolean(process.env.LINK_EMBEDDED),
},
basePath: "/proxy/leafcutter",
assetPrefix: "/proxy/leafcutter",
i18n: {
locales: ["en", "fr"],
defaultLocale: "en",
},
rewrites: async () => ({
/* rewrites: async () => ({
fallback: [
{
source: "/:path*",
destination: "/api/proxy/:path*",
},
],
}),
}) */
};

4
apps/leafcutter/pages/faq.tsx
View file

@ -31,6 +31,7 @@ const FAQ = () => {
question: t("whatCanYouDoWithLeafcutterQuestion"),
answer: t("whatCanYouDoWithLeafcutterAnswer"),
},
{
question: t("whereIsTheDataComingFromQuestion"),
answer: t("whereIsTheDataComingFromAnswer"),
@ -43,6 +44,7 @@ const FAQ = () => {
question: t("howDoWeKeepTheDataSafeQuestion"),
answer: t("howDoWeKeepTheDataSafeAnswer"),
},
{
question: t("howLongDoYouKeepTheDataQuestion"),
answer: t("howLongDoYouKeepTheDataAnswer"),
@ -94,7 +96,7 @@ const FAQ = () => {
</Grid>
</Grid>
</PageHeader>
{questions.map((q, index) => (
{questions.map((q: any, index: number) => (
<Question key={index} question={q.question} answer={q.answer} />
))}
</Layout>

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,
},
};

10
docker/zammad/setup.rb
View file

@ -3,8 +3,18 @@
packages = Dir.glob('/opt/zammad/contrib/link/addons/*')
packages.each do |package|
puts "Attempting to uninstall #{package} package..."
existing_package = Package.find_by(name: package.name)
if existing_package.blank?
puts "Package #{name} is not installed."
else
puts "Uninstalling #{package.name} #{package.version}..."
Package.uninstall(name: package.name, version: package.version)
puts 'Uninstalled'
end
puts "Installing #{package} package..."
Package.install(file: package)
puts 'Installed'
rescue StandardError => e
puts e.message
end

6
package-lock.json generated
View file

@ -11,7 +11,10 @@
"workspaces": [
"apps/*",
"packages/*"
]
],
"dependencies": {
"prettier": "^2.8.8"
}
},
"apps/leafcutter": {
"version": "0.2.0",
@ -17297,7 +17300,6 @@
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},

3
package.json
View file

@ -27,5 +27,8 @@
"hapi-postgraphile": {
"pg": "^8.11.0"
}
},
"devDependencies": {
"prettier": "^2.8.8"
}
}