From 8bae53d026e93fe45fde7238c816245484a7e1ca Mon Sep 17 00:00:00 2001 From: hzhang Date: Thu, 5 Dec 2024 13:39:08 +0000 Subject: [PATCH] read configs from env --- .gitignore | 3 +- BuildConfig.sh | 36 ++++++++++++++++++++ Dockerfile | 5 ++- src/App.js | 3 +- src/AuthProvider.js | 13 +++---- src/Callback.js | 11 +++--- src/components/Markdowns/MarkdownEditor.css | 2 ++ src/components/Markdowns/MarkdownEditor.js | 8 +++-- src/components/Navigations/SideNavigation.js | 5 +-- src/config.js | 10 ++++++ src/confs/appConfig.js | 29 ---------------- src/index.js | 17 ++++----- 12 files changed, 80 insertions(+), 62 deletions(-) create mode 100644 BuildConfig.sh create mode 100644 src/config.js delete mode 100644 src/confs/appConfig.js diff --git a/.gitignore b/.gitignore index 2c66fb8..37f0f70 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ -summerizer.py -.env \ No newline at end of file +summerizer.py \ No newline at end of file diff --git a/BuildConfig.sh b/BuildConfig.sh new file mode 100644 index 0000000..89eea36 --- /dev/null +++ b/BuildConfig.sh @@ -0,0 +1,36 @@ +#！/bin/bash +rm -f /app/config.js; +if [ -z "$BACKEND_HOST" ]; then + BACKEND_HOST="http://localhost:5000" +fi +if [ -z "$FRONTEND_HOST" ]; then + FRONTEND_HOST="http://localhost:3000" +fi +if [ -z "$KC_CLIENT_ID" ]; then + KC_CLIENT_ID="labdev" +fi +if [ -z "$KC_HOST" ]; then + KC_HOST="https://login.hangman-lab.top" +fi +if [ -z "$KC_REALM" ]; then + KC_REALM="Hangman-Lab" +fi + +mkdir -p /app/src + +echo " +const config = { + BACKEND_HOST: \"${BACKEND_HOST}\", + FRONTEND_HOST: \"${FRONTEND_HOST}\", + KC_CLIENT_ID: \"${KC_CLIENT_ID}\", + OIDC_CONFIG: { + authority: \"${KC_HOST}/realms/${KC_REALM}\", + client_id: \"${KC_CLIENT_ID}\", + redirect_uri: \"${FRONTEND_HOST}/callback\", + post_logout_redirect_uri: \"${FRONTEND_HOST}\", + response_type: \"code\", + scope: \"openid profile email roles\", + }, +}; +export default config; +" > /app/src/config.js; diff --git a/Dockerfile b/Dockerfile index c9e5acf..e96d24a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,8 +6,11 @@ COPY package*.json ./ RUN npm install COPY . . +COPY BuildConfig.sh /app/BuildConfig.sh +RUN chmod +x /app/BuildConfig.sh +RUN /app/BuildConfig.sh >&1 RUN npm run build EXPOSE 3000 -CMD ["npm", "start"] \ No newline at end of file +CMD ["/bin/bash", "-c", "/app/BuildConfig.sh && npm start"] \ No newline at end of file diff --git a/src/App.js b/src/App.js index 575ffff..8e3f8ca 100644 --- a/src/App.js +++ b/src/App.js @@ -6,9 +6,10 @@ import MarkdownContent from "./components/MarkdownContent"; import MarkdownEditor from "./components/Markdowns/MarkdownEditor"; import "./App.css"; import Callback from "./Callback"; -import {config} from "./confs/appConfig"; +import config from "./config"; const App = () => { + console.log(config) return (
diff --git a/src/AuthProvider.js b/src/AuthProvider.js index e86da87..abb1467 100644 --- a/src/AuthProvider.js +++ b/src/AuthProvider.js @@ -1,6 +1,6 @@ import React, {createContext, useEffect, useMemo, useState} from "react"; import { UserManager } from "oidc-client-ts"; -import {appConfig} from "./confs/appConfig"; +import config from "./config"; export const AuthContext = createContext({ @@ -14,10 +14,7 @@ const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [roles, setRoles] = useState([]); const userManager = - useMemo(() => new UserManager(appConfig.oidcConfig), []); - - - //new UserManager(appConfig.oidcConfig); + useMemo(() => new UserManager(config.OIDC_CONFIG), []); useEffect(() => { userManager.getUser() @@ -25,7 +22,7 @@ const AuthProvider = ({ children }) => { if (user && !user.expired) { setUser(user); localStorage.setItem("accessToken", user.access_token); - const clientRoles = user?.profile?.resource_access?.[appConfig.kc_client_id]?.roles || []; + const clientRoles = user?.profile?.resource_access?.[config.KC_CLIENT_ID]?.roles || []; setRoles(clientRoles); } else if (user && user.expired) { userManager @@ -34,7 +31,7 @@ const AuthProvider = ({ children }) => { setUser(newUser); localStorage.setItem("accessToken", newUser.access_token); const clientRoles = - newUser?.profile?.resource_access?.[appConfig.kc_client_id]?.roles || []; + newUser?.profile?.resource_access?.[config.KC_CLIENT_ID]?.roles || []; setRoles(clientRoles); }) .catch((err) => { @@ -49,7 +46,7 @@ const AuthProvider = ({ children }) => { .signinRedirect() .catch( (err) => { - console.log(appConfig); + console.log(config); console.log(err); }); } diff --git a/src/Callback.js b/src/Callback.js index 573e735..4e0f208 100644 --- a/src/Callback.js +++ b/src/Callback.js @@ -1,14 +1,15 @@ import React, { useEffect } from "react"; import { UserManager } from "oidc-client-ts"; -import {appConfig} from "./confs/appConfig"; +import config from "./config"; const Callback = () => { useEffect(() => { - const userManager = new UserManager(appConfig.oidcConfig); - userManager.signinRedirectCallback().then(() => { - window.location.href = "/"; - }); + const userManager = new UserManager(config.OIDC_CONFIG); + userManager.signinRedirectCallback() + .then(() => { + window.location.href = "/"; + }); }, []); return
Logging in...
; diff --git a/src/components/Markdowns/MarkdownEditor.css b/src/components/Markdowns/MarkdownEditor.css index f7eb5a3..947daac 100644 --- a/src/components/Markdowns/MarkdownEditor.css +++ b/src/components/Markdowns/MarkdownEditor.css @@ -45,6 +45,8 @@ border-radius: 6px; border: 1px solid #dcdcdc; transition: border-color 0.3s ease, box-shadow 0.3s ease; + height: 70vh !important; + resize: vertical; } .markdown-editor-form .input:focus, diff --git a/src/components/Markdowns/MarkdownEditor.js b/src/components/Markdowns/MarkdownEditor.js index fba88a1..08eed96 100644 --- a/src/components/Markdowns/MarkdownEditor.js +++ b/src/components/Markdowns/MarkdownEditor.js @@ -8,8 +8,9 @@ import rehypeKatex from "rehype-katex"; import rehypeRaw from "rehype-raw"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism"; -import "katex/dist/katex.min.css"; // LaTeX 样式 +import "katex/dist/katex.min.css"; import "./MarkdownEditor.css"; +import config from "../../config"; const MarkdownEditor = () => { const { roles } = useContext(AuthContext); @@ -34,7 +35,7 @@ const MarkdownEditor = () => { }, [id]); const handleSave = () => { - const url = id ? `/api/markdown/${id}` : "/api/markdown"; + const url = id ? `${config.BACKEND_HOST}/api/markdown/${id}` : `${config.BACKEND_HOST}/api/markdown`; const method = id ? "PUT" : "POST"; fetch(url, { method, @@ -102,6 +103,7 @@ const MarkdownEditor = () => {