diff --git a/Dockerfile b/Dockerfile index 1fa64bf..96e299b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -18,8 +18,8 @@ RUN rm -f .npmrc COPY . . # Build the application -ARG VITE_BASE_PATH="" -ENV VITE_BASE_PATH=${VITE_BASE_PATH} +ARG APP_SUBFOLDER="" +ENV VITE_BASE_PATH=${APP_SUBFOLDER} RUN npm run build # Production stage - Use nginx for better performance @@ -28,12 +28,12 @@ FROM nginx:1.29.1-alpine # Remove default nginx website RUN rm -rf /usr/share/nginx/html/* -# Create subfolder structure dynamically based on VITE_BASE_PATH -ARG VITE_BASE_PATH="" -RUN if [ -n "$VITE_BASE_PATH" ]; then mkdir -p /usr/share/nginx/html/$VITE_BASE_PATH; fi +# Create subfolder structure dynamically based on APP_SUBFOLDER +ARG APP_SUBFOLDER="" +RUN if [ -n "$APP_SUBFOLDER" ]; then mkdir -p /usr/share/nginx/html/$APP_SUBFOLDER; fi # 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.conf /etc/nginx/nginx.conf @@ -48,7 +48,7 @@ EXPOSE 80 # Health check 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 CMD ["nginx", "-g", "daemon off;"] diff --git a/README.md b/README.md index 68d6119..9249aa6 100644 --- a/README.md +++ b/README.md @@ -215,8 +215,8 @@ WORKDIR /app COPY package*.json ./ RUN npm ci --only=production=false COPY . . -ARG VITE_BASE_PATH="" -ENV VITE_BASE_PATH=${VITE_BASE_PATH} +ARG APP_SUBFOLDER="" +ENV VITE_BASE_PATH=${APP_SUBFOLDER} RUN npm run build # Production stage @@ -235,7 +235,7 @@ CMD ["nginx", "-g", "daemon off;"] docker build -t reverse-proxy-frontend . # 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 diff --git a/src/utils/paths.ts b/src/utils/paths.ts index 20b606c..7113657 100644 --- a/src/utils/paths.ts +++ b/src/utils/paths.ts @@ -15,11 +15,15 @@ export const getPublicPath = (path: string): string => { return `${normalizedBase}${cleanPath}`; }; -export const getRouterBasePath = (): string | undefined => { +const getCleanBasePath = (): string => { const basePath = getBasePath(); - if (basePath === "/") return undefined; - // Remove trailing slash if present and ensure it starts with a slash - let baseUrl = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath; - baseUrl = baseUrl.startsWith("/") ? baseUrl : `/${baseUrl}`; - return baseUrl; + if (basePath === "/") return ""; + // Remove both leading and trailing slashes + return basePath.replace(/^\/|\/$/g, ""); +}; + +export const getRouterBasePath = (): string | undefined => { + const basePath = getCleanBasePath(); + if (!basePath) return undefined; + return `/${basePath}`; }; diff --git a/vite.config.ts b/vite.config.ts index 4248465..011d0ae 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,7 +14,7 @@ export default defineConfig(() => { const packageJson = JSON.parse(readFileSync("./package.json", "utf-8")); return { - base: process.env.VITE_BASE_PATH ? `/${process.env.VITE_BASE_PATH}/` : "/", + base: getViteBasePath(), plugins: [ react(), 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}/`; +};