tudor.stanciu/reverse-proxy-frontend
tudor.stanciu/reverse-proxy-frontend
1
0
Fork 0
mirror of https://dev.azure.com/tstanciu94/ReverseProxy/_git/ReverseProxy_Frontend synced 2025-10-03 16:49:04 +03:00
Code Issues 3 Packages Projects Releases Wiki Activity

Refactor Dockerfile and configuration for dynamic base path handling

Browse Source
This commit is contained in:
Tudor Stanciu 2025-09-29 00:37:31 +03:00
parent 89c0ab6690
commit 06cee54e92
4 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Dockerfile
View File

@ -18,8 +18,8 @@ RUN rm -f .npmrc
COPY . . COPY . .
# Build the application # Build the application
ARG VITE_BASE_PATH="" ARG APP_SUBFOLDER=""
ENV VITE_BASE_PATH=${VITE_BASE_PATH} ENV VITE_BASE_PATH=${APP_SUBFOLDER}
RUN npm run build RUN npm run build
# Production stage - Use nginx for better performance # Production stage - Use nginx for better performance
@ -28,12 +28,12 @@ FROM nginx:1.29.1-alpine
# Remove default nginx website # Remove default nginx website
RUN rm -rf /usr/share/nginx/html/* RUN rm -rf /usr/share/nginx/html/*
# Create subfolder structure dynamically based on VITE_BASE_PATH # Create subfolder structure dynamically based on APP_SUBFOLDER
ARG VITE_BASE_PATH="" ARG APP_SUBFOLDER=""
RUN if [ -n "$VITE_BASE_PATH" ]; then mkdir -p /usr/share/nginx/html/$VITE_BASE_PATH; fi RUN if [ -n "$APP_SUBFOLDER" ]; then mkdir -p /usr/share/nginx/html/$APP_SUBFOLDER; fi
# Copy built application # Copy built application
COPY --from=builder /app/build /usr/share/nginx/html/${VITE_BASE_PATH} COPY --from=builder /app/build /usr/share/nginx/html/${APP_SUBFOLDER}
# Copy nginx configuration # Copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf COPY nginx.conf /etc/nginx/nginx.conf
@ -48,7 +48,7 @@ EXPOSE 80
# Health check # Health check
HEALTHCHECK --interval=120s --timeout=10s --start-period=60s --retries=3 \ HEALTHCHECK --interval=120s --timeout=10s --start-period=60s --retries=3 \
CMD if [ -n "$VITE_BASE_PATH" ]; then curl -f http://localhost/$VITE_BASE_PATH/ || exit 1; else curl -f http://localhost/ || exit 1; fi CMD if [ -n "$APP_SUBFOLDER" ]; then curl -f http://localhost/$APP_SUBFOLDER/ || exit 1; else curl -f http://localhost/ || exit 1; fi
# Start nginx # Start nginx
CMD ["nginx", "-g", "daemon off;"] CMD ["nginx", "-g", "daemon off;"]

6
README.md
View File

@ -215,8 +215,8 @@ WORKDIR /app
COPY package*.json ./ COPY package*.json ./
RUN npm ci --only=production=false RUN npm ci --only=production=false
COPY . . COPY . .
ARG VITE_BASE_PATH="" ARG APP_SUBFOLDER=""
ENV VITE_BASE_PATH=${VITE_BASE_PATH} ENV VITE_BASE_PATH=${APP_SUBFOLDER}
RUN npm run build RUN npm run build
# Production stage # Production stage
@ -235,7 +235,7 @@ CMD ["nginx", "-g", "daemon off;"]
docker build -t reverse-proxy-frontend . docker build -t reverse-proxy-frontend .
# For subfolder deployment (/reverse-proxy) # For subfolder deployment (/reverse-proxy)
docker build --build-arg VITE_BASE_PATH=reverse-proxy -t reverse-proxy-frontend . docker build --build-arg APP_SUBFOLDER=reverse-proxy -t reverse-proxy-frontend .
``` ```
### Run Container ### Run Container

16
src/utils/paths.ts
View File

@ -15,11 +15,15 @@ export const getPublicPath = (path: string): string => {
return `${normalizedBase}${cleanPath}`; return `${normalizedBase}${cleanPath}`;
}; };
export const getRouterBasePath = (): string | undefined => { const getCleanBasePath = (): string => {
const basePath = getBasePath(); const basePath = getBasePath();
if (basePath === "/") return undefined; if (basePath === "/") return "";
// Remove trailing slash if present and ensure it starts with a slash // Remove both leading and trailing slashes
let baseUrl = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath; return basePath.replace(/^\/|\/$/g, "");
baseUrl = baseUrl.startsWith("/") ? baseUrl : `/${baseUrl}`; };
return baseUrl;
export const getRouterBasePath = (): string | undefined => {
const basePath = getCleanBasePath();
if (!basePath) return undefined;
return `/${basePath}`;
}; };

10
vite.config.ts
View File

@ -14,7 +14,7 @@ export default defineConfig(() => {
const packageJson = JSON.parse(readFileSync("./package.json", "utf-8")); const packageJson = JSON.parse(readFileSync("./package.json", "utf-8"));
return { return {
base: process.env.VITE_BASE_PATH ? `/${process.env.VITE_BASE_PATH}/` : "/", base: getViteBasePath(),
plugins: [ plugins: [
react(), react(),
viteTsconfigPaths(), // Enables TypeScript path mapping from tsconfig.json viteTsconfigPaths(), // Enables TypeScript path mapping from tsconfig.json
@ -42,3 +42,11 @@ export default defineConfig(() => {
} }
}; };
}); });
const getViteBasePath = (): string => {
const basePath = process.env.VITE_BASE_PATH;
if (!basePath) return "/";
const cleanPath = basePath.replace(/^\/|\/$/g, "");
// Vite expects both leading and trailing slashes if not root
return `/${cleanPath}/`;
};