Load env var for api url into ui for production

This commit is contained in:
2025-04-14 23:37:47 -04:00
parent 9ad87fbac5
commit c2e9e098ed
5 changed files with 9 additions and 3 deletions

View File

@@ -20,11 +20,11 @@ ENV environment=${environment}
COPY nginx/nginx.conf /etc/nginx/nginx.conf COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY nginx/templates/ /templates/ COPY nginx/templates/ /templates/
COPY nginx/scripts/01-configure_ssh.sh /docker-entrypoint.d/01-configure_ssh.sh COPY nginx/scripts/01-setup.sh /docker-entrypoint.d/01-setup.sh
COPY --from=ui-builder /builder/dist /dist COPY --from=ui-builder /builder/dist /dist
RUN echo "Copying UI assets into nginx html folder..."; \ RUN echo "Copying UI assets into nginx html folder..."; \
mkdir -p /usr/share/nginx/html && \ mkdir -p /usr/share/nginx/html && \
cp -R /dist/* /usr/share/nginx/html; cp -R /dist/* /usr/share/nginx/html;
RUN chmod +x /docker-entrypoint.d/01-configure_ssh.sh RUN chmod +x /docker-entrypoint.d/01-setup.sh

View File

@@ -13,6 +13,7 @@ fi
if [ "$ENVIRONMENT" = "production" ]; then if [ "$ENVIRONMENT" = "production" ]; then
export UI_ROOT="/usr/share/nginx/html" export UI_ROOT="/usr/share/nginx/html"
envsubst '${VITE_API_URL}' < /usr/share/nginx/html/config.template.js > /usr/share/nginx/html/config.js
echo "Setting production root to ${UI_ROOT}" echo "Setting production root to ${UI_ROOT}"
else else
export UI_ROOT="/home" export UI_ROOT="/home"

View File

@@ -10,6 +10,7 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="./config.js"></script>
<script type="module" src="./src/main.tsx"></script> <script type="module" src="./src/main.tsx"></script>
</body> </body>
</html> </html>

View File

@@ -0,0 +1,3 @@
window.__CONFIG__ = {
API_URL: '${VITE_API_URL}'
};

View File

@@ -1,4 +1,5 @@
const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8080/api'; // @ts-expect-error The window.__CONFIG__ only exists in production
const baseUrl = window.__CONFIG__?.API_URL || import.meta.env.VITE_API_URL || 'http://localhost:8080/api';
export async function getRequest(endpoint: string, params: Record<string, any> = {}): Promise<Response> { export async function getRequest(endpoint: string, params: Record<string, any> = {}): Promise<Response> {
Object.keys(params).forEach((key) => params[key] === undefined && delete params[key]); Object.keys(params).forEach((key) => params[key] === undefined && delete params[key]);